Display Record Using The ModalPopupExtender Control in AJAX

Step 12. Now go to Default.aspx page[Source] option and drag ModalPopupExtender control from Toolbox.

• Define TargetControlID
• PopupControlID

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnshowModalPopup" PopupControlID="divPopUp" PopupDragHandleControlID="panelD" DropShadow="true" BackgroundCssClass="popUpStyle">
</asp:ModalPopupExtender>

Step 13. The CSS files are declared divpopup and PaneDragHandle Property for ModalPopupControl property.

<style type="text/css">
    body {
        font: normal 12px auto "Trebuchet MS", Verdana;
        background-color: #ffffff;
        color: #4f6b72;
    }

    .popUpStyle {
        font: normal 11px auto "Trebuchet MS", Verdana;
        background-color: #ffffff;
        color: #4f6b72;
        padding: 6px;
        filter: alpha(opacity=80);
        opacity: 0.8;
    }

    .drag {
        background-color: #dddddd;
        cursor: move;
        border: solid 1px gray;
    }
</style>

Step 14. Go to Default.aspx.cs file and write a code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {

    }

    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        LinkButton lb = sender as LinkButton;
        string id = lb.Text;
        lblValue.Text = id;
        string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        string sql = "SELECT name, class, Age FROM stu WHERE id = @id";
        SqlConnection connection = new SqlConnection(constr);
        SqlCommand cmd = new SqlCommand(sql, connection);
        cmd.Parameters.AddWithValue("@id", id);
        cmd.CommandType = CommandType.Text;
        connection.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        GridView2.DataSource = dr;
        GridView2.DataBind();
        connection.Close();
        ModalPopupExtender1.Show();
    }
}

Step 15. Go to Default.aspx[Source] option write a code.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="background-color: #9EA3C7">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                DataSourceID="SqlDataSource1" onselectedindexchanged="GridView1_SelectedIndexChanged"
                Width="200px" BackColor="#72DE7A">
                <Columns>
                    <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />
                    <asp:TemplateField HeaderText="id">
                        <ItemTemplate>
                            <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Eval("id") %>' OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
                            <br />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
                    <asp:BoundField DataField="class" HeaderText="class" SortExpression="class" />
                    <asp:BoundField DataField="age" HeaderText="age" SortExpression="age" />
                </Columns>
            </asp:GridView>
            <asp:Button runat="server" ID="btnShowModalPopup" style="display:none" />
            <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnshowModalPopup"
                PopupControlID="divPopUp" PopupDragHandleControlID="panelD" DropShadow="true"
                BackgroundCssClass="popUpStyle">
            </asp:ModalPopupExtender>
            <div class="popUpStyle" id="divPopUp" style="display:none">
                <asp:Panel runat="Server" ID="panelD" CssClass="drag">
                    |
                    Hold here to Drag this Box
                </asp:Panel>
                <asp:Label runat="server" ID="lblText" Text="id :"></asp:Label>
                <asp:Label ID="lblValue" runat="server"></asp:Label>
                <asp:GridView ID="GridView2" runat="server" Width="200"></asp:GridView>
                <br />
                <br />
                <asp:Button ID="btnClose" runat="server" Text="close" />
                <br />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        SelectCommand="SELECT * FROM [stu]"></asp:SqlDataSource>
</div>

Step 16. Now run the application by Pressing F5.

Step 17. Now click on the id option, and a ModalPopup with the student details appears as shown below.

Resource

• GridView Using Ajax ModalPopupExteder
• DropDown Control in AJAX
• Programming Template in Web Server Controls
• Bind Objects to a DataGridView Control
• AJAX Rating Control