Post
Ask Question

Modal Popup Extender Control with GridView in Ajax


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.
asp12.gif

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

  • Select Add New Item->Web Form.
web-form12.gif

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.
sql25.gif

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.

grid-view1.gif


Similar Articles