ARTICLE

Display Record Using The ModalPopupExtender Control in AJAX

Posted by Davin Martyn in Articles | AJAX in C# on January 18, 2012

Tags: AJAX ModalPopupExtender, AJAX tutorials, Display record using ModalPopupExtender, ModalPopupExtender Control in AJAX

This article shows you how to display the details of data using the ModalPopupExtender Control in AJAX.

Tweet
1088
0

Reader Level: Beginner

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

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

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

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

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

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

Select choose DataSource option

Define SqlDataSource

Step 8 : Now we select DataSource option.

Define SqlDataSource1

Connection String

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

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>