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>

ModalPopupExtender calling .Show() does not work

I am using Visual Studio 2010 and for database I am using Entity Framework 4.
In my page , I have 3 tabs and in Second tab I used Grid view for displaying the Details of Employee . In that Grid View there are 2 image button one for Delete another for Edit. I want to open a popup box whenever I will click Edit Image Button.
The problems are
1. Popup box is appear for a second only.
2. Able to retrieve the row index of the Grid view. But no value is pass into other text box, it showing null value i.e. name0.Text= ""
In my .aspx page I have the following
For Image Button
<asp:ImageButton ID="edit" runat="server" CommandArgument='<%# Bind("EmpID")%>' CommandName="edituser" ImageUrl="image/images.jpg" ToolTip="Edit User Details" OnClick="EditUser_Clicked"> </asp:ImageButton>
For ModalPopupExtender
<asp:ToolkitScriptManager ID="Toolkitmgr" runat="server"></asp:ToolkitScriptManager>
<asp:HiddenField ID="EmpID" runat="server"
onvaluechanged="EmpID_ValueChanged"/>
<asp:ModalPopupExtender ID="mpedit" DropShadow="true" BackgroundCssClass="modalBackground"
PopupControlID="pnedit" CancelControlID="btnCancel"
runat="server" TargetControlID="EmpID"></asp:ModalPopupExtender>
<asp:Panel runat="server" ID="pnedit" CssClass="modalPopup" Style="display: block;width:525px">
***Some Code***
</asp:Panel>
In the server side code for the EditUser_Clicked event I have the following:
protected void EditUser_Clicked(object sender, EventArgs e)
{
ImageButton btndetails = sender as ImageButton;
GridViewRow row = (GridViewRow)btndetails.NamingContainer;
lblId.Text = GridView1.DataKeys[row.RowIndex].Value.ToString();
name0.Text = row.Cells[1].Text;
desig0.Text = row.Cells[2].Text;
dob0.Text = row.Cells[3].Text;
email0.Text = row.Cells[4].Text;
country0.Text = row.Cells[5].Text;
city0.Text = row.Cells[6].Text;
add0.Text = row.Cells[7].Text;
hq0.Text = row.Cells[8].Text;
rbtnListGender0.Text = row.Cells[9].Text;
mobno0.Text = row.Cells[10].Text;
this.mpedit.Show();
}
The code runs without error but modal popup is not visible. Please help me to find my mistake.

There 3 ways You can use Modal Popup using Update Panel.Try any one of this.
Modal Popup with UpdatePanel inside PopupPanel
<div style="background-color: White">
<asp:Button runat="server" ID="button4" Text="Launch Modal Popup1" />
<asp:Panel runat="server" ID="modalPanel3" Style="display: none">
<asp:UpdatePanel runat="server" ID="updatePanel3">
<ContentTemplate>
<asp:Label runat="server" ID="label4" Text="Label in UpdatePanel"></asp:Label>
<asp:Button runat="server" ID="Button5" Text="Click to Cause postback" OnClick="Button5_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button runat="server" ID="Button6" Text="OK" />
<asp:LinkButton runat="server" ID="LinkButton1" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender3" TargetControlID="button4"
PopupControlID="modalPanel3" OkControlID="Button6" CancelControlID="LinkButton1"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</div>
2.Update Panel that contains a ModalPopup and its associated PopupPanel inside it
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Button runat="server" ID="button2" Text="Launch Modal Popup2" />
<asp:Panel runat="server" ID="modalPanel2" BackColor="AliceBlue" Style="display: none">
<asp:Label runat="server" ID="label5" Text="Label in UpdatePanel"></asp:Label>
<asp:Button runat="server" ID="postbackBtn" Text="Click to Cause postback" OnClick="postbackBtn_Click" /><br />
<asp:Button runat="server" ID="cancelBtn2" Text="OK" />
<asp:LinkButton runat="server" ID="okBtn2" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender2" TargetControlID="button2"
PopupControlID="modalPanel2" OkControlID="okBtn2" CancelControlID="cancelBtn2"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
3.Update Panel that contains a ModalPopup; its PopupPanel has an UpdatePanel inside it
<asp:UpdatePanel runat="server" ID="outerUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="outerPanelTrigger" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" ID="outerPanelTrigger" Text="OuterPanelTrigger" /><br />
<br />
<asp:Button runat="server" ID="button1" Text="Launch Modal Popup3" />
<asp:Panel runat="server" ID="modalPanel1" BackColor="Pink" Style="display: none">
<asp:UpdatePanel runat="server" ID="updatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="label1" Text="Label in UpdatePanel"></asp:Label>
<asp:Button runat="server" ID="updateLabel" OnClick="updateLabel_Click" Text="Click to Cause postback" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button runat="server" ID="okBtn" Text="OK" />
<asp:LinkButton runat="server" ID="cancelBtn" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="modalPopupExtender1" TargetControlID="button1"
PopupControlID="modalPanel1" OkControlID="okBtn" CancelControlID="cancelBtn"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>

