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.
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>
Step 16 :
Now run the application by Pressing F5.
Step 17 : Now click on id option, a ModalPopup with
the student details appears as shown below:
Resource