We Keep Coding

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

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;'

ASP.NET PostBack is not hitting the correct method

Consider the following ASP.NET code:
<asp:UpdatePanel runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:MultiView runat="server" ID="MultiView" ActiveViewIndex="0">
<asp:View runat="server">
</asp:View>
<asp:View runat="server">
<p><img alt="Loading..." src="/global/images/ajax-mini-loader.gif" style="vertical-align: middle;" /> Loading...</p>
</asp:View>
<asp:View runat="server">
<asp:GridView runat="server" ID="WarrantyView" OnDataBound="WarrantyView_DataBound" AutoGenerateColumns="false" ItemType="WarrantySystem.Data.ServiceCompany">
<Columns>
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField HeaderText="Telephone" DataField="Telephone" />
<asp:BoundField HeaderText="Email" DataField="Email" />
<asp:BoundField HeaderText="Telephone 24/7" DataField="Telephone247" />
<asp:BoundField HeaderText="Email 24/7" DataField="Email247" />
<asp:TemplateField HeaderText="Actions">
<ItemTemplate>
<asp:Button runat="server" ID="btnEdit" CommandName="Edit" CommandArgument="<%# Item.ID %>" Text="Edit" />
<asp:Button runat="server" ID="btnDelete" CommandName="Delete" CommandArgument="<%# Item.ID %>" Text="Delete" OnCommand="btnDelete_Command"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:View>
<asp:View runat="server">
<p>Your data could no be loaded at this time.</p>
</asp:View>
</asp:MultiView>
<asp:Timer runat="server" ID="tmrLoadData" Enabled="true" Interval="1" OnTick="tmrLoadData_Tick" />
</ContentTemplate>
</asp:UpdatePanel>
When btnDelete is clicked, a postback event occurs to Page_Load, and never hits btnDelete_Command, as it should. I'm lost as to why!
EDIT: The same problem occurs with the edit button...Okay so in the example, there is no OnClick or OnCommand event, but I have just tested this...it does the same thing.
How it works:
The page loads and shows an empty view.
The timer ticks and begins loading data, and shows the data loading view.
Once the data loads, the data view shows.
When clicking edit, the page should redorect to the edit page.
When clicking delete, the page should just delete the entry.
EDIT: As per user comments (server-side code command code):
protected void btnDelete_Command(object sender, CommandEventArgs e)
{
bool result = this.mgr.DeleteServiceCompany(Int32.Parse(e.CommandArgument.ToString()));
}
protected void btnEdit_Command(object sender, CommandEventArgs e)
{
Response.Redirect("ServiceCompany.aspx?id=" + e.CommandArgument.ToString());
}

Use the RowCommand event of GridView to fire your Edit and Delete command.
Add this inside your GridView markup.
OnRowCommand="WarrantyView_RowCommand"
Also change the CommandName text
CommandName="Modify" // change the name here
CommandName="Remove" // change the name here
And inside the event
protected void WarrantyView_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Modify")
{
// your edit logic
}
if (e.CommandName == "Remove")
{
// your delete logic
}
}
I did recommend you to change the name of the CommandName property.
Change Edit to perhaps Modify
Change Delete to perhaps Remove
Reason being they are inbuilt gridview commands
NOTE: Ensure that your ViewState is enabled in all relevant places too. This will not work with ViewState disabled.

ModalPopupExtender closes when UpdatePanel inside is updated

I have a ModalPopupExtender with an UpdatePanel inside. The UpdatePanel has a Repeater with a list of LinkButtons.
<asp:Button ID="btnShow" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnShow" PopupControlID="pnl" CancelControlID="btnCancel" />
<asp:Panel ID="pnl" runat="server">
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rep" runat="server" onitemcommand="rep_ItemCommand">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:Label ID="lblAssignedTo" runat="server" Text='<%# Eval("AssignedTo") %>' />
<asp:LinkButton ID="lnkUnassign" runat="server" CommandName="Unassign" CommandArgument='<%# Eval("Id") %>' />
<ajaxToolkit:ConfirmButtonExtender ID="cbeUnassign" runat="server" TargetControlID="lnkUnassign" ConfirmText="Are you sure you want to unassign this item?" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
protected void rep_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Unassign")
{
//do something
up.Update();
}
}
When I click on a LinkButton, the UpdatePanel should update. It does this but it closes the ModalPopupExtender also.
Is there any way to update the UpdatePanel without hiding the ModalPopupExtender? I can just call ModalPopupExtender.Show(), but the page flickers.
Thanks.

Okay, just found out that there's something wrong with LinkButtons inside Repeaters. Used a Button control instead.

Updatepanel inside usercontrol ascx file not updating gridview

I'm trying to be slick and I'm putting this user control in a div that covers the whole page.
However when I click on the search button I get a full postback.
Any ideas on how to get it to not postback and just update the gridview?
And just to be clear. The following control is in a ascx file. Which is called in a aspx page.
<%# Control Language="C#" AutoEventWireup="true" CodeFile="PropertyViewAddEntity.ascx.cs"
Inherits="UserControls_PropertyViewAddEntity" %>
<p>Search for State City County zip</p>
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button2ae">
<p>
<asp:TextBox ID="TextBox1ae" runat="server" Width="500px"></asp:TextBox>
<asp:Button ID="Button2ae" runat="server" Text="Search" CausesValidation="false" />
</p>
</asp:Panel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView2ae" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource3ae"
OnSelectedIndexChanged="GridView2ae_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="zipcodeid" HeaderText="zipcodeid" SortExpression="zipcodeid" />
<asp:BoundField DataField="zip_code" HeaderText="zip_code" SortExpression="zip_code" />
<asp:BoundField DataField="state" HeaderText="state" SortExpression="state" />
<asp:BoundField DataField="city_alias_name" HeaderText="city_alias_name" SortExpression="city_alias_name" />
<asp:BoundField DataField="county_name" HeaderText="county_name" SortExpression="county_name" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2ae" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
btw the control is in a placeholder
<asp:PlaceHolder ID="ControlContainer" runat="server"/>
and called from the code behind.
Control mycontrol = LoadControl("~/UserControls/PropertyViewAddEntity.ascx");
ControlContainer.Controls.Add(mycontrol);

I have finally figured out the issue.
In order for things to work properly adding the user control via codebehind will not work!
To get things working properly you must declare the usercontrol on the page so that you can access the UpdateMode="Conditional" property of the usercontrol.
<%# Register TagPrefix="my" TagName="AddEntity" Src="~/UserControls/PropertyViewAddEntity.ascx" %>
<my:AddEntity Visible="false" ID="test1" runat="server" ClientIDMode="Inherit" UpdateMode="Conditional" />
I set the Visible property of the control to false so that I can show it via button click.
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
And in the code behind I did this.
protected void Button1_Click(object sender, EventArgs e)
{
test1.Visible = true;
}
Once the updatemode is set. Everything works as it should.