We Keep Coding

Asp.NET Update dropdownlist in a row [item] in listview without reloading the whole listview

I have a listView with two dropdownlists [ddls] in each item [row], when I select an option from the first dropdown list, the second ddl reloads different content.
I currently have the whole listview wrapped in an updatePanel. I tried putting the updatePanel for those two <td> [column], but it seems not compile that way, how can I achieve this using JS and JQuery?

Using an UpdatePanel for the second DropDownList and setting the first DropDownList as a trigger seems to work and does not refresh the whole page:
<asp:GridView ID="GridView1" runat="server" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddl2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The event handler for the first list would look like this:
protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList ddl1 = sender as DropDownList;
DropDownList ddl2 = ddl1.NamingContainer.FindControl("ddl2") as DropDownList;
// Modify the second DropDownList
...
}
UPDATE
If you prefer using a ListView instead of a GridView, you can obtain the equivalent result with this markup:
<asp:ListView ID="ListView1" runat="server" >
<LayoutTemplate>
<table>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" />
</td>
<td>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddl2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</ItemTemplate>
</asp:ListView>

Why LinkButton inside GridView which is present in Updatepanel not firing OnClientClick event?

I have placed my GridView inside the Updatepanel and there I have defined few columns with one LinkButton. But for that LinkButton OnClientClick event is not firing. Instead it's doing a postback.
Following is the Code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvUnmappedICD" runat="server" EmptyDataText="No Records are added yet."
OnRowCommand="gvUnmappedICD_RowCommand" OnRowDataBound="gvUnmappedICD_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="lnkRemove" runat="server" CommandArgument='<%#Eval("KEYWORD") %>' CommandName="remove" ClientIDMode="AutoID"
OnDataBinding="lnkRemove_DataBinding" OnClientClick='return confirm("Are you sure you want to Delete this?");' ToolTip="Click to Remove this record." Text="Remove" />
</ItemTemplate>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
This LinkButton with the ID lnkRemove should display a confirm message box when user clicks on it. But it's not showing it.I have tried registering the Asynchronous PostBack event to this from code behind as follows:
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(lbRemove);
Kindly anyone help me to resolve this.

Use a PostBackTrigger
<asp:ScriptManager ID="scriptManager" runat="server">
<asp:UpdatePanel ID="updatePanel" runat="server">
<asp:GridView ID="gvUnmappedICD" runat="server" EmptyDataText="No Records are added yet."
OnRowCommand="gvUnmappedICD_RowCommand" OnRowDataBound="gvUnmappedICD_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton ID="lnkRemove" runat="server" CommandArgument='<%#Eval("KEYWORD") %>' CommandName="remove" ClientIDMode="AutoID"
OnDataBinding="lnkRemove_DataBinding" OnClientClick='return confirm("Are you sure you want to Delete this?");' ToolTip="Click to Remove this record." Text="Remove" />
</ItemTemplate>
</Columns>
</asp:GridView>
<Triggers>
<asp:PostBackTrigger ControlID="lnkRemove" />
</Triggers>
</asp:UpdatePanel>

Please use this on link button's OnClientClick
OnClientClick='return confirm("Are you sure you want to Delete this?");return false;'

ItemCommand Event in inner updatepanel refreshes outer updatepanel content

I have 2 updatepanels in a webforms page with 2 nested Repeater controls. In the second (inner Repeater control) I have a LinkButton to do some events and calling the click event through the OnItemCommand method of the second Repeater.
This is my Example Asp.Net page
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
<asp:Repeater ID="Repeater2" runat="server" OnItemCommand="Repeater2_ItemCommand">
<ItemTemplate>
<asp:Label ID="lblInsertedDate" class="text-muted" runat="server" Text=' <%# string.Format("{0: hh:mm tt}", Eval("Date")) %>'></asp:Label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkFollow" runat="server" Text="Follow" CommandArgument='<%# Eval("BrokerId") %>' CommandName="Follow"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
When I click on the LinkButton, I can see the contents of the outer Repeater also gets XHRed when I inspect through browser's network Tab.
I don't want to update the contents of outer updatepanel when I click on the linkbutton inside. I want to change only text of the linkbutton with some server side function, so that the content download will be gets reduced.
Similar Question asked https://stackoverflow.com/questions/29543567/updatepanel-with-updatemode-conditional-and-childrenastriggers-false-refreshed-b with no answer for it.
I tried to set UpdateMode="Conditional" and ClientAsTriggers as false to both the inner and outer updatepanels. However it's not working. Using .net version 4.51. Any workaround for this?

OnSelectedIndexChanged causes a full page refresh/postback

