I am working with an ASP.NET application for my company. I have a MasterPage with a navbar with options. One of the options displays another page but now the company ask me to pass a parameter to the link. I already find out how to do that (with a property in the Main.Master class). But here is where I have the problem. Tha parameter must be the value from a select element in the main page and it must be saved in the property as soon as the user select one.
I can't call the onChange event because the element isn't an asp component and i mustn't change it because and API (Select2) need it to be a normal html element. But maybe there is a way; if you know please tell me how.
I also try to retrieve the value with JS and pass it from to the master page with ajax, but it didn't work because it only calls a static method and a static method can't use the MasterType reference to change the Main.Master.
So, does exist some way to achieve what I want? Also, sorry for not post code but this is a bit confidential.
yes, you can. Probably the most easy?
Well, in your main menu (likey based on the bootstrap default menu), you can in place of a href link, drop in a menu button (use a link button).
So, say we have this menu markup
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li>
<asp:LinkButton ID="LinkButton1" runat="server" Text="My Test Update" OnClick="LinkButton1_Click"></asp:LinkButton>
</li>
</ul>
</div>
So, you have your standard menus - hrefs - they jump without any code.
But, note the last one menu - the My Test Update.
That is a link button. so now you have a event stub in your master page code stub.
You get a menu like this:
And I just dropped in a text box on that page. Like this:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: Title %>.</h2>
<p>Your app description page.</p>
<p>Use this area to provide additional information.</p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Content>
so far, that's as plan jane as it can be.
So, now how can we pick up the text box? Well, you can do this, in master page - code behind:
Protected Sub LinkButton1_Click(sender As Object, e As EventArgs)
Dim MyContent As ContentPlaceHolder
MyContent = Me.FindControl("MainContent")
Dim MyTextBox As TextBox = MyContent.FindControl("TextBox1")
Debug.Print("text box value = " & MyTextBox.Text)
Response.Redirect("~/RadioFun.aspx")
End Sub
So notice how we simply grabbed the text box value. Now how to pass to the next page? Gee, you could use session, or use that value as a parameter in the url that you jump to, or whatever.
So, by replacing the menu navigation from a href to a link button? Well, it looks the same, but now you get a event code behind in your master page code. And as above shows, it quite easy to pull/pluck out the values - at that point, as noted, you can shove that value into session() and then jump to the page that the menu click button (link button) supposed to navigate too. You also cound consider using post-back URL. if you look close, note that Page.PreviousPage is a property of the page. The "previous" page ONLY works on first page load, and ONLY works if the button in question uses a postback URL. So, we could dump the linkbutton event (but still use the link button). Set the post-back url of the link button in the markup. That way, then on page load (only first load - postback = false, then you are free to use page.prevous - and you can use find control against that page like I did as per above - your free to grab "many" controls - not just pass one value.
PostBackURL is thus another way - and I often use PostBackURL in a button dropped on a page - it will navigate to the new page - does so without a event code behind stub, but MORE important using PostBackURL settings for that button/control ALSO enables you to use/get/grab the page.previousPage property - that previous page is in fact the WHOLE previous page that was passed to the server - and you can then grab say values from a WHOLE form or whatever. Just keep in mind that since you have a master page, then the two step process (get the content page, then then a find control on that page is still required).
So either above approaches will work.
Related
I'm attempting to find a way to differentiate between instances of user controls (.ascx) on the same page. These user controls all have their own associated controls within the page which they need to interact with.
For this particular "provider lookup" tool I need to be able to adjust the value of textboxes on the page which do not all have the same ID.
Hopefully the below will show what I mean.
HTML of my .aspx page, where I include three different instances of the user control:
<uc4:providerlookup ID="ProviderLookupReferring" runat="server" allowunassigned="true" associatedtextbox="ReferringProviderNameTextBox"/>
<uc4:providerlookup ID="ProviderLookupPrimary" runat="server" allowunassigned="false" associatedtextbox="PrimaryProviderNameTextBox"/>
<uc4:providerlookup ID="ProviderLookupSecondary" runat="server" allowunassigned="false" associatedtextbox="SecondaryProviderNameTextBox"/>
Javascript example within the user control (providerlookup.ascx):
unassignedProviderSelection()
{
if (document.getElementById("DetailContentPlaceHolder_ReferringProviderNameTextBox") != null)
{
document.getElementById("ReferringProviderNameTextBox").value = "Blah blah blah";
}
}
HTML within the user control (providerlookup.ascx):
<asp:Button ID="ButtonUnassignedProvider" runat="server" text="Unassigned"
onclientclick="unassignedProviderSelection(); return false;"
CausesValidation="False" Width="117px" UseSubmitBehavior="false" />
So, what I'm doing here is providing a button within that user control called "ButtonUnassignedProvider" which I want to use to modify the contents of a textbox within the .aspx page that I include the user control in.
The problem is that I don't know the id of the textbox: I want to do this in a generic way by allowing you to set a custom attribute of the user control when you declare an instance in your .aspx page.
I didn't write the original user control: it's not going anywhere and I need to try to enhance it with this new functionality. The way I'm trying to do it may not be the best way though...
Thank you for any help you can provide.
You have to use FindControl to navigate up the control tree and then get the correct ClientID. It would look something like this on the aspx page where the UserControl is located.
document.getElementById("<%= ProviderLookupReferring.FindControl("ButtonUnassignedProvider").ClientID %>")
I had a chance to speak with a more experience Web developer this morning and he suggested building my Javascript on the server side and then adding an onclientclick event to the Unassigned button. This seems to work so I think that's what I'll do.
EDIT: Can this be done by adding a variable to the Laravel cookie in the client using jQuery? I understand the Cookie is attached to the request during GET?
Is it possible to add a variable to the $request container in Laravel 5.2 using jQuery prior to executing a GET route request?
Essentially I am trying to pass a value to a GET request and keeping it off the URL as a parameter (and hidden from the user).
My HTML is essentially a menu:
<ul class="sidebar-nav nav-pills nav-stacked " id="menu">
<li id="menu-1">
Menu 1
</li>
<li id="menu-2">
Menu 2
</li>
<li>.....</li>
</ul>
When the a link is clicked, I want to intercept this and add
menuState = 'state';
To the $request container, then allow the click event to route to the href destination.
Now at Laravel end I shoule be able to access its value as:
$request->input('menuState');
Is this possible on what is essentially a GET request so there is no form being posted?
This is an example of adding a URL variable
<a onclick="addURL(this)" href="app.url/1">Menu 1</a>
function addURL(element)
{
$(element).attr('href', function() {
return this.href + '&menuState=10';
});
}
Can this be done?
<a onclick="addURL(this)" href="app.url/1">Menu 1</a>
function addURL(element)
{
---> ADD menuState = value to $request container, then continue with GET request
}
Ok so I'll try to present a more complete solution to your question.
As you pointed it out, your menu url should probably look better; they should have words in it rather than numbers (this is good for SEO too). The <a> href attr can just be set to the relative url like href='home' or href = 'about'.
Now the question is how do you pass the menu state for all the pages. You probably don't want to use the $request variable in this case as menu state I think should be pre-determined for different pages. The controllers should set some menu-state variable array that contains the on/off for each menu. (or simply a string set to which menu is on but then you need to loop through the menus and do conditional check, your choice).
You can probably utilize a view composer for the menu in this case or simply use view()->share in the serviceProvider if you are lazy. Check the necessary conditions and pass along the result. In this case I think the menu-state should be clear from the url alone accessed in the script with Route::url().
Edit:
Ok. So finally I understand what's going on after that discussion. Here's what I suggest. I wouldn't bother try to persist the menu state. Most sites have the hover effect where the menu just expands on mouseover, then you click on the menu to go to another page on which you want to see the content more so the menu should just be collapsed. If the user really want the choice to have the option of having the menu expanded as default, make that a preference setting in their profile. Leave the toggle JavaScript however as they may still want to collapse the menu sometimes :)
IMO the simplest way is to prevent link redirection after the click on a and add click event to capture this click then use jquery $.get() method to add parameters you want and send your request :
$('#menu').on('click', 'a', funtion(e){
e.pereventDefault(); //prevent link redirection after click
$.get($(this).attr('href'), {menuState: 'state'}, function(response){
//response variable contain response from laravel controler
})
});
Hope this helps.
I am using devExpress 11.2 and ASP.NET 4.0. Please bear with me for lengthy problem description.
I have created a user control which contains a ASPxPopupControl (ID = "myPopup")
<dx:ASPxPopupControl ID="myPopup" runat="server" ... </dx:ASPxPopupControl>
and other controls. I also implemented a public method ShowPopup() in which it executes the myPopup.ShowOnPageLoad = true in order to show this popup. This user control is then registered and referenced in my ASPX page. I put this user control into a cell of a table within ASPxRoundPanel with ID="myUC"
In this page, I have a ASPxGridView in which I created a custom command button as follows:
<dx:GridViewCommandColumn VisibleIndex="0" Width="30px" Caption="" ButtonType="Image">
<CustomButtons>
<dx:GridViewCommandColumnCustomButton ID="cmd">
<Image Url="~/Images/OK.png" />
</dx:GridViewCommandColumnCustomButton>
</CustomButtons>
</dx:GridViewCommandColumn>
ClientSideEvents is defined as
<ClientSideEvents BeginCallback="OnDevExpressBeginCallback" EndCallback="OnDevExpressEndCallback">
I would like to popup my user control when this image button is clicked. Please note that this ASPxGridView also provide Insert/Editing/Delete function.
There are two ways to deal with this requirement.
1 In order to ensure ASPxGridView handling its built-in commands (Insert and etc) correctly, I need to set EnableCallBacks="True" then I set OnCustomButtonCallback="OnmyASPxGridView_CustomButtonCallback" to handle the clicking event of the image button from code behind. I called myUC.ShowPopup() from code behind and I debugged up to here. However, the popup is not shown. If I set EnableCallBacks="False" then the popup is shown exactly what I expected.
The problem of this approach is not acceptable because the built-in commands do not work properly. So the question is how can I show the popup control within my user control from code behind while EnableCallBacks="True" ?
2 Second approach is to show popup from client side.
I set EnableCallBacks="True" first to ensure my built-in commands work properly. then I defined ClientSideEvents as
<ClientSideEvents BeginCallback="OnDevExpressBeginCallback" EndCallback="OnDevExpressEndCallback" CustomButtonClick="jsfnShowPopUpControl"/>
and removed OnCustomButtonCallback event.
I implemented javascript function jsfnShowPopUpControl like this:
function jsfnShowPopUpControl(s, e) {
// next, find access control inside user control
**var myPopupName = document.getElementById('<%=myUC.FindControl("myPopup").ClientID %>');**
if (myPopupName != null) {
myPopupName.Show();
myPopupName.PerformCallback(e);
}
else {
alert("Data error encountered"); // cannot find popup
return; //
}}
The key part of this approach is to find the devexpress popup control which resides within a user control. Unfortunately that getElementById function could not find the underneath control in my user control and thus popup is not shown either.
Please help and let me know what I did wrong in my two different approaches.
Thanks a lot.
Reference these- Showing a DevExpress AspxPopUpControl when user clicks a button
How to show ASPxPopupControl's window on the client side
To solve this issue, I suggest you use the ASPxClientPopupControl.ShowWindow method.
For this same scanerio as you want to implement what i have done.
Assigned ClientInstanceName property to some unique name on the page
including the user control now you free to access that object anywhere
in the html through javascript.
Let you set the popup's ClientInstanceName to "MainASPxClientPopupControl". Thus, it should be possible to use it on you main page as follows:
MainASPxClientPopupControl.Show();
Reference on this topic: ASPxPopupControl - Cannot get an instance of the popup from a page
Situation
As you can see in the screenshot below, I have an area of my site which makes use of tabs to split up the user dashboard. The tab indexes along the top are declared as URLs and as a result jQuery creates the references at runtime. I would like the user to be able to click the "here for free content" link and the system calls the Free content tab. Let's call that URL "testserver/user/free-content" for the moment
Issue
Now, I know how to programmatically deal with this situation when the tabs are declared on page as divs and have static IDs I may assign but, in this case, am not ashamed to say it has me a little stuck before I've even started.
If I set an ID on the link, jQuery will overwrite it so, I can't use that approach.
Start of solution
What I'm thinking of is the following, sorry that for the moment, I don't have a fiddle, as/if I progress, I'll update the question.
User clicks the link and jQuery picks up the event by checking if it hasClass('tab-url-call')
Temporarily save the URL attribute
Loop through the tab index
Check if URL attribute matches the temp stored
If matching call this tab
This bit has me at an end of what to do
Next
Update - Extra information
As requested, here is some HTML to demonstrate the current structure
<div id="user-tabs" class="tabs">
<ul>
<li>
Welcome
</li>
<li>
Free content
</li>
<li>
Learning
</li>
</ul>
<div id="tab-user-home">
<h3>You current have freen content "showing"</h3>
<p>
This is just an information box to highlight that the user has an
option set to show free content and inform them that they can
reach it via the tab controls or click
<a
class="tab-url-call"
href="testserver/user/free-content"
>
here for free content
</a>
</p>
</div>
</div>
Thank you for taking the time to read my question.
In abstract what you are looking for is
//register a click event handler for elements with class tab-url-call
$(document).on('click', '.tab-url-call', function(e){
e.preventDefault();
//you need to place the selector for the tab header element here
//find the anchor element with the same href as the clicked element which is inside the tab header element
$('tabheader').find('a[href="' + $(this).attr('href') + '"]').click();
})
I have a webpage that has a list of anchors on it which use clearbox3 to display them as a gallery. Only the first anchor has a textual link to click "View Photos (3)". The others are just to get the images into the clearbox gallery. And that works fine. What I need is a way to bring up the clearbox image gallery from the user click of another control. I'm currenting trying to do it from an asp.net ImageButton control (maps to input tag), but have also tried to just use an anchor too without luck.
The anchors for the clearbox image gallery look like this:
<a id="photoLink" href="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" rel="clearbox[gallery=929 Border Ave, Del Mar, California, 92014,,tnhrf=http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg]">View Photos (6)</a>
My "other" control (currently an asp.net ImageButton --> maps to a an input control looks like this:
<input type="image" name="ctl00$ContentPlaceHolderCol2$mainPropertyPhoto" id="ctl00_ContentPlaceHolderCol2_mainPropertyPhoto" src="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" />
And finally, here the javascript I tried invoking from onClick attribute in ImageButton/Input control that didn't work with clearbox (and is not cross browser supported anyway):
<script type="text/javascript">
function clickPhotoLink()
{
document.getElementById("photoLink").click();
}
</script>
My question is this: how do I bring up the clearbox gallery I setup using the list of anchors above from another control such as an input control? I already tried using the onClick attribute (same as onClientClick property for asp.net) on the input to run a script, but had no luck there either invoking a .click() on the the first anchor in the list, nor was I able to rebuild another gallery exactly the same using the "CB_Open('href=mycontent,,parameter2=value 2,,parameter3=value 3,, ... ');" syntax defined on the clearbox page. The .click() won't work since it a) its not consistent across browsers, but b) more so because it's not actually the same as the user clicking the link. Also, using the CB_Open script to rebuild a duplicate gallery didn't seem like a very ideal option (nor could I get it to work) and the .click() just doesn't work with clearbox likely since its not actually the same as a user click.
So, I could change the ImageButton (input control) to be an anchor instead and set the href to the first in the gallery I'm displaying; and then set the other list of anchors to start with image #2 in the list. However, when the user clicks the textual link "View Photos (3)" it will bring up clearbox on the index of the 2nd photo and not the first. So that works, but isn't an ideal solution either since I need it to come up and show the 1st photo (from both places) which wouldn't make sense for clearbox since the href of the anchor points to image 2 and not 1.
Basically, I am wondering if there is a way to bring up my already defined/created clearbox gallery associted with the list of defined anchors on page from another control (possibly even another anchor, but without images from gallery to avoid duplication and/or issue outlined above)?
Any help is greatly appreciated.
stackoverflow answer:
Solved. Instead of using an input control to initiate the click from, I switched it to an anchor control (with an image inside) and set the href attribute to execute the script directly instead of messing with the "onclick" and "rel" (used by clearbox) attributes to bring up the clearbox image gallery.
The resulting html is this:
<img src="http://tempo5.sandicor.com/SNDImages/221/071064797_101_12.jpg" class="mainPhotoImage" />
My asp.net code behind is this:
HtmlAnchor mainPhotoAnchor = new HtmlAnchor();
mainPhotoAnchor.InnerHtml = "<img src=\"" + arrPhotoUrls[0] + "\" class=\"mainPhotoImage\" />";
mainPhotoAnchor.HRef = "javascript:CB_Open('gallery=" + displayAddress + ",,href=" + arrPhotoUrls[0] + "');";