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>