If I leave the AutoPostBack property, it doesn't fire, if I have it in there, it refreshes the whole page. Code snippet is below:
<InsertItemTemplate>
<asp:DropDownList ID="ddClientName" runat="server" DataSourceID="dsClients" DataTextField="Client_Name" DataValueField="Client_Name" OnSelectedIndexChanged="ddClientName_SelectedIndexChanged"></asp:DropDownList>
<asp:TextBox ID="txtClientName" runat="server" Text='<%# Bind("Client_Name") %>' MaxLength="255"></asp:TextBox>
</InsertItemTemplate>

That's the expected behaviour. If you want to do a partial refresh wrap it in an UpdatePanel:
<asp:updatepanel id="UpdatePanel1" runat="server">
<contenttemplate>
<asp:DropDownList ID="ddClientName" runat="server" DataSourceID="dsClients" DataTextField="Client_Name" DataValueField="Client_Name" OnSelectedIndexChanged="ddClientName_SelectedIndexChanged"></asp:DropDownList>
</contenttemplate>
</asp:updatepanel>

Refresh an updatepanel on buttonclick from code-behind

I'm using a Gridview that is using datasource & databinding. When i reload the page the gridview is updated but I want it to be on the buttonclick, but it's not working for me.
The gridview inside the updatepanel:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upWall" runat="server" ChildrenAsTriggers="true" UpdateMode="conditional">
<ContentTemplate>
<asp:GridView ID="gvWallPosts" runat="server" AutoGenerateColumns = "false"
CaptionAlign="NotSet" CellPadding="5">
<Columns>
<asp:TemplateField HeaderText="Avsändare">
<ItemTemplate>
<%# GetSender((int)Eval("WallSender"))%>
<br />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Inlägg">
<ItemTemplate>
<%# Eval("Post")%>
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="txtWall" runat="server" Height="105px" TextMode="MultiLine" Width="227px"></asp:TextBox>
<br />
<asp:Button ID="btnWall" runat="server" Text="Posta" onclick="btnWall_Click" />
Code-behind:
protected void btnWall_Click(object sender, EventArgs e)
{
con.SendWallPost(con.GetId(Membership.GetUser().UserName), Convert.ToInt32(Request.QueryString["ID"]), txtWall.Text); //This method is sending the post
upWall.Update();
}
So, I want the updatepanel to be updated on the ButtonClick, I don't want to reload the whole page to see the result

Since i don't see the button btnWall, i assume that it's outside of the UpdatePanel.
But you need to define an explicit trigger if you want to allow a control outside of an UpdatePanel to trigger a postback.
Therefore you can use an AsyncPostBackTrigger:
<asp:UpdatePanel ID="upWall" runat="server" ChildrenAsTriggers="true" UpdateMode="conditional">
<ContentTemplate>
....
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnWall" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

By default, partial-page updates are enabled in an update panel because the default value of the EnablePartialRendering property of the ScriptManager control is true.Putting the button in the update panel is suffice to give you what you need since the button acts as an asynchronus postback control inside the panel.Then just add this line( gvWallospts.Databind()) after your update.Let me know how it goes.
protected void btnWall_Click(object sender, EventArgs e)
{
con.SendWallPost(con.GetId(Membership.GetUser().UserName), Convert.ToInt32(Request.QueryString["ID"]), txtWall.Text); //This method is sending the post
//upWall.Update();
gvWallPosts.DataBind();
}
Try setting up you markup like this
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upWall" runat="server" ChildrenAsTriggers="true" UpdateMode="conditional">
<ContentTemplate>
<asp:GridView ID="gvWallPosts" runat="server" AutoGenerateColumns = "false"
CaptionAlign="NotSet" CellPadding="5">
<Columns>
<asp:Templatefield>
<asp:Button ID="btnWall" runat="server" Text="Posta" command="Edit" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Avsändare">
<ItemTemplate>
<%# GetSender((int)Eval("WallSender"))%>
<br />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox Text='<%# Bind("WallSender")%>' />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Inlägg">
<ItemTemplate>
<%# Eval("Post")%>
<br />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox Text='<%# Bind("Post")%>'/>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
In your grid Row updating event
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
con.SendWallPost(con.GetId(Membership.GetUser().UserName), Convert.ToInt32(Request.QueryString["ID"]), txtWall.Text);
gvWallPosts.DataBind();
}
Make sure that also you Binding code in page load is sandwiched by this
If(!IsPostBack)
{
}

You should either put the button inside the update panel or define an explicit trigger to update the update panel on button click event as suggested by Tim Schmelter.