Modal Popup Extender Control with GridView in Ajax

Davin Martyn
13y
18.2k
0
0

Article

Introduction : Modal Popups are commonly seen in desktop applications. The Modal Popup Extender allow pages to display content to the user in a modal manner which prevents the user from interacting from with the rest of the page.

Modal Popup Extender Control properties.

DropShadow.
CancelControl ID.
Ok Control ID.
TargetControl ID.

A GridView displays the value of a data source in a table where each column represents a field and each row represents a record.

Step : 1 Open Visual Studio->File option->New.

Select WebSite->ASP.NET Web Site.

Step : 2 Go to Solution Explorer->Right Click.

Select Add New Item->Web Form.

Step : 3 Go to Design option->Double Click.

Drag a control in Toolbox.
ScriptManager control, SqlDataSource, GridView, ImageButton, ModalPopupExtender, Panel.

Step : 4 Now Solution Explorer->Right click.

Select Add New Item->SQL Server Database.
Server Explorer->Table->Add New Table.
Make a Connectivity with SQL Server.

Step : 5 Now write the following code.

Code :

<title> grid view</title>
</head>
<body>ImageButton
    <form id="form1" runat="server">
<div>
<br />
<br />
        <br />
<br />
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl = "~/Water lilies.jpg"
            onclick="ImageButton1_Click" Height="122px" Width="134px" />
        <br />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "False" DataSourceID = "SqlDataSource1"
            CellPadding = "2" GridLines ="None" >
<Columns>
       <asp:BoundField DataField = "Fname" HeaderText = "Fname" SortExpression = "Fname" />
       <asp:BoundField DataField = "Lname" HeaderText = "Lname" SortExpression = "Lname" />
           <asp:BoundField DataField="Email_id" HeaderText="Email_id"
               SortExpression="Email_id" />
           <asp:BoundField DataField="Mobile no" HeaderText="Mobile no"
               SortExpression="Mobile no" />
           <asp:BoundField DataField="Address" HeaderText="Address"
               SortExpression="Address" />
</Columns>
</asp:GridView>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:EmployeeConnectionString %>"
            SelectCommand="SELECT * FROM [student3]"></asp:SqlDataSource>
<asp:Panel ID="Panel1" runat="server" Style = "display:none;">
<table>
            <caption>
<td colspan="2">
            <asp:Label ID="lbl" runat="server" ForeColor="White">age:</asp:Label>
             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    </td>
            </caption>
<tr>
<td align="left">
<asp:Button ID="btn" runat="server"
Text="submit" OnClick="btn_Click" />
</td>
<td align="right">
   </td>
</tr>
</table>
        </asp:Panel>
</div>
    </form>
</body>
</html>

Step : 6 Go to Design option and double click in ImageButton.

Write the following code.

Code :

public partial class data : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
    {
btn.OnClientClick = String.Format("functionPostback('{0}','{1}')", btn.ID, "");
    }
    protected void btn_Click(object sender, EventArgs e)
    {
        btn.OnClientClick = String.Format("functionPostback('{0}','{1}')",
btn.UniqueID, "");
    }
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
GridViewRow row = ((GridViewRow)((ImageButton)sender).NamingContainer);
        AjaxControlToolkit.ModalPopupExtender mpe =
        (AjaxControlToolkit.ModalPopupExtender)row.FindControl("mpe");
       TextBox1.Text = "";
        mpe.Show();
}

Step : 7 Press F5 and run.

Up Next

Ebook Download

View all

Node Js and Angular CheatSheet

Read by 26 people

Download Now!

Learn

View all