Chương 10. Sử dụng điều khiển GridView
1. Hiển thị dữ liệu với DetailView
DetailView được đưa ra hiển thị như một bảng(<Table>) trong HTML để hiển thị dữ liệu một bản ghi.
Ví dụ: Trang DetailView.aspx Code 11.1
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="DetailView.aspx.cs" Inherits="_DetailView" %>
<!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>Detail View</title>
</head>
<body>
<form id="form1" runat="server">
<div id="navcontain">
<asp:DetailsView ID="DetailsView1"
DataSourceID="SqlDataSource1" runat="server" Height="50px"
Width="125px">
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1"
ConnectionString="<%$ConnectionStrings:hcubiuData %>"
SelectCommand="select * from tblIntrodure"
runat="server"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Vẫn với cơ sở dữ liệu từ chương trước bạn đưa dữ liệu của bảng tblIntrodure vào SqlDataSource và điền nó vào DetailView1 với thuộc tính DataSourceID của nó
Kết xuất của chương trình sẽ như sau:
Bạn cũng có thể đưa dữ liệu vào DetailView từ một mảng hay danh sách dữ liệu Ví dụ:
Bạn tạo một lớp Employee.cs Code 11.2
using System;
public class Employee {
private int _PersonID;
public int PersonID {
get { return _PersonID; } set { _PersonID = value; } }
private string _Hoten;
public string Hoten {
get { return _Hoten; } set { _Hoten = value; } }
private int _Tuoi;
public int Tuoi {
get { return _Tuoi; } set { _Tuoi = value; } }
public Employee() {
}
public Employee(int _PersonID, string _Hoten, int _Tuoi) {
this._PersonID = _PersonID;
this._Hoten = _Hoten;
this._Tuoi = _Tuoi;
} }
Code 11.3 DetailViewPerson.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="DetailViewPerson.aspx.cs" Inherits="DetailViewPerson" %>
<!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>Detail View</title>
</head>
<body>
<form id="form1" runat="server">
<div id="navcontain">
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px"
Width="125px">
</asp:DetailsView>
</div>
</form>
</body>
</html>
Code 11.4 DetailViewPerson.aspx.cs
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
public partial class DetailViewPerson : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
Employee newEmploy=new Employee(1,"HCUBIU",25);
List<Employee> listEmploy=new List<Employee>();
listEmploy.Add(newEmploy);
DetailsView1.DataSource = listEmploy;
DetailsView1.DataBind();
} } }
Trong ví dụ này chúng ta tạo ra một lớp Employee và chúng ta đưa dữ liệu vào DetailView1 với thuộc tính DataSource và phương thức DataBind điền dữ liệu vào.
2. Sử dụng Fields với điều khiển DetailView DetailView hỗ trợ tất cả các Field như GridView
• BoundField: cho phép bạn hiển thị giá trị của dữ liệu như Text
• CheckBoxField: hiển thị dữ liệu dưới dạng một CheckBox
• CommandField: hiển thị liên kết cho phép chỉnh sửa, thêm mới, xoá dữ liệu của dòng.
• ButtonField: hiển thị dữ liệu như một button(ImageButton, )
• HyperLinkField: hiển thị môt liên kết
• ImageField: hiển thị ảnh
• TemplateFile: cho phép hiển thị các đìều khiển tuỳ biến.
Ví dụ:
Code 11.5
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="DetailViewfield.aspx.cs" Inherits="DetailViewfield" %>
<!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>Fields</title>
</head>
<body>
<form id="form1" runat="server">
<div id="navcontain">
<asp:DetailsView ID="DetailsView1" AutoGenerateRows="false"
DataSourceID="SqlDataSource1" runat="server" Height="50px"
Width="125px">
<Fields>
<asp:BoundField DataField="pkIntrodureID" HeaderText="ID" />
<asp:BoundField DataField="sTitle" HeaderText="Tiêu đề" />
<asp:BoundField DataField="iPosition" HeaderText="Vị trí" />
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1"
ConnectionString="<%$ConnectionStrings:hcubiuData %>"
SelectCommand="select * from tblIntrodure"
runat="server"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Trong ví dụ trên bạn đưa vào 3 BoundField và điền vào dữ liệu với thuộc tính DataField và thiết đặt cho nó tiêu dề với HeaderText, để đưa ra dữ liệu như thế này bạn cần thiết lập thuộc tính AutoGenerateRows=”false”.
Kết xuất của chương trình