Sử dụng ImageFields

bạn có thể sử dụng ImageField để hiển thị ảnh được lưu trữ trên Server, bạn không thể sử dụng ImageField để hiển thị ảnh lưu trữ trong Database

Các thuộc tính hỗ trợ ImageField

Thuộc tính Miêu tả

AlternateText Chuỗi Text cố định thay thế khi đuờng dẫn ảnh không đúng

DataAlternateTextField Chỉ định một trường dữ liệu để đưa ra chuỗi thay thế khi không đúng đường dẫn của ảnh

DataAlternateTextFormatString Định dạng chuỗi thay thế

DataImageUrlField Địa chỉ URL của File ảnh trong Data DataImageUrlFormatString Định dạng ảnh hiển thị

NullImageUrl Chỉ định một ảnh thay thế khi trường dữ liệu ảnh có giá trị là rỗng Ví dụ: <asp:ImageField DataImageUrlField=”FileName” DataImageUrlFormatString=”~/Photos/{0}” DataAlternateTextField=”AltText” ControlStyle-Width=”200px” /> 11.7 Sử dụng TemplateFields

Một Temple cho phép bạn thêm vào một vài nội dung tới một cột GridView mà bạn cần, Một TemeplateField có thể chứa đựng nội dung là HTML, biểu thức dữ liệu hoặc điều khiển ASP.NET.

TemplateField đặc biệt tiện ích khi bạn sử dụng GridView để chỉnh sửa dữ liệu trong bảng cơ sở dữ liệu, Bạn có thể sử dụng TemplateFields để tuỳ chỉnh giao diện sử dụng và thêm vào các điều khiển kiểm tra tính hợp lệ của trường dữ liệu được chỉnh sửa.

Các thuộc tính hỗ trợ TemplateField

Thuộc tinh Miêu tả

AlternatingItemTemplate Nội dung của template được hiển thị cho tất cả các dòng khác được đưa ra bởi GridView

EditItemTemplate Nội dung của Template được hiển thị khi một dòng được lựa chọn để hiển thị

FooterTemplate Nội dung footer của Template HeaderTemplate Nội dung Header của Template

InsertItemTemplate Nội dung của Template được hiển thị khi thêm mới một bản ghi

ItemTemplate Nội dung của Template được hiển thị cho tất cả các dòng được đưa ra trong GridView

Bài tập bạn tạo một ví dụ về GridView sử dụng TemplateField để thêm vào điều khiển kiểm tra tính hợp lệ của trường dữ liệu được chỉnh sửa.

Chương 12 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 trang trước thông qua thiết lập dữ liệu.

12.1 DetailView

12.1.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

<%@ PageLanguage="C#" AutoEventWireup="true" CodeFile="DetailView.aspx.cs"

Inherits="_DetailView" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<title>Detail View</title> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:DetailsViewID="DetailsView1"

DataSourceID="SqlDataSource1"runat="server" Height="50px"Width="125px">

</asp:DetailsView>

<asp:SqlDataSourceID="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ó

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;

publicclassEmployee

