1. Precondition
- Visual Studio 2015
- MS .Net Framework, IIS
- **Ajax Control Toolkit **
- Tip: If you don't have the ajax toolkit it can be installed with Nuget.
2. Steps of A Simple Demo
- Create a new asp.net website project.
- Add
AjaxControlToolkitwithNugetlike this:
AjaxControlToolkit - Check the
Web.configfile, inside the<pages>tag of the<system.web>tag:
<controls>
<add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
</controls>
- Create a
web formwith an HTML<table>with some static values and an OK and Cancelbutton. Place these controls (not the link button) inside aPanelcontrol.
And it’s mandatory to register the assemblyAJAXControlToolKit.dll. So the following code has to be placed after thepagedirective of the web form:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
- If the
ScriptManagertag is not present in this form, then it should be specified inside the Form tag:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
- Design the page like this (Only related to the popup page, using some bootstrap css class):
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Label ID="lblHidden" runat="server" Text=""></asp:Label>
<ajaxToolkit:ModalPopupExtender ID="mdlpopChooseFile" runat="server" TargetControlID="lblHidden"
PopupControlID="divPopUp" BackgroundCssClass="ModalPopupBG">
</ajaxToolkit:ModalPopupExtender>
<div id="divPopUp" class="pnlBackGround" style="border-radius:4px;">
<div class="panel panel-default" runat="server">
<div class="panel-heading">
<h3 class="panel-title" style="font-weight: bold; font-size:20px"> EDIT APP FILE
<a href="IOSAppListPage.aspx" class="panel-right" style="margin-top: -0.2em;
padding: 0.3em; font-size: 0.9em; font-weight:normal;
float: right; color:dimgrey; text-decoration: none;">x</a>
</h3>
</div>
<div class="panel-body">
<h5>Which file do you want to edit?</h5>
<asp:RadioButtonList ID="radiobtnlistChooseFile" runat="server">
<asp:ListItem Value=".plist"> .plist file</asp:ListItem>
<asp:ListItem Value=".ipa"> .ipa file</asp:ListItem>
<asp:ListItem Value=".html"> .html file</asp:ListItem>
</asp:RadioButtonList><br /><br />
<asp:Button ID="btnContinue" runat="server" Text="Continue" OnClick="btnContinue_Click"
CssClass="btn btn-primary" Style="width:150px; margin-left:15px; margin-right:15px;
background-color:#737373; color:white; border-radius:4px; border-color:#737373"/>
</div>
</div>
</div>
- For this pop up page, we add some css like this which name is
style.css:
.ModalPopupBG {
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}
.pnlBackGround {
min-width: 200px;
min-height: 150px;
background: white;
}
- In the
<head>tag of this web form, place the following code to access the css file:
<link href="styles/style.css" rel="stylesheet" />
- Then from Code behind On Click event of the button Open PopUp :
protected void btnOpenMdlpopChooseFile_Click(object sender, ImageClickEventArgs e){
mdlpopChooseFile.Show();
}
Then on click of Ok Button :
protected void btnOk_Click(object sender, ImageClickEventArgs e) {
mdlpopChooseFile.Hide();
}
On Cancel click button :
protected void btnCancel_Click(object sender, ImageClickEventArgs e){
mdlpopChooseFile.Hide();
}
3. Result
Simple pop up page view
4. Conculsion
ASP.NET Ajax control kit is a nice contribution from the ASP.NET community, which is equipped with a lot of good and handy control extenders. This article explored ModalPopupExtender control of ajaxToolkit. There are various scenarios in which modal popup controls can become a handy tool to use in ASP.NET rich clients and also in general purpose web applications.
