Home > DeveloperSection > Articles > FileUpload in GridView with Ajax Modal Popup

FileUpload in GridView with Ajax Modal Popup


AJAX AJAX 
Ratings:
0 Comment(s)
 8171  View(s)
Rate this:

FileUpload in GridView with Ajax Modal Popup

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.

FileUpload in GridView with Ajax Modal Popup

 

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">

                    &nbsp;

                    <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')">

                                    &nbsp;</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>

                                    &nbsp;

                                    <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:

FileUpload in GridView with Ajax Modal Popup

When “Upload Resume” will be clicked, following window will be appearing.

FileUpload in GridView with Ajax Modal Popup

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:

FileUpload in GridView with Ajax Modal Popup

Now, Simply Click on Upload Button.

FileUpload in GridView with Ajax Modal Popup


Don't want to miss updates? Please click the below button!

Follow MindStick