AJAX Update Panel - Action button click on drop down selection - c#

Evening all
I have the following scenarion. I have a range of drop down menus where a clietn can select. The code below is wrapped in an update panel but without this, the button click fires a method to retrieve the number of products. So for example, an item is selected from ddlCategory, the btnValidate is clicked and the label returns the number of products within that category.
I have the following code for an update panel - I'm just not sure how to implement if effectively.
<asp:UpdatePanel ID="UpdatePanel1" runat="Server">
<ContentTemplate>
<asp:Label ID="lblSearchResultsStatus" runat="server" Text="Number of results found: "></asp:Label>
<asp:Label ID="lblSearchResults1" runat="server" Text=""></asp:Label>
<br />
<br />
<asp:Button ID="btnValidate" runat="server" Text="Validate Search"
OnClick="btnValidate_Click" Width="120px" />
</ContentTemplate>
</asp:UpdatePanel>
How do I go about wiring the update panel so that when a drop down list item is selected, the buttong is effectively clicked?
Do I have to implement something on each of the ddlSelectedIndexChanged event or is there a property within the update panel that does?
Apologies for the noob question.

The point of the UpdatePanel is to update a portion of the page with an AsyncPostBack instead of reloading the whole page, but in order for the drop-down lists to trigger an AsyncPostBack automatically, they must be on an UpdatePanel. In order to update the labels, they must be on the same UpdatePanel with the labels.
A common pattern to implement what you want to accomplish:
Put the DDLs on the UpdatePanel, and set AutoPostBack="true" on each DDL, so they trigger AsyncPostBacks.
Add an event handler for SelectedIndexChanged on each DDL (can be the same event handler).
Move whatever you do in btnValidate_Click to another method.
Call the new method from btnValidate_Click and the SelectedIndexChanged event handler(s) so they all perform the same function.

You can call your btnValidate_Click event from codebehind at any point, i.e. Page_Load
protected void Page_Load(object sender, EventArgs e)
{
btnValidate_Click(btnValidate, new EventArgs());
}

Related

Repeater ItemCommand does not fire when clicking a button inside composite control

I have a Repeater containing nested custom CompositeControl controls in the following way:
Wrapper
Head
Body
<asp:UpdatePanel ID="noteArea" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server" >
<ContentTemplate>
<asp:Repeater ID="noteRepeater" runat="server" EnableViewState="true" OnItemDataBound="noteRepeater_ItemDataBound" OnItemCommand="noteRepeater_ItemCommand">
<ItemTemplate>
<asp:Button runat="server" CommandName="edit" ID="testButton" />
<easit:NoteControl ID="noteControl" runat="server" />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
Head control contains two Buttons. When I click on either of them, the ItemCommand event of Repeater doesn't get invoked. If I move the buttons right to ItemTemplate, it works. But I need to keep them where they are.
What is the correct way to bubble them up the control hierarchy?
You can have the control throw an event which your page (with the repeater) can listen for. Any information you need for the event can be provided when initializing each control.
These controls are outside the ItemTemplate .. so they really can't trigger an ItemCommand.
An ItemCommand has specific attributes that will not be available to your buttons if they are outside the ItemTemplate (ItemIndex for instance, to determine the index of the clicked item)

ASP:Dropdownlist OnSelectedIndexChanged Event Not Firing

