Ajax Modal Popup:
The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it. When displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing.
ModalPopup Properties:
The control above is initialized with this code. The display on the modal popup element is set to none to avoid a flicker on render. The italic properties are optional:
<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"
PopupDragHandleControlID="Panel3" >
<Animations>
<OnShowing> .. </OnShowing>
<OnShown> .. </OnShown>
<OnHiding> .. </OnHiding>
<OnHidden> .. </OnHidden>
</Animations>
</ajaxToolkit:ModalPopupExtender>
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.
Here is the demo of AJAX ModalPopup Control which will demonstrate you how to use ModalPopup in ASP.NET.
1. Add a Web Form and give some name to it. (here I named it ShowRecords.aspx) and create following UI.
Above I have used a GridView Control and Bind it from the Database using TemplateField. Additionally I have created a LinkButton for each row using TemplateField. Further I have added a Panel Control to Create a U.I to be shown by ModalPopup when it will be activated. Panel will contain a FileUpload Control to select a file to be Uploaded. Now, Switch to Code:
Code for ShowRecords.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowRecords.aspx.cs" Inherits="ShowRecords" Debug="true"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>List of All Records</title>
<script type="text/javascript">
window.history.forward(0);
function noBack() {
window.history.forward();
}
</script>
<style type="text/css">
<%-- It is used to give BackGround Color for the Deactivated Portion of page--%>
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="margin: 0 auto;" width="1100px">
<table style="margin: 0 auto;" width="1100px">
<tr>
<td>
<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Georgia" Text="File Upload in GridView with Ajax Modal Popup"></asp:Label>
</td>
</tr>
<tr>
<td bgcolor="#6699FF" align="center">
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Georgia" ForeColor="White"
Text="List of All Records"></asp:Label>
</td>
</tr>
<tr>
<td align="center">
<asp:GridView ID="GridViewShowRecords" runat="server" BackColor="White" BorderColor="#DEDFDE"
BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableModelValidation="True"
ForeColor="Black" GridLines="Vertical" AutoGenerateColumns="false">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
ID</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblUserID" runat="server" Text='<%#Bind("UserId") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtUserID" Text='<%#Bind("UserId") %>' runat="server" Width="20px"
Enabled="False"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
FirstName</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%#Bind("FName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtFirstName" Text='<%#Bind("FName") %>' runat="server" Width="80px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtFirstName" ToolTip="Can't Be Left Blank.">*</asp:RequiredFieldValidator>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
LastName</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%#Bind("LName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtLastName" Text='<%#Bind("LName") %>' runat="server" Width="80px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtLastName" ToolTip="Can't Be Left Blank.">*</asp:RequiredFieldValidator>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
FatherName</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblFatherName" runat="server" Text='<%#Bind("FatherName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtFatherName" Text='<%#Bind("FatherName") %>' runat="server" Width="100px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtFatherName" ToolTip="Can't Be Left Blank.">*</asp:RequiredFieldValidator>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Age</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblAge" runat="server" Text='<%#Bind("Age") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAge" Text='<%#Bind("Age") %>' runat="server" Width="30px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtAge" ToolTip="Provide Age Details.(EX: 24)">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtAge"
ToolTip="Enter Numbers Only (Ex: 25)" ErrorMessage="*" ValidationExpression="^[0-9]+$"></asp:RegularExpressionValidator>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Address</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblAddress" runat="server" Text='<%#Bind("Address") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAddress" Text='<%#Bind("Address") %>' runat="server" Width="150px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtAddress" ToolTip="Provide Address Details.">*</asp:RequiredFieldValidator>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Phone</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblPhone" runat="server" Text='<%#Bind("Phone") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtPhone" Text='<%#Bind("Phone") %>' runat="server" Width="80px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtPhone" ToolTip="Provide Phone No. Details.">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ControlToValidate="txtPhone"
ToolTip="This Will Take Number Only (Ex: 9889989898)" ErrorMessage="*" ValidationExpression="^[0-9]+$"></asp:RegularExpressionValidator>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Email</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblEmail" runat="server" Text='<%#Bind("Email") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtEmail" Text='<%#Bind("Email") %>' runat="server" Width="120px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtEmail" ToolTip="Provide Email Details.(EX: abc@xyz.com)">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="*"
ToolTip="Invalid Email Format. (Ex: abc@xyz.com)" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
ControlToValidate="txtEmail"></asp:RegularExpressionValidator>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Upload Resume</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkUpload" runat="server" Text="Upload Resume" ></asp:LinkButton>
<%--Using ModalPopupExtender--%>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lnkUpload"
PopupControlID="pnlUpload" BackgroundCssClass="ModalPopupBG" CancelControlID="btnCancel">
</cc1:ModalPopupExtender>
<%--Using ModalPopupExtender--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" Font-Names="Georgia" ForeColor="Red"></asp:Label>
</td>
</tr>
<tr>
<td>
<hr style="border-color: #6699FF" />
</td>
</tr>
<tr>
<td style="margin: 0 auto">
<%--This Panle will be Shown when ModalPopupExtender will be activated--%>
<asp:Panel ID="pnlUpload" runat="server" Width="450px" BackColor="#E39A19"
BorderColor="#C3680D" BorderStyle="Solid">
<table style="width: 450px; margin: 0 auto">
<tr>
<td align="right" style="background-image: url('backTable.PNG')">
</td>
</tr>
<tr>
<td align="left">
<asp:FileUpload ID="flp_Resume" runat="server" Width="222px" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server"
ControlToValidate="flp_Resume" ErrorMessage="*"
ToolTip="Please Select a File to Upload."></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server"
ControlToValidate="flp_Resume" ErrorMessage="*"
ToolTip="Only txt,doc or docx files are Allowed"
ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+((.pdf)|(.doc)|(.txt)|(.docx))$"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td align="left">
<asp:Button ID="btnUpload" runat="server" Text="Upload" Width="80px"
onclick="btnUpload_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="80px" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblError" runat="server" Font-Bold="True" Font-Names="Georgia"
ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code for ShowRecords.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.IO;
public partial class ShowRecords : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Binding the GridView
BindGridViewShowRecords();
}
}
private void BindGridViewShowRecords()
{
//Creating Connection and Binding the GridView
connection.con = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);
connection.con.Open();
string query = "select * from tblUserInfo";
connection.da = new System.Data.SqlClient.SqlDataAdapter(query, connection.con);
connection.bui = new SqlCommandBuilder(connection.da);
connection.dt = new System.Data.DataTable();
connection.da.Fill(connection.dt);
GridViewShowRecords.DataSource = connection.dt;
GridViewShowRecords.DataBind();
}
protected void btnUpload_Click(object sender, EventArgs e)
{
if (flp_Resume.HasFile)
{
//Getting the Name of of the selected file.
string filename = Path.GetFileName(flp_Resume.PostedFile.FileName);
flp_Resume.SaveAs(Server.MapPath("~/files/" + filename));//create a folder named 'files' in the solution explorer,the files will be uploaded to this folder //
lblMessage.Text = "Resume Uploaded Successfully";
}
else
{
lblError.Text = "Please Select a File";
return;
}
}
}
Following are the screenshots of the Output Window of the Program:
When “Upload Resume” will be clicked, following window will be appearing.
When ModalPopup will be called it will deactivate the rest of the working area of the Page. User will only be able to interact with the ModalPopup working area.
Click on Choose File Button. It will Open an Open File Dialogue Box to Locate and Select Your Resume File. Here I have also put a Validation that user can only be able to Upload Only txt,doc,docx or pdf file only.
Here is the code to implement this Validation:
<asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ControlToValidate="flp_Resume" ErrorMessage="*" ToolTip="Only txt,doc or docx files are Allowed"
ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))+((.pdf)|(.doc)|(.txt)|(.docx))$">
</asp:RegularExpressionValidator>
After choosing your Resume File, You can simply click on Upload Button. In Case if you wish to cancel the Operation, You can simply Click on Cancel Button. After selecting the file, its name will be appeared, as shown below:
Now, Simply Click on Upload Button.
Leave Comment