Model dialog boxes are very common these days not only in Windows applications but also in web applications. They allow web developers to open new popup windows on the same page without creating a new web page. These popup windows typically ask user some input and temporarily disable the page unless the user dismisses the dialog box. ASP.NET developers can use ModelPopupExtender control available in ASP.NET AJAX controls toolkit to implement model dialog behavior in their web applications. In this tutorial, I will show you how you can use ModelPopupExtender control with client side behavior so that when user performs any action in the dialog box such as button click there is no post back to the server.
Create a new web site in Visual Studio and open the page in which you want to use ModelPopupExtender control. The first thing you need to add is a CSS class which I will attach with ModelPopupExtender control to make page background transparent and little darker when the ModelPopupExtender control will appear on screen. So add this CSS in your page header tag.
var language = "";
language = value;
$get("Label1").innerHTML = language;
Next, we are moving to our page and you need to add ScriptManager control first which is required to use any ASP.NET AJAX related feature on the page. <asp:ScriptManager ID="ScriptManager1" runat="server" />
Next add a button and a label control on the page. The button will ask user to participate in a quick poll which will be shown in model dialog box and when user will submit the poll by clicking the submit button inside model dialog I will show the results on the label control. <asp:Button ID="Button1" runat="server" Text="Quick Poll" />
<asp:Label ID="Label1" runat="server"></asp:Label>
Next you need to add a Panel control which will be used as a popup window by the ModelPopupExtender control. <asp:Panel ID="Panel1" runat="server" BackColor="#ffffff"
BorderColor="#dadada" BorderStyle="Solid" BorderWidth="4px"
Height="190px" Width="350px" Font-Names="Arial" Font-Size="10pt">
<table cellpadding="10" cellspacing="0" style="width: 100%">
What is your Favorite Programming Language?
<input name="rdLanguage" type="radio" value="Java"
<input name="rdLanguage" type="radio" value="VB.NET"
<input name="rdLanguage" type="radio" value="C#"
<asp:Button ID="Button2" runat="server" Text="Submit" />
<asp:Button ID="Button3" runat="server" Text="Cancel" />
Finally, you need to add the ModelPopupExtender control available in ASP.NET AJAX controls toolkit as follows: <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
The following section explains all the ModelPopupExtender properties in detail:
TargetControlID: This property needs the id of the target control that will activate the model popup dialog box. I have given the id of the first button control “Button1”.
PopupControlID: This property needs the id of the control you want to use as a popup window. I have given the reference of the Panel control which ModelPopupExtender will display on screen.
DropShadow: A Boolean property to add drop shadow to the popup window. I set it to true and you can see a black shadow with popup window in the figure above.
OkControlID: This property needs the id of the control which will dismiss the model popup dialog box. I have given the reference of Submit Button here because I want the model popup to disappear automatically on Submit button click.
CancelControlID: This property needs the id of the control that will cancel or dismiss the popup dialog box.
BackgroundCssClass: This property needs the name of the CSS class to apply to the page background when the modal popup is displayed. I have given the name of the CSS class we defined in the start.
PopupDragHandleControlID: This property needs the ID of the control which will be used to drag the popup dialog box on screen. Normally, this control is available at the top of the popup window and acts as a title bar for dragging operation. I have not used this property in this tutorial but you can provide dragging feature by setting this property in your applications.
X: This property can be used to position the model dialog box on screen horizontally by setting the X coordinate of the top/left corner of the modal popup. If you will skip this property the model dialog box will appear centered horizontally.
Y: This property can be used to position the model dialog box on screen vertically by setting the Y coordinate of the top/left corner of the modal popup. If you will skip this property the model dialog box will appear centered vertically.
RepositionMode: This property determines whether the popup needs to be repositioned when the window is resized or the page is scrolled by the user.