Are you using the latest version of AjaxControlToolkit?
In v16.1 the following bugs were fixed:
Item 27971 - Modal Popup incorrect z-index in tab container and
update panel
Item 28021 - Multiple ModalPopupExtenders z-index
issue

Modal Popup control not firing orginal button click event

Maybe I am not understanding how this works completely but what I have is a gridview custom template with an imagebutton and a modalpopup. Below my page I have my popup panel which is hidden. When I click my image button the panel displays then I click the "btnModalCancelAll" and it starts to step through my method which sets a page variable from 0 to 1 but then the problem comes in it does not continue to the original gridview image click event not sure why. Below is my template field and the popup panel.
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png" OnClick="ImageButtonCancelResv_Click" />
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="ImageButtonCancelResv" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender>
<br />
<asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>
</ItemTemplate>
<asp:Panel ID="pnlModalPanel" CssClass="modalBackground" runat="server" Style="display:none">
<asp:UpdatePanel runat="server" ID="updatePanelPopUp">
<ContentTemplate>
<div id="modalWrap">
<asp:Label ID="lblAreyousure" runat="server" Text="Are you sure you want to do that?"></asp:Label>
<div id="divhr1" class="horizontalRule" runat="server"></div>
<div id="divCancelSummaryAll">
<asp:Label ID="lblEntireFamily" runat="server" Text="Cancel all family reservations from this event date."></asp:Label><br />
<asp:Label ID="lblSummaryDeleteAll" runat="server" Text=""></asp:Label><br />
<asp:Button ID="btnModalDeleteAll" runat="server" CssClass="modalButton" Text="Cancel all Family" OnClick="btnModalDeleteAll_Click" />
</div>
<div id="divCancelSummaryOne">
<asp:Label ID="Label2" runat="server" Text="Cancel selected child reservation from this event date."></asp:Label><br />
<asp:Label ID="lblSummaryDeleteOne" runat="server" Text=""></asp:Label><br />
<asp:Button ID="btnModalDeleteOne" runat="server" CssClass="modalButton" Text="Cancel this Child" OnClick="btnModalDeleteOne_Click" />
</div>
<br />
<asp:Button ID="btnModalCancel" runat="server" Text="Cancel" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

I suggest you create another button and use it as the TargetControlID for the modal popup.
you can hide this button by setting its display to 'none'. This will only be a dummy button so that your code compiles.
Now when you click the button "ImageButtonCancelResv" it will run your code which is in the method OnClick="ImageButtonCancelResv_Click"
and at the end of this method you can add a command to show the popup:
mpe.Show();
Example Code:
protected void ImageButtonCancelResv_Click(object sender, EventArgs e)
{
//Do something here when button is clicked
mpe.Show();
}
And then
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButtonCancelResv" runat="server" Width="20" Height="20px" ImageUrl="~/Images/Delete.png" OnClick="ImageButtonCancelResv_Click" />
<div style="display: none">
<asp:Button ID="btnModalStatusHidden" runat="server" />
</div>
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnModalStatusHidden" PopupControlID="pnlModalPanel" CancelControlID="btnModalCancel"></asp:ModalPopupExtender>
<br />
<asp:Label ID="Label1" runat="server" Text="Cancel"></asp:Label>
</ItemTemplate>

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.

UpdatePanel stops CommandArgument from Updating

I have a button nested inside an update panel which has a CommandArgument tied to it. This calls a method which updates some label and text in an area not contained in the UpdatePanel. If I comment out the update panel the button works correctly so I know it is coming from the update panel. Anyone know how I can pass this through?
protected void Button_Command(object sender,
System.Web.UI.WebControls.CommandEventArgs e)
{
//update textboxes and labels here
}
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:DataList ID="dListItems" runat="server" DataKeyField="PRODUCT_ID" RepeatColumns="4"
RepeatDirection="Horizontal" ShowFooter="False" ShowHeader="False" CellPadding="4">
<HeaderTemplate>
No Record Found....!
</HeaderTemplate>
<ItemTemplate>
<asp:Button ID="Button" runat="server" Text="Add to Cart"
CommandArgument='<%# Eval("Id") %>' CausesValidation="False"
CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
OnCommand="Button_Command"
/></span></span></p>
</ItemTemplate>
</asp:DataList>
</div>
</td>
</tr>
</table>
</div>
</ContentTemplate>

which updates some label and text in an area not contained in the
UpdatePanel
That's the problem. UpdatePanel will only update what is within and not what is outside. Try to put those control also the UpdatePanel and see them worked