I've looked everywhere and read everything and nothing I do seems to work so I'll ask this question again.
I have an ASP.NET WebForms application that has a page that can collect multiple pieces of data (textboxes and dropdowns) in order to then perform a search. Once collecting all of the data from the user, the user can click the "Search" button to initiate the search. I'd like the user to also be able to simple hit the Enter button and have the search initiate. I cannot seem to do this successfully.
I've tried the DefaultButton approach at the Panel level as all of the ASP.NET controls are inside of a panel. No luck. I've tried the JavaScript function approach (defaultEnterKey) checking for event.keyCode === 13 and just trying to add an attribute to one of the text boxes (onkeydown) in the code behind just to get it to work. Nope.
I'm obviously missing something.
Well, you could first try at the form level.
so in the form tag, say try this:
<form id="form1" runat="server" defaultbutton="Button3">
Give the above a try - even with a update panel, and then a panel inside that update panel, the above should work.
So try the form level setting - that is the outer most form that wraps everything in that given page.
Edit: the whopper and Mount everest detail been noted that the page has a master, and thus of couse no form tag exists.
Thus, I suggest this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button2" >
your markup here
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
You can simply cuse jQuery to bind a function on KeyPress and check if it is the Enter key. If so then do something with it.
The return false is needed to prevent the form from doing a PostBack.
<asp:TextBox ID="TextBox1" runat="server" CssClass="CaptureEnter"></asp:TextBox>
<script>
$('.CaptureEnter').keypress(function (e) {
if (e.keyCode === 13) {
alert('Enter was pressed! Start searching for: ' + $(this).val());
return false;
}
});
</script>
Related
I am having a weird issue with a web form I'm working on that seems related to some async stuff going on. Basically, I need to do the following:
UserInputPanel.Visible = False
ProgressPanel.Visible = True
ResultsSet = New DataSet()
GetResults(ResultsSet)
FillOutput()
ProgressPanel.Visible = False
OutputPanel.Visible = True
This code all runs as the result of clicking a button on the WebForm. The call to GetResults(ResultsSet) is a lengthy one, thus the need to show the panel ProgressPanel. Problem is, the call to GetResults is happening before my ProgressPanel actually shows. If I comment out the call to GetResults and the lines that follow, then ProgressPanel shows up no problems. How can I force the first two lines to execute and show on the page before the call to GetResults happens?
It sounds like you need to use the UpdateProgress control instead of trying to trigger your own. When your form button is clicked, all the code on the server side click handler runs before any response is sent to the client.
You need something like this instead of your ProgressPanel:
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
</ProgressTemplate>
</asp:UpdateProgress>
The contents of the ProgressTemplate will automatically be displayed whent the asynchronous postback starts, and then will hide once it is complete.
To hide the UserInputPanel, create a javascript function like the following (use jQuery or some other client-side js framework for more robust cross browser code):
function hideUserInput() {
document.getElementById('<%=UserInputPanel.ClientID%>').style.visibility="hidden";
}
and attach this function to your button's OnClientClick property:
<asp:button id="YourButton"
text="Submit"
onclientclick="hideUserInput()"
runat="server" onclick="YourButton_Click" />
I have a page with different placeholders. In one of them, I have a link that I want to open a modal popup in a second placeholder (using the ajaxtoolkit ModalPopupExtender) :
<asp:Content ID="content1" ContentPlaceHolderID="placeholder1" Runat="Server">
<asp:LinkButton ID="link" runat="server" Text="Popup link" />
</asp:Content>
<asp:Content ID="content2" ContentPlaceHolderID="placeholder2" Runat="Server">
<asp:Panel ID="panel" runat="server" Text="Popup content" />
<ajaxToolkit:ModalPopupExtender ID="popup" runat="sever"
TargetControlID="link"
PopupControlID="panel"
/>
</asp:Content>
When doing as above, it fires me an exception, saying that popup cannot find link (which I understand, because they are in two different placeholders).
How can I make this work ? I can think of something find FindControl in the code behind, but I don't really like to use this function, as it is pretty computationally expensive (especially with my nested layout).
One issue is that your TargetControlID and PopupControlIDs are reversed. TargetControlID is the ID of the item that you want to 'Modal Pop', in your case that would be Panel1. The PopupControlID is the ID of the control that would trigger the ModalPopup, in your case that would be "Link"
But you still have a few options if that doesn't work, I have fired a modal located in a different update panel before using the method below. Though not the exact same issue, this workaround may help you (I am assuming you have a script manager on your page).
Create a hidden element in Content2 with ID="hiddenLink"
Set your ModalExtender PopupControlID="hiddenLink"
In the codeBehind for "link" in content1, add an onClick event with the following
ModalPopup1.show()
If you are using updatePanels, this will cause the ModalPopup to display in AJAX fashion without page refresh.But you would still get a full postback worht of data between the client and the server.
Method 2, you could use a javascript function to show to Modal as well. Add a behaviorID="MyModal1" (or whatever you want to call it) to your Modalpopup definition. Then change your link:
<asp:LinkButton ID="link" runat="server" Text="Popup link" OnClientClick="$get('MyModal1').show(); return false;"/>
Note: The return false in the above example prevents the .NET page from performing a postback.
I developed a user control that displays a list of products and it works pretty good. Then I dropped this user control into another user control that allows the user to pick different criteria and the product UC updates to show those products, all pretty slick and with AJAX via UpdatePanel.
All was working just fine... then another requirement came in. The "search" control needs to be separate from the product control (so they can be positioned separately). Initially, I thought this was no problem as I would give the search control a reference to the product control and then it would talk to it via reference instead of directly inside the control (which has been removed).
And they do talk. But the product control loads, but refuses to display.
I checked and it is being passed via reference and not a copy ( as best I can tell ).
There is an updatepanel in the search control. There is an update panel in the product control. And then for good measure, there is an update panel surrounding them both in the actual search aspx page.
I've tried setting the product control update panel to conditional and then fire the .Update() method manually.
What's the secret here?
TIA!
SOLVED
Thanks to Jamie Ide for the tip to use events.
Search Control and Product control still have internal update panels, and NO LONGER have them on this particular page.
Search Control now raises an event OnSearchResultsUpdated and exposes the found items in properties. The page subscribes to this event and takes the properties and passes them to the product control and triggers triggers a .Refresh() method on the product control which simply calls the .Update() on its internal updatepanel.
The Product control, FYI, accepts products in several different flavors. A list of distinct SKUs, a list of product ids, a named collection in our database and finally a given product category.
Our designers need to be able to create a new page, drop the control onto it and set some properties and voila! New site page. They don't want to require a programmer's involvement. So keeping the controls self contained is a requirement. Fortunately all the changes I made still work completely with the other uses of the product control.
THANKS AGAIN SO MUCH!
I don't think there's really enough information to work with here, but my best guess is that the Product control is not getting data bound. You may try calling myProdcutsCtrl.DataBind() from the search control (or something inside the Product control that cause a DataBind() for instance myProductCtrl.Search(value1, value2, value3).
One other thing you might try is removing the UpdatePanels and seeing if things work. Then add them back in once you get core functionality going.
UPDATE: I've gone ahead and put some example code that works here which I believe accomplishes what you want. What follows are snippets for the sake of saving space, but include all code necessary to make it run. Hopefully this will at least give you something for reference.
Things to try:
EnablePartialRendering="true|false" setting it to false will force the natural postbacks and is good for debugging UpdatePanel problems.
Make sure you are seeing Loading... come up on your screen. (maybe too fast depending on your dev computer)
Page.aspx
<%# Register Src="~/Product.ascx" TagPrefix="uc" TagName="Product" %>
<%# Register Src="~/Search.ascx" TagPrefix="uc" TagName="Search" %>
...
<asp:ScriptManager runat="server" ID="sm" EnablePartialRendering="true" />
Loaded <asp:Label ID="Label1" runat="server"><%= DateTime.Now %></asp:Label>
<asp:UpdateProgress runat="server" ID="progress" DynamicLayout="true">
<ProgressTemplate><b>Loading...</b></ProgressTemplate>
</asp:UpdateProgress>
<uc:Search runat="server" ID="search" ProdcutControlId="product" />
<uc:Product runat="server" ID="product" />
Search.ascx
<asp:UpdatePanel runat="server" ID="searchUpdate" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<p>
<asp:Label runat="server" AssociatedControlID="filter">Less than</asp:Label>
<asp:TextBox runat="server" ID="filter" MaxLength="3" />
<asp:Button runat="server" ID="search" Text="Search" OnClick="SearchClick" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
Search.ascx.cs
public string ProdcutControlId { get; set; }
protected void SearchClick(object sender, EventArgs e)
{
Product c = this.NamingContainer.FindControl(ProdcutControlId) as Product;
if (c != null)
{
c.Search(filter.Text);
}
}
Product.ascx
<asp:UpdatePanel runat="server" ID="productUpdate" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Label runat="server">Request at <%= DateTime.Now %></asp:Label>
<asp:ListView runat="server" ID="product">
<LayoutTemplate>
<ul>
<li id="itemPlaceHolder" runat="server" />
</ul></LayoutTemplate>
<ItemTemplate>
<li><%# Container.DataItem %></li></ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
Product.ascx.cs
IEnumerable<int> values = Enumerable.Range(0, 25);
public void Search(string val)
{
int limit;
if (int.TryParse(val, out limit))
product.DataSource = values.Where(i => i < limit);
else
product.DataSource = values;
product.DataBind();
productUpdate.Update();
}
Code does NOT represent best practices, just a simple example!
I'm fairly new to AJAX, but I don't think it's a good idea for user controls to have UpdatePanels. I would also advise you not to have the user controls reference each other; they should communicate through events and methods controlled by their container.
I do something similar with two user controls for a master-details display. The master raises an event when an item is selected from a list, the containing page handles the event and calls a method on the details display to display the selected item. If I remember correctly, my first attempt had UpdatePanels in the user controls and I wasn't able to make that work. Having the user controls inside an UpdatePanel on the page works fine.
If I understand you right you have a layout like this:
Outer UpdatePanel
SearchControl
Search UpdatePanel
ProductControl
Product UpdatePanel
Databound Control
Which one of those update panels is actually being called?
I assume that if you check the network traffic with something like Fiddler or Firebug if you're using Firefox, you aren't seeing any HTML for the product update panel coming back?
Have you tried doing something like:
UpdatePanel productUpdate =
Page.FindControl("Product UpdatePanel") as UpdatePanel;
if (null != productUpdate){
productUpdate.Update();
}
By default, if a postback is made from an UpdatePanel, only that control will be updated/re-rendered (this is called partial page-rendering).
To also update/re-render other UpdatePanels, you have to either:
set their UpdateMode property to Always
add the control that makes the postback to their Triggers collection
Check this page in MSDN for details.
I have several tabs that are loaded via ajax, and each one has a set of validators. I want to allow the user to change tabs only if the tab is valid
I thought setting a validationgroup to the validators and then check for the specific group like this, would work:
function validatePage(group) {
return Page_ClientValidate(group);
}
However, when I call the function, it always returns true. Can anyone see what I'm doing wrong?
I check it like this
alert(validatePage("presentaciones"));
And I have some validators:
// (...)
<asp:TextBox ValidationGroup="presentaciones" id="txtDescription" runat="server" Text='<%# Eval("Description") %>' MaxLength="50" />
<asp:RequiredFieldValidator ID="DescriptionRequiredFieldValidator" runat="server" ControlToValidate="txtDescription" SetFocusOnError="true" ValidationGroup="presentaciones" ErrorMessage="Debe ingresar una descripción" Display="Dynamic" />
// (...)
I have made groups work server-side with Page.Validate(group) but I wasn't aware this could be done client-side. Perhaps you need to implement a custom validation control that checks the status of each tab.
My guess is that the validation scripts are not being wired up. In your function do an alert((typeof(Page_Validators) == "undefined")) and see if it displays true. You said you are loading the tabs via ajax. You may want to see if placing a validator on the page somewhere will help wire up the validation scripts.
The other thing to watch for is Firefox and legacy rendering mode....client side just plain does not work in that scenario.
This can be done on the client side. Like this:
$('.buttonWithSameValidationGroup').bind('click', function () {
if (Page_ClientValidate($(this).attr('validationgroup'))) {
//do stuff
}
});
Sometimes you might need to add the following server side code in the Page Pre_Render method
button1.AddAttributes("validationgriup","group1");
I'm doing some straight up asynchronous calls from javascript using the XMLHTTPRequest object. On success, with certain return values, I would like to do an asynchonous post back on an update panel and run some server side methods. This is about how I'm implementing it now:
<script language="javascript">
function AjaxCallback_Success(objAjax) {
if (objAjax.responseText == "refresh") {
document.getElementById('<%= btnHidden.ClientID %>').click();
}
}
</script>
<asp:UpdatePanel ID="upStatus" runat="server">
<ContentTemplate>
<asp:Button ID="btnHidden" runat="server" style="display: none;" OnClick="SomeMethod" />
<asp:DropDownList ID="ddlStatus" field="Orders_Status" parent="Orders" runat="server">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
This has to do with work flow. If while you are working on an order, someone invoices it, then the options available in the status drop down actually changes. So a timed even checks for changes and if there is a change, which wouldn't normally happen, the update panel posts back and the drop down list gets re-bound to a new data table based on various return values from the ajax response text.
My original code is actually much more complicated than this, but I've abstracted just enough to make my concept clearer. Is there a better, cleaner way to do this by dropping the hidden button and making a straight javascript call that will cause an update panel to asynchonously postback and run a server side method?
Be very careful with UpdatePanels, they can be very heavy if not used properly as I explain here.
But the JavaScript for submitting a form is:
__doPostBack('eventTarget','eventArguments');
So in your example you'd have something like:
__doPostBack('<%= btnHidden.ClientID %>','');
You can remove the hidden button and call
__doPostBack('upStatus','');
This will cause an asynchronous update for that update panel