I have a non-databound Dropdownlist inside of an UpdatePanel:
<asp:UpdatePanel runat="server" ID="FiltersUpdPnl">
<ContentTemplate>
<div class="filters">
<asp:Button runat="server" ID="ExportBtn" Text="Export Map to Image" />
<br />
Show:
<asp:DropDownList runat="server" ID="CapNumProjectsDDL" AutoPostBack="true" OnSelectedIndexChanged="ApplyFilters" OnPreRender="CapNumProjectsDDL_PreRender">
<%--<asp:ListItem Value="0" Text="" Selected="True"></asp:ListItem>--%>
<asp:ListItem Value="1" Text="Capacity"></asp:ListItem>
<asp:ListItem Value="2" Text="Number of Projects"></asp:ListItem>
</asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The event handler isn't terribly important, it just does stuff:
protected void ApplyFilters(object sender, EventArgs e)
{
//Do Stuff relating to the selected Value
}
When the page loads, "Capacity" is selected by default, as it's the first ListItem. When I switch off to "Number of Projects", the event handler fires as expected, executing the code. But when I switch back to "Capacity", the handler does NOT fire. The Postback is occurring, but I want it to specifically hit the event handler on both listitems.
You can see that I have a commented-out "0-value" ListItem in there. When I uncomment that, both "Capacity" and "Number of Projects" will hit the event handler as expected.
The issue is that when the page loads, it's loading the data relevant to the "Capacity" dropdown, so I want the "Capacity" ListItem to be showing, but be able to fire the event handler when selected.
Am I missing something obvious here?
E: I tried adding a handler for the DDL_Prerender event, setting the SelectedIndex to like 200 or something clearly not in the list, hoping it would de-select "Capacity", but that didn't work either.
This is the Pre-render code:
protected void CapNumProjectsDDL_PreRender(object sender, EventArgs e)
{
CapNumProjectsDDL.SelectedIndex = 200;
}
This didn't change the way it worked.
It seems that you want that drop down element raise change even if you select in drop down box already selected item. I believe that this will not work, and the cause of the problem is not in server side asp.net dropdownlist control, but in how HTML select element is working to which DropDownList control is rendered.
The problem is that HTML select element doesn't fire change event if user select the same item as was before drop box was shown (because from the point of view of control state - it was not changed).
So, I believe that the behavior that you want can be implement, but you should not use HTML select control and instead of it implement custom solution.

How can I trigger UpdatePanel from Event within a dynamically loaded UserControl?

I am writing a card game app using Ajax, c# and .NET 3.5. Due to the nature of the interface I have numerous update panels that Im trying to manage and update across various user action. I'm having problems with one though.
The players current hand is built by binding a list of Card objects to a repeater and then dynamically creating a Card UserControl and adding it to the Controls of a PlaceHolder when each item is databound. The code is roughly as follows:
On the page
<asp:UpdatePanel ID="pnlInHand" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptInHand" runat="server" onitemdatabound="rptInHand_ItemDataBound">
<ItemTemplate>
<asp:PlaceHolder ID="plcInHandCard" runat="server" />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
In code behind
protected void rptInHand_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
Card card = (Card)e.Item.DataItem;
PlaceHolder plcCard = (PlaceHolder)e.Item.FindControl("plcInHandCard");
plcCard.Controls.Add(CreateCardControl());
}
private CardControl CreateCardControl()
{
CardControl cardControl = (CardControl)Page.LoadControl("~/UserControls/CardControl.ascx");
//Set control properties here
return cardControl;
}
The Card Control includes a Button. The ClickEvent for this button calls a Method of the Parent Page that needs to update a seperate UpdatePanel as well as remove the card Control from the Panel that it is sitting within.
I have two issues.
When I click the Card Control Button, because it has been created as part of a repeater within an updatePanel, it no longer exists when the page is posted back and so the Click event for the button within the control never fires. I can obviously rebind the repeater on page load, but does this mean I have to essentially do this on every postback?
More importantly I need a way to trigger the update of another updatepanel in the parent page when the Card control's click event is raised. Is there a way of setting a trigger on an update panel that listens out for an event within a dynamicaly loaded UserControl?
Many thanks
Stewart
Sample code from ASP.net site that should address your point 2 problem follows.
I'll leave the translation to your code to you.
I may be misunderstanding what you are trying to do but I believe once you get this working your issue with point 2 is no longer relevant as you'll get the AJAX postback you want from your parent update panel.
Good luck!
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="itemDataBound">
<ItemTemplate>
<mycontrol:user ID="user1" runat="server" OnCausePostBack="user1_CausePostBack" /> <br />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
protected void itemDataBound(object sender, RepeaterItemEventArgs e)
{
ModalPopup_WebUserControl mw=(ModalPopup_WebUserControl)e.Item.FindControl("user1");
AsyncPostBackTrigger at = new AsyncPostBackTrigger();
at.ControlID = mw.ID;
at.EventName = "CausePostBack";
UpdatePanel2.Triggers.Add(at);
}
protected void user1_CausePostBack(object sender, EventArgs e)
{
// do something
}
just an idea for point 2 : what about add a property in the cardControl to set a reference to the updatepanel/s ? from there you can add triggers or call panel.update in the button event
for point one yes u will have to do it. u will have to re create the controls
for point 2 a simple updatePanel.update() would do the job insode of any event if you are using an event that was binded to a dynamically created control then u will have to rebind the event on every page postback

