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