ModalPopupExtender is used to open a pop-up or to open a separate ASP.NET page as a pop-up
Introduction
ModalPopupExtender is used to open a pop-up or to open a separate ASP.NET page as a pop-up.
In this example , we will know displaying individual user details using ModalPopupExtender
If you want to use ModalPopupExtender, your website should have ajax controls enabled
Add the below code to register the Ajax control assembly (make sure the that AjaxControlToolkit.dll file exists in your website
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"
tagprefix="cc1"
%>
Please place the
script manager tag in your form where you are going to use ModalPopupExtender
<asp:ScriptManager ID="ScriptManager1"
runat="server"> </asp:ScriptManager>
Using the code
Now place the
following code
<cc1:ModalPopupExtender id="viewProfile"
runat="server" Enabled="true"
TargetControlID="PopUpSpan"
PopupControlID="divViewPro"
DropShadow="false" Drag="True" Animations="" CancelControlID="viewProClose" BackgroundCssClass="d-overlay2"/>
Place
the below HTML code to display user in
grid
<asp:GridView runat="server"
ID="grdPublicDir"
AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
CssClass ="listing-table"
Width="100%"
GridLines="None"EmptyDataText="No
Records Found"onrowcommand="grdPublicDir_RowCommand"
> <RowStyle/><EmptyDataRowStyle
Font-Bold="True"
ForeColor="Red"
HorizontalAlign="Center"
/>
<Columns>
<asp:TemplateField HeaderText="">
<ItemTemplate
<asp:Image ID="imgProfile"
ImageUrl=”images/no-image.jpeg” Width="45px"
Height="45px"
runat="server"
/>
</ItemTemplate>
<ItemStyle Width="7%"/>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name"
SortExpression="LastName">
<ItemTemplate>
<asp:LinkButton ID="lblLname"
runat="server"
CommandName="ViewProfile"
CommandArgument='<%#
Eval("id") %>' Text='<%# Eval("FullName")' Font-Bold="True" CssClass="pink f-size14"></asp:LinkButton> <br /><asp:LinkButton ID="lbtnView"
CommandArgument='<%#
Eval("id") %>' CommandName="ViewProfile" runat="server">View Profile</asp:LinkButton>
</ItemTemplate>
<ItemStyle Width="20%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="City"
SortExpression="City">
<ItemTemplate>
<asp:Label ID="lblCity"
runat="server"
Text='<%# Eval("City")%>'> <asp:Label> </ItemTemplate> <ItemStyle Width="16%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="State" SortExpression="State" >
<ItemTemplate>
<%# Convert.ToInt32(Eval("State")) == 0 ? "" : Eval("StateName")%>
</ItemTemplate> <ItemStyle Width="14%"/> </asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate
> <asp:Label Text="Zip" runat="server"
CssClass="pink"></asp:Label> </HeaderTemplate>
<ItemTemplate> <%# Convert.ToString(Eval("Zipcode")) == ""
? "Not Specified" : Eval("Zipcode")%>
</ItemTemplate>
<ItemStyle Width="12%"/>
</asp:TemplateField>
<asp:TemplateField >
<HeaderTemplate
>
<asp:Label ID="Label1" Text="Phone"
runat="server"
CssClass="pink"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<%# Convert.ToString(Eval("Phoneno"))
== "" ? "Not
Specified" : Eval("Phoneno")%>
</ItemTemplate>
<ItemStyle Width="12%"/>
</asp:TemplateField>
</Columns><PagerStyle HorizontalAlign="Right"
/>
</asp:GridView>
HTMl code for display popup:
<div id="divViewPro" runat="server" class="ModalWindow" style="display:none;" ><span id="PopUpSpan"
runat="server"
style="display:none;"></span>
<div class="popUpclose"><a runat="server" id="viewProClose"> <img src="images/zoom/closebox.png"
/> </a></div>
//Table with your
controls to display user details
</div>
Server Side Code:
Call the below function (not exactly ) to fill the grid control
protected void
GetUsers () {
DataTable
dt;
dt = Users.getUsers
(1);
DataView
dv = dt.DefaultView;
grdPublicDir.DataSource = dv;
grdPublicDir.DataBind();
}
Below function(not exactly)executes
when user hits view profile link
protected void grdPublicDir_RowCommand(object
sender, GridViewCommandEventArgs e) {
if
(e.CommandName == "ViewProfile") {
ProfileInfo(Convert.ToInt32(e.CommandArgument.ToString()));
viewProfile.Show();
}
}
protected void ProfileInfo(int
proID) {
try {
DataTable
dt = Validateuser.getprofile(proID);
if
(dt.Rows.Count > 0) {
//Code to assign values to controls
}
}
catch (Exception ex) {
}
}
Conclusion:
If we want to implement
ModalPopupExtender we need to know it’s properties
ModalPopupExtender
Control Properties:
- TargetControlID
- The ID of the element that activates the modal popup
- PopupControlID
- The ID of the element to display as a modal popup
- BackgroundCssClass
- The CSS class to apply to the background when the modal popup is
displayed
- DropShadow
- True to automatically add a drop-shadow to the modal popup
- OkControlID
- The ID of the element that dismisses the modal popup
- OnOkScript
- Script to run when the modal popup is dismissed with the OkControlID
- CancelControlID
- The ID of the element that cancels the modal popup
- OnCancelScript
- Script to run when the modal popup is dismissed with the CancelControlID
- PopupDragHandleControlID - The ID of the embedded element that contains the
popup header/title which will be used as a drag handle
- X -
The X coordinate of the top/left corner of the modal popup (the popup will
be centered horizontally if not specified)
- Y -
The Y coordinate of the top/left corner of the modal popup (the popup will
be centered vertically if not specified)
- RepositionMode
- The setting that determines if the popup needs to be repositioned when
the window is resized or scrolled.
Reference
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/modalpopup/modalpopup.aspx