Bài viết này hướng dẫn làm thế nào để hiển thị các chi tiết của dữ liệu bằng cách sử dụng Control ModalPopupExtender trong AJAX.
Giới thiệu
Ajax (Asynchronous JavaScript And XML) là một trang web kỹ thuật phát triển mới được sử dụng cho các trang web tương tác. AJAX có thể giúp chúng ta phát triển các ứng dụng web và lấy một lượng nhỏ dữ liệu từ máy chủ web. AJAX là công nghệ.
- JavaScript
- XML
- Không đồng bộ cuộc gọi đến máy chủ
Control ModalPopupExtender
Phương thức Popups thường thấy trong các ứng dụng máy tính để bàn. Modal Popup Extender cho phép các trang web hiển thị nội dung cho người dùng một cách có phương thức ngăn chặn người sử dụng tương tác với phần còn lại của trang.
Thuộc tính
- TargetControlID
- BehaviourID
- OkCantrolID
- DropShadowID
GridView
GridView hiển thị giá trị của nguồn dữ liệu trong bảng mà mỗi cột đại diện cho một lĩnh vực và mỗi hàng đại diện cho một record.
Bước 1: Mở Visual Studio 2010.
Tới File-> New -> WebSite -> Chọn ASP.NET Empty WebSite
Bước 2: Solution Explorer và click chuột phải.
Chọn Add-> New Item -> Chọn WebForm -> Default.aspx
Bước 3: Tại trang Default.aspx và click vào tùy chọn [Design] và kéo điều khiển từ Toolbox.
Kéo ScriptManager, GridView, UpdatePanel, LinkButton, Button.
Bước 4: Tại Solution Explorer và click chuột phải.
Chọn AddNewItem -> Chọn SqlServerDatabase -> Create Table
Bước 5: Tại ServereExplorer và click vào tùy chọn cơ sở dữ liệu.
Click chuột phải -> Table -> Chọn Add New Table -> Xác định Field
Bước 6: Bây giờ chúng ta định nghĩa id, name, class, age cho danh sách dữ liệu hoàn chỉnh.
Bước 7: Bây giờ hãy vào trang Default.aspx tùy chọn[Design] và nhấn chuột vào Control GridView.
Chọn "Choose Data Source" -> Xác định SqlDataSource
Bước 8: Bây giờ chúng ta chọn tùy chọn DataSource.
Xác định SqlDataSource1
Kết nối chuỗi
Bước 9: Bây giờ hãy nhấp vào tùy chọn ConnectionString mới và thiết lập các chuỗi kết nối.
Code:
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [stu]"></asp:SqlDataSource>
ContentTemplate
Bước 10: Bây giờ hãy vào Default.aspx tùy chọn [Source] và xác định <contenttTemplate> và thiết lập thuộc tính DataSource đến "SQLDataSource1".
<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>
Bước 11: Bây giờ chúng ta sẽ thêm các cột GridView như hình dưới đây. Quan sát rằng id được hiển thị như một liên kết. Chúng ta sẽ hiển thị studentdetail khi người dùng nhấp chuột vào liên kết.
<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>
Bước 12: Bây giờ hãy vào trang default.aspx tùy chọn [Source] và kéo Control ModalPopupExtender từ Toolbox.
Xác định TargetControlID, PopupControlID
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnshowModalPopup" PopupControlID="divPopUp" PopupDragHandleControlID="panelD" DropShadow="true" BackgroundCssClass="popUpStyle">
</asp:ModalPopupExtender>
Bước 13: File 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>
Bước 14: Tại Default.aspx.cs và viết mã.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
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();
}
}
Bước 15: Tại Default.aspx tùy chọn [Source] viết mã.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DOTNET GROUP</title>
<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>
</head>
<body>
<form id="form1" runat="server">
<div>
<Asp:ScriptManager ID="ScriptManager1" runat="server">
</Asp:ScriptManager>
<Asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [stu]"></Asp:SqlDataSource>
<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>
</div>
</form>
</body>
</html>
Bước 16: Bây giờ chạy các ứng dụng bằng cách nhấn F5.
Bước 17: Bây giờ hãy nhấp vào tùy chọn id, ModalPopup với các chi tiết sinh viên sẽ xuất hiện như hình dưới đây:
Tải Source Code để chạy Demo hoàn chỉnh.
Chúc bạn thành công!