Bring up input form on same page with dropdownlist?

I'm brand new at this, using vs2010 with asp.net and c#, and I'm trying to use a button click event to display forms on my "Add Product" page (the forms will be textbox/label based for inputting data), using items from a dropdownlist of products. Which methods are available/is there a 'best practice' for this sort of thing? I've been fooling around with an if (Dropdownlist.SelectedIndexChanged) statement, but I'm not quite clear on why the syntax requires the SelectedIndexChanged method to preclude a += or -=. Thoughts?
The SelectedIndexChanged method has the += because you are adding an event handler to a specific elements event. Is the button you click on the Add Product page? If so for the OnClick event you could just set your form details based on the DropDownList SelectedItem or SelectedIndex. You may also need to wrap that panel in an UpdatePanel so that it can update visibility without reloading the whole page.
<asp:UpdatePanel ID="updateFormPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblName" runat="server" Text="" />
<asp:TextBox ID="txtDetails" runat="server" Text="" />
//More TextBox's or whatever you want
</ContentTemplate>
</asp:UpdatePanel?
<asp:DropDownList ID="ddlProductCategory" runat="server" />
<asp:Button ID="btnAddProduct" runat="server" OnClick="AddProduct_Click" Text="Add Product" />
//Code File Behind
protected void AddProduct_Click(Object sender, EventArgs e)
{
lblName.Text = ddlProductCategory.SelectedItem.Text;
txtDetails.Text = ddlProductCategory.SelectedItem.Value;
}

How Do I Get a Dynamic Control's Value after Postback?

I have a listview that adds controls in the ItemDataBound Event. When the postback occurs, I cannot find the new controls. After a bit of research, I found that ASP .NET needs these controls created every time, even after postback. From there I moved the function to bind the ListView outside of the if (!Page.IsPostBack) conditional. Now I get the dynamic controls values but the static controls I have are set to their defaults. Here is a sample of what I am trying to accomplish:
For brevity, I left some obvious things out of this example.
<asp:ListView runat="server" ID="MyList" OnItemDataBound="MyList_ItemDataBound">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</LayoutTemplate>
<ItemTemplate>
<asp:PlaceHolder runat="server" ID="ProductPlaceHolder">
<asp:TextBox runat="server" ID="StaticField" Text="DefaultText" />
<asp:PlaceHolder ID="DynamicItems" runat="server" />
</asp:PlaceHolder>
</ItemTemplate>
</asp:ListView>
and here is the codebehind:
protected void MyList_ItemDataBound(object sender, System.Web.UI.WebControls.ListViewItemEventArgs e) {
PlaceHolder DynamicItems = (PlaceHolder)e.Item.FindControl("DynamicItems");
DynamicItems.Controls.Add(textbox);
}
So, like I said, if I only databind when Page != PostBack then I cant find my dynamic controls on postback. If I bind every time the page loads then my static fields get set to their default text.
Try moving the data binding of the ListView into the OnInit() event.
Very similar question (instead of populating a ListView the guy is generating a set of buttons). Briefly, you'll find that you have to store the items in the list in your Viestate - than fish it out on Postback and re-populate the list.
Note that this solutions implies dropping data-binding (which you might not wanna do for others reasons).
Hope it helps.

Categories