{

privateint _PersonID; publicint PersonID {

get { return _PersonID; } set { _PersonID = value; } }

privatestring _Hoten; publicstring Hoten {

get { return _Hoten; } set { _Hoten = value; } }

privateint _Tuoi; publicint 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

<%@ PageLanguage="C#" AutoEventWireup="true"CodeFile="DetailViewPerson.aspx.cs"

Inherits="DetailViewPerson" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<title>Detail View</title> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:DetailsViewID="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;

publicpartialclassDetailViewPerson : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e) {

if (!IsPostBack) {

Employee newEmploy=newEmployee(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.

12.2.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" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<title>Fields</title> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:DetailsViewID="DetailsView1" AutoGenerateRows="false"

DataSourceID="SqlDataSource1"runat="server"Height="50px"Width="125px">

<asp:BoundFieldDataField="pkIntrodureID"HeaderText="ID"/>

<asp:BoundFieldDataField="sTitle"HeaderText="Tiêu đề"/>

<asp:BoundFieldDataField="iPosition"HeaderText="Vị trí"/>

</Fields>

</asp:DetailsView>

<asp:SqlDataSourceID="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

12.2.3. Hiển thị DetailView với dữ liệu rỗng

Ví dụ Code 11.6

<%@ PageLanguage="C#" AutoEventWireup="true"

CodeFile="DetailViewDatanull.aspx.cs"Inherits="DetailViewDatanull" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:DetailsViewID="DetailsView1"

DataSourceID="SqlDataSource1"EmptyDataText="Dữ liệu không có"runat="server"

Height="50px"Width="125px">

</asp:DetailsView>

<asp:SqlDataSourceID="SqlDataSource1"

ConnectionString="<%$ConnectionStrings:hcubiuData %>"

SelectCommand="select * from tblProduct"runat="server"></asp:SqlDataSource>

</div>

</form> </body> </html>

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:

Ví dụ: DetailViewDatanull.aspx Code 11.7

<%@ PageLanguage="C#" AutoEventWireup="true"

CodeFile="DetailViewDatanull.aspx.cs"Inherits="DetailViewDatanull" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<styletype="text/css">

.noMatch{background-color:#ffff66;padding:10px;font-family:Arial,Sans-Serif;} .noMatchh1{color:red;font-size:16px;font-weight:bold;}

</style> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:DetailsViewID="DetailsView1"

DataSourceID="SqlDataSource1" runat="server" Height="50px"Width="125px">

<divclass="noMatch">

<h1>No Matching Results!</h1>

Please select a different record. </div>

</EmptyDataTemplate>

</asp:DetailsView>

<asp:SqlDataSourceID="SqlDataSource1"

ConnectionString="<%$ConnectionStrings:hcubiuData %>"

SelectCommand="select * from tblProduct"runat="server"></asp:SqlDataSource>

</div>

</form> </body> </html>

Kết xuất của chương trình sẽ như sau:

12.2.4. Phân trang với DetailView

Ví dụ DetailViewPaging.aspx

Bạn thêm vào thuộc tính AllowPaging=”true” cho điều khiển DetailView Code 11.8

<%@Page Language="C#"AutoEventWireup="true"CodeFile="DetailViewPaging.aspx.cs"

Inherits="DetailViewPaging" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<title>Paging</title> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:DetailsViewID="DetailsView1" AllowPaging="true"

DataSourceID="SqlDataSource1" runat="server" Height="50px"Width="300px">

</asp:DetailsView>

<asp:SqlDataSourceID="SqlDataSource1"

ConnectionString="<%$ConnectionStrings:hcubiuData %>"

</div>

</form> </body> </html>

Kết xuất của chương trình như sau

Bạn có thể Customize hiển thị phân trang trong DetailView như ví dụ dưới đây: Code 11.9

<%@ PageLanguage="C#" AutoEventWireup="true"CodeFile="DetailViewPaging.aspx.cs"

Inherits="DetailViewPaging" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<title>Paging</title> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:DetailsViewID="DetailsView1"AllowPaging="true"

DataSourceID="SqlDataSource1"runat="server" Height="50px"Width="300px">

<PagerSettings Mode="NextPreviousFirstLast"

FirstPageText="[First]"PreviousPageText="[Previous]"NextPageText="[Next]"

LastPageText="[Last]" />

</asp:DetailsView>

<asp:SqlDataSourceID="SqlDataSource1"

ConnectionString="<%$ConnectionStrings:hcubiuData %>"

SelectCommand="select * from tblIntrodure"runat="server"></asp:SqlDataSource>

</div>

</form> </body> </html>

12.2.5. Cập nhật dữ liệu với DetailView

Bạn có thể dùng DetailView để cập nhật dữ liệu Ví dụ:

Code 11.10

<%@Page Language="C#"AutoEventWireup="true"CodeFile="DetailViewUpdate.aspx.cs"

Inherits="DetailViewUpdate" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<title>Update Data</title> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:DetailsViewID="DetailsView1"DataSourceID="SqlDataSource1"

AutoGenerateEditButton="true"AllowPaging="true"runat="server" Height="50px"

Width="399px">

</asp:DetailsView>

<asp:SqlDataSourceID="SqlDataSource1"

ConnectionString="<%$ConnectionStrings:hcubiuData %>"

UpdateCommand="Update tblIntrodure set sTitle=@sTitle, sSummary=@sSummary, sContent=@sContent, iPosition=@iPosition where pkIntrodureID=@pkIntrodureID"

SelectCommand="select * from tblIntrodure"runat="server"></asp:SqlDataSource>

</div>

</form> </body> </html>

Trong đoạn code trên bạn thêm vào thuộc tính AutoGenerateEditButton="true" và trong SqlDataDource1 bạn thêm vào UpdateCommand="Update tblIntrodure set sTitle=@sTitle, sSummary=@sSummary, sContent=@sContent, iPosition=@iPosition where pkIntrodureID=@pkIntrodureID" để có thể cập nhật được dữ liệu.

Khi mới xuất hiện chương trình sẽ hiện ra dưới dạng một linkButton Edit khi bạn nhấn vào nó, nó sẽ xuất hiện giống hình ngay bên trên các dữ liệu sẽ hiển thị trong một TextBox tương ứng và nút nhấn Edit được ẩn đi đồng thời xuất hiện hai LinkButton Update và Cancel. để bạn có thể cập nhật dữ liệu hay bỏ qua.

Thêm mới dữ liệu với DetailView

Cũng trong ví dụ trên ở Code 11.10 bạn thêm vào thuộc tính AutoGenerateInsertButton="true" cho DetailView1, và InsertCommand="insert tblIntrodure(sTitle, sSummary, sContent, iPosition) values(@sTitle, @sSummary, @sContent, @iPosition)" cho SqlDataSource1. bạn sẽ thấy khi kết xuất chương trình khi xuất hiện sẽ có thêm một LinkButton “New” bên canh “Edit” và khi nhấn vào đó bạn sẽ thấy một Form như sau xuất hiện

Và bạn có thể thêm dữ liệu hoặc bỏ qua. Xoá dữ liệu với DetailView

Ví dụ:

Cũng ở code 11.10 bạn thêm vào AutoGenerateDeleteButton="true" cho điều khiển DetailView và DataSourceID="SqlDataSource1". Trong SqlDataSource bạn thêm vào DeleteCommand="Delete from tblIntrodure where pkIntrodureID=@pkIntrodureID" và chạy chương trình, bạn sẽ thấy trên DetailView xuất hiện thêm một LinkButton cho phép bạn xoá dữ liệu

Như kết xuất dưới đây.

DetailView làm việc với các sự kiện

 DataBinding: Đưa ra 1 công việc trung gian trước khi Dữ liệu được đưa vào

 ItemCommand: Xảy ra khi trên detailView có chứa đụng các ButtonField và chúng được nhấn

 ItemCreated: Xảy ra khi DetailView đưa ra dữ liệu.

 ItemDeleting: Xảy ra trước khi dữ liệu bị xoá

 ItemDeleted: xảy ra sau khi dữ liệu bị xoá

 ItemInserting: Xảy ra trước khi dữ liệu được thêm vào

 ItemInserted: Xảy ra sau khi dữ liệu được thêm vào

 ItemUpdating: Xảy ra trước khi dữ liệu được thay đổi

 ItemUpdated: Xảy ra sau khi dữ liệu được thay đổi

 PageIndexChanging: Đưa ra một công việc trước khi thay đổi trang hiện tại

 PageIndexChanged: Đưa ra một công việc sau khi dữ liệu được thay đổi.

12.3 Sử Dụng Điều khiển FormView

Cũng giống với DetailView trong cách sử dụng và hầu hết các thuộc tính nhưng, FormView lại được mọi người sử dụng nhiều hơn do FormView cung cấp nhiều control hơn thông qua trình bầy của Form, hơn nữa việc thêm vào các điều khiển kiểm tra tính hợp lệ dễ hơn với điều khiển DetailView.

12.3.1. Hiển thị dữ liệu với điều khiển FormView

Ví dụ: Code 11.11

<%@Page Language="C#"AutoEventWireup="true"CodeFile="FormView.aspx.cs"

Inherits="FormView" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server">

<title>FormView</title> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:FormViewID="FormView1"DataSourceID="SqlDataSource1"runat="server">

<asp:SqlDataSourceID="SqlDataSource1"

ConnectionString="<%$ConnectionStrings:hcubiuData %>"

SelectCommand="select * from tblIntrodure where pkIntrodureID=5"

</div>

</form> </body> </html>

Ở đây chúng ta đưa vào một điều khiển FormView và sử dụng ItemTemplate và sử dụng thẻ <%#Eval(“_ten_truong_dulieu”) %> để hiển thị dữ liệu.

Kết xuất của chương trình

12.3.2. Phân trang trong FormView

Ví dụ

Cũng với Code 11.11 bạn thêm vào thuộc tính AllowPaging=”true” cho điều khiển FormView, và trong đối tượng SqlDataSource1 bạn sửa lại câu lệnh truy vấn lấy tất cả dữ liệu trong bảng select * from tblIntrodure thì điều khiển FormView của chúng ta sẽ được phân trang như kết xuất của chương trình dưới đây.

Cũng như với các điều khiển DetailView và GridView bạn có thể phân trang tuỳ biến với điều khiển FormView.

Thay đổi dữ liệu với điều khiển FormView Ví dụ:

<%@ PageLanguage="C#" AutoEventWireup="true"CodeFile="FormView.aspx.cs"

Inherits="FormView" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<headrunat="server">

<title>FormView</title> </head>

<body>

<formid="form1"runat="server">

<divid="navcontain">

<asp:FormViewAllowPaging="true"DataKeyNames="pkIntrodureID"

ID="FormView1"DataSourceID="SqlDataSource1" runat="server">

<%#Eval("sSummary")%> <hr />

<asp:LinkButtonID="lbnedit"runat="server"Text="Chỉnh sửa"

CommandName="Edit"/>

</ItemTemplate>

<asp:LabelID="lbl1"runat="server"Text="Tiêu đề"/><br />

<asp:TextBoxText='<%#Bind("sTitle") %>'ID="txtTitle"runat="server"/><br

/><br/>

<asp:LabelID="lbl2"runat="server"Text="Tóm tắt"/><br/>

<asp:TextBoxText='<%#Bind("sSummary") %>'ID="txtSummary"runat="server" /><br/><br/>

Khai báo không gian tên (Namespaces)

Kế thừa và trừu tượng hoá một lớp