Sử dụng DetailView và FormView
Hai điều khiển này cho phép bạn làm việc với một trường dữ liệu đơn tại mỗi thời điểm Cả hai điều khiển này cho phép bản thay đổi, thêm mới hay xoá dữ liệu như một bản ghi cơ sở dữ liệu, và nó cho phép bạn chuyển sang trang tiếp theo hay quay lại ...
Hai điều khiển này cho phép bạn làm việc với một trường dữ liệu đơn tại mỗi thời điểm
Cả hai điều khiển này cho phép bản thay đổi, thêm mới hay xoá dữ liệu như một bản ghi cơ sở dữ liệu, và nó cho phép bạn chuyển sang trang tiếp theo hay quay lại trang trước thông qua thiết lập dữ liệu.
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.
<%@ 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 > <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> Code 11.1
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
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.2
<%@ 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.3 DetailViewPerson.aspx
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();
}
}
}
Code 11.4 DetailViewPerson.aspx.cs
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.
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.
<%@ 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> Code 11.5
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
Hiển thị DetailView với dữ liệu rỗng
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DetailViewDatanull.aspx.cs" Inherits="DetailViewDatanull" %> <!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>Null Data</title> </head> <body> <form id="form1" runat="server"> <div id="navcontain"> <asp:DetailsView ID="DetailsView1" DataSourceID="SqlDataSource1" EmptyDataText="Dữ liệu không có" runat="server" Height="50px" Width="125px"> </asp:DetailsView> <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ConnectionStrings:hcubiuData %>" SelectCommand="select * from tblProduct" runat="server"></asp:SqlDataSource> </div> </form> </body> </html> Code 11.6
Kết xuất của chương trình
Trong ví dụ trên ta đưa dữ liệu vào DetailView1 với dữ liệu từ bảng tblProduct(chưa được nạp dữ liệu), trong DetailView1 ta thêm vào thuộc tính EmptyDataText="Dữ liệu không có" để khi trong bảng không có dữ liệu chuỗi Text nằm trong thuộc tính EmptyDataText sẽ được đưa ra.
Bạn cũng có thể Customize chuỗi text hiển thị ra khi chưa có nội dung bằng EmptyDataTemple như ví dụ sau:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="DetailViewDatanull.aspx.cs" Inherits="DetailViewDatanull" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>Null Data</title>
<style type="text/css">
.noMatch{background-color:#ffff66;padding:px;font-family:Arial,Sans- Serif;}
.noMatch h1{color:red;font-size:16px;font-weight:bold;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="navcontain">
<asp:DetailsView ID="DetailsView1" DataSourceID="SqlDataSource1" runat="server" Height="50px"
Width="125px">
<EmptyDataTemplate>
<div class="noMatch">
<h1>No Matching Results!</h1> Please select a different record.
</div>
</EmptyDataTemplate>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1"
ConnectionString="<%$ConnectionStrings:hcubiuData %>"
SelectCommand="select * from tblProduct"
runat="server"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Code 11.7
Kết xuất của chương trình sẽ như sau:
Phân trang với DetailView
Bạn thêm vào thuộc tính AllowPaging=”true” cho điều khiển DetailView
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DetailViewPaging.aspx.cs" Inherits="DetailViewPaging" %> <!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>Paging</title> </head> <body> <form id="form1" runat="server"> <div id="navcontain"> <asp:DetailsView ID="DetailsView1" AllowPaging="true" DataSourceID="SqlDataSource1" runat="server" Height="50px" Width="300px"> </asp:DetailsView> Code 11.8
