Display Record Using The ModalPopupExtender Control in AJAX


Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. AJAX can help us develop web applications and retrieve small amounts of data from the web server. AJAX consists of a different type of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

ModalPopupExtender control

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.

Property

  • TargetControlID
  • BehaviourID
  • OkCantrolID
  • DropShadowID

GridView

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 2010.

  • Go to File->New->WebSite
  • Select ASP.NET Empty WebSite
dr1.gif

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open
dr2.gif

Step 3 :  Go to the Default.aspx page and click on the [Design] option and drag the control from the Toolbox.

  • Drag ScriptManager, GridView, UpdatePanel, LinkButton, Button.

Step 4 : Go to Solution Explorer and right-click.

  • Select-> AddNewItem
  • Select SqlServerDatabase

Create Table

Step 5 : Go to ServereExplorer and click on the Database option.

  • Right click ->Table
  • Select Add New Table
  • Define Field
grid5.gif

Step 6 : Now we define id, name, class, age for the complete data list.

grid6.gif

Step 7 : Now go to Default.aspx page[Design] option and click on GridView control.

  • Select choose DataSource option
grid7.gif

Define SqlDataSource

Step 8 : Now we select DataSource option.

  • Define SqlDataSource1
grid8.gif

Connection String

Step 9 : Now click on New ConnectionString option and establish the connection String.

grid9.gif

Code :

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [stu]"></asp:SqlDataSource
>

ContentTemplate

Step 10 :  Now go to Default.aspx[Source] option and define <contenttTemplate> and set the DataSource property to the "SQLDataSource1".

Code :

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

Step 11 : We will now add columns to the GridView as shown below. Observe that the id is displayed as a link. We will display the studentdetail when the user clicks on the link.

Code :

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

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 File which are declare divpopup and PaneDragHandle Property for ModalPopupControl property.

CSS :

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

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.

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>
    </form
>

Step 16 : Now run the application by Pressing F5.

gridrun.gif

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

Resource

Next Recommended Readings