PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Công nghệ ASP.NET ... đ c vi t t nhi u ngôn ượ ế ừ ... • Hoặc sử dụng các điều khiển

Lê Đình ThanhBộ môn Mạng và Truyền thông Máy tính

Khoa Công nghệ Thông tinTrường Đại học Công nghệ, ĐHQGHN

E-mail: [email protected], [email protected]: 0987.257.504

Bài giảng

PHÁT TRIỂN ỨNG DỤNG WEB

Công nghệ ASP.NETBài 4

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Nội dung

• Kiến trúc của ứng dụng Web động• C# và ASP.NET• ADO.NET• Tạo dự án web động


Web động

• Nội dung trang web (HTML + CSS + JavaScript) được Web Server sinh ra khi có yêu cầu từ Client.

• Rất phổ dụng: Hầu hết các trang web thương mại đều là web động.

• Sử dụng ngôn ngữ lập trình đa năng để sinh ra nội dung web.

• Sử dụng CSDL.


Kiến trúc web động


Web động với CSDL

WebServer

WebBrowser

Database Provider

http://www....

Yêu cầu dữ liệu

Thao tác CSDLDữ liệu

Dữ liệu

Nội dung (HTML)

CSDL


Web Server

• Nhận yêu cầu từ client.– Đối tượng nhận yêu cầu: Request

• Sinh nội dung web (HTML, javascript, css) và gửi cho web client

– Đối tượng Response

• Lưu trạng thái phiên làm việc– Đối tượng lưu các biến phiên: Session


Công nghệ phát triển Web (động)

• Đa dạng và không ngừng được phát triển.

• Microsoft: ASP, ASP.NET• Sun: Java Servelet, JSP.• Khác: PHP


ASP.NET

Cơ bản về .NET Frameworkvà ASP.NET


Kiến trúc .Net Framework

Base Class Library

Common Language Specification

Common Language Runtime

ADO.NET: Data and XML

Visual Studio.NET

ASP.NET: Web Servicesand Web Forms

WindowsForms

Visual Basic® C++ C# JScript® …


Mô hình thực thi

Visual BasicMã ngu nồ

Compiler

C++C#

CompilerCompiler

AssemblyIL Code

AssemblyIL Code

AssemblyIL Code

Operating System Services

Common Language Runtime

JIT Compiler

Native Code

Mã trunggian

UnmanagedComponent


Thực thi chương trình .NET

Mã ngu n ồ.NET P

hiên dịch

MSIL+

Siêu d li uữ ệ

Mã máy Th c thi ựmãC

LR

Biên d ch l n 1ị ầ

Biên d ch l n 2ị ầ

Ch ng trình .NET đ c d ch 2 l n – l n th nh t ch m, ươ ượ ị ầ ầ ứ ấ ậl n th hai nhanh h n nhi u!ầ ứ ơ ề


Ngôn ngữ trung gian của Microsoft

Mã ngu n ồ.NET P

hiên dịch

MSIL+

Siêu d li uữ ệ

Mã máy Th c thi mãự

CLR

MSIL

Ngôn ng tr giúp ữ ợliên tác

IL không ph i, nh ng r t ả ư ấg n bytecode. Do v y, khi ầ ậ

ng d ng đ c th c thi, ứ ụ ượ ựchuy n đ i t IL sang mã ể ổ ừmáy r t nhanh!ấ

MSIL đ c chuy n đ i ượ ể ổsang mã máy b i CLRở

T p các l nh đ c l p máyậ ệ ộ ậ


Thực thi ngôn ngữ chung

Mã ngu n ồ.NET P

hiên dịch

MSIL+

Siêu d li uữ ệ

Mã máy Th c thi mãự

CLR

CLR

Qu n lý b nhả ộ ớ

D dàng thi t k các ễ ế ếthành ph n và ng d ng ầ ứ ụv i nh ng đ i t ng ớ ữ ố ượđ c vi t t nhi u ngôn ượ ế ừ ềng khác nhauữ

Tích h p các ngôn ng ợ ữ(đ c bi t k th a gi a ặ ệ ế ừ ữcác ngôn ng )ữ

Biên d ch m t l n, và ch y trên ị ộ ầ ạb t kỳ CPU & OS nào có h tr ấ ỗ ợCLR!


ASP.NET - Kiến trúc

ASPX

.ASPX.ASPX



.ASPX.ASPXCompiledCompiled



.ASPX.ASPXCompiledCompiled


ASP.NET – Đặc điểm

• Hướng đối tượng: Mỗi trang bao gồm hai đối tượng kế thừa nhau.

• Tách mã giao diện (HTML) với mã xử lý bằng kỹ thuật Codebehind.

• ⇒ Dễ viết chương trình, tìm lỗi.• ⇒ Giấu được mã (mã được dịch

thành DLL).

.aspx .aspx.cs


Đối tượng Request

• Đối tượng Request nắm giữ HTTP request và cung cấp các phương thức xử lý HTTP request.

• Mỗi trang .aspx đều chứa đối tượng Request như một thuộc tính được kế thừa.

• Lấy đối tượng Request bằng lệnh this.Request• Hai thuộc tính và phương thức quan trọng nhất

của đối tượng Request là:– Lấy URL của tài liệu được yêu cầu:

this.Request.RawURL– Lấy giá trị các tham số được truyền cùng

URL: this.Request.QueryString.Get(“ten_thamso”);


Request – Nhận giá trị tham số (1)

• Giả sử các tham số được truyền cùng URL là

• http://uet.vnu.edu.vn/Bantin.aspx?cid=10&id=123• Trong Bantin.aspx.cs, chúng ta sử dụng

các câu lệnh sau để lấy giá trị cid và idint cid =

Convert.ToInt32(this.Request.QueryString.Get(“cid”));

int id = Convert.ToInt32(this.Request.QueryString.Get(“id”));


http://uet.vnu.edu.vn/Bantin.aspx?cid=10&id=123

Request – Nhận giá trị tham số (2)

• Giả sử các tham số trên form thuộc trang Nhap.aspx được truyền cùng URL theo phương thức POST là

<form action = “Kiemtra.aspx”><input type = “text” name = “hoten” width = “200”>

<input type = submit value = “Chap nhan”>

<form>

• Lấy họ tên do người dùng nhập (trong Kiemtra.aspx.cs)

String sHoten = this.Request.QueryString.Get(“hoten”);


Đối tượng Response

• Đối tượng Response được sử dụng để sinh ra HTTP response

• Mỗi trang .aspx đều chứa đối tượng Response như một thuộc tính được kế thừa.

• Lấy đối tượng Response bằng lệnh this.Response

• Hai phương thức quan trọng nhất của đối tượng Response là:

– Viết ra nội dung trang HTML: this.Response.Write(object);

– Chuyển sang một trang khác: this.Response.Redirect(url);


Đối tượng Response –Ví dụ

• this.Response.Write(“<h1>Xin chao</h1>”); sẽ in ra HTML một đề mục cấp 1 có nội dung “Xin chao”

• int a = 200;• this.Response.Write(a); sẽ in ra HTML

văn bản có nội dung “200”• this.Response.Redirect(“Bantin.aspx?

cid=10&id=123”); sẽ chuyển trình duyệt sang trang Bantin.aspx và truyền hai tham số có tên là cid, id cùng giá trị các tham số tương ứng là 10 và 123.


ASP.NET – Đặc điểm (2)

• Các điều khiển phía Server (server-side controls).

– Được lưu trữ và quản lý trên Server– Khi server xử lý, mỗi điều khiển phía server

sinh ra một điều khiển HTML (điều khiển phía client) rồi được gửi sang client.

– Ví dụ: ● <asp:Button id="Button1" runat="server"

Text="Tìm kiếm"></asp:Button>Khi được xử lý sinh ra điều khiển nút bấm HTML

● <input type = “button” name = “Button1” id = “Button1” value = “Tìm kiếm”>



• Các điều khiển phía Server (server-side controls).

– AutoPostBack cho từng điều khiển: Tự động đệ trình form chứa lên server khi giá trị của điều khiển thay đổi. Khi form được tự động đệ trình lên server, server xử lý rồi lại tự động gửi trang trở lại client.

● <asp:CheckBox id="CheckBox1" runat="server" AutoPostBack="True" ></asp:CheckBox>

– Để kiểm tra trang được tải (load) lần đầu hay do PostBack (gửi lại), chúng ta sử dụng thuộc tính IsPostBack của trang

● Nếu IsPostBack == false, trang được tải lần đầu● Ngược lại, trang được gửi lại.


ASP.NET – Hoạt động với điều khiển phía server có AutoPostBack = true

Yêu cầu lần thứ nhất

Trang kết quả xử lý

Tương tác với điều khiển trên giao diện

Trang với trạng thái điều khiển đã thay đổi

Trang kết quả xử lý thay đổi

Tương tác khác

ClientServer User

URL, tham số

…



• Với các điều khiển phía server và sử dụng đặc tính AutoPostBack của chúng, lập trình web được thực hiện tương tự lập trình ứng dụng trên máy đơn. Tất cả xử lý lập trình được thực hiện trên server – lập trình phía server (Dễ cài đặt).

• Tuy nhiên, client không phát huy hết tác dụng xử lý. (hạn chế)

• Trang liên tục được chuyển đi, chuyển lại giữa client và server => truyền thông tốn kém + không thân thiện với người dùng (nháy, không liên tục).


Thuộc tính trang IsPostBack

• IsPostBack là thuộc tính của System.Web.UI.Page là lớp cớ sở của bất kỳ trang nào

• IsPostBack = false: trang được tải lần đầu

• IsPostBack = true: trang được tải lại ở các lần hai, ba, …

• Thường sử dụng IsPostBack trong phương thức Page_Load để khởi tạo trạng thái ban đầu của trang.


Sự kiện Page_Load

• Load là sự kiện được phát sinh khi trang được tải về (load)

• Ở mỗi trang, phương thức private void Page_Load(object sender, System.EventArgs e)tự động được gọi để đáp ứng sự kiện Load.


Tạo giao diện trong ASP.NET

• Sử dụng các điều khiển phía server, bắt sự kiện nhờ AutoPostBack (dễ viết chương trình, chương trình hoạt động nặng nề)

– Điều khiển hiển thị– Điều khiển nhập liệu– Điều khiển kiểm tra

• Hoặc sử dụng các điều khiển phía client thông thường + AJAX (phải viết nhiều hơn, chương trình hoạt động nhẹ nhàng)


Các điều khiển phía server

• Điều khiển nội tại– ánh xạ trực tiếp đến các phần tử

HTML đơn giản• Điều khiển danh sách

– trình bày các mục dữ liệu ở dạng danh sách

• Điều khiển đa năng– tạo các thành phần điều khiển có

giao diện phức tạp• Điều khiển kiểm tra

– kiểm tra sự hợp thức trong nhập liệuKhi thực thi, mỗi điều khiển phía server sinh ra

một/một số phần tử HTML tương ứng + javascript kèm theo (nếu có)


Điều khiển phía server và phần tử HTML+javascript do chúng sinh ra

TT Đi u khi n phía serverề ể Ph n t HTML + javascript đ c sinh raầ ử ượ

1 <asp:Button id=“myid” text=“Button text” OnClick = “hàm C# or VB #” runat=server/>

<input type=“submit” value = “Button text” onclick=”Hàm javascript” ….>

2 <asp:LinkButton id=’someId’ Text=”some text” OnClick=” hàm C# or VB #” runat=server/>

<a id=”someId” href=” javascript:_doPostBack(….”> some text </a>

3 <asp:ImageButton id= ’someId’ ImageURL=”image file name” OnClick=” hàm C# or VB #” runat=server/>

<input type= “image” src=’file name’…>

4 <asp:HyperLink id=’someId’ NavigateURL=”an url” Text=”some text”

runat=server/>

<a id =”someId” href=”an url”>some text </a>

5 <asp:TextBox id=“name” runat=”server” Text=”some text”/>

<input type=“text” value=”some text”….>

6 <asp:TextBox id=“name” TextMode=“MultiLine” Text=”some text” runat=server/>

<textarea id=“name” ….>some text </textarea>



7 <asp:CheckBox id =”someId” Text=”some text” TextAlign=”left/right/center” Checked = “True/False”

OnCheckedChanged=”C# function” AutoPostBack=”True/False” runat=”server” />

<input type =”checkbox” … onchange=”javascript:...”>

8 <asp:RadioButton id =”someId” GroupName=”group name” Text=”some text” Checked = “True/False” OnCheckedChanged=”C# function” AutoPostBack=”True/False” runat=”server” />

<input type=”radio” name=”group name”… onchange=”javascript:...”>

9 <asp:DropDownList id =”someId” runat=”server” OnSelectedChange=”C# function” >

<asp:ListItem Value=”some string” selected=”True/False”>Item text </ asp:ListItem>

<asp:ListItem Value=”some string” selected=”True/False”>item text </ asp:ListItem>

</asp:DropDownList>M t s thu c tính và ph ng th c khác hay ộ ố ộ ươ ứ

đ c dùng:ượ.Items – m ng các m cả ụ.Items.Count – s m cố ụ.Items.Empty() – b t t c các m cỏ ấ ả ụ.Items.Add(ListItem item) – thêm m c m iụ ớ.Items.Add(“value”, “text”) – thêm m c m iụ ớ.Items[i]- l y m c th iấ ụ ứ.Items[i].Remove() – B m c th iỏ ụ ứ.SelectedItem- m c đ c ch nụ ượ ọ.SelectedItem.Value – giá tr c a m c đ c ị ủ ụ ượ

ch nọ.SelectedItem.Text - tên c a m c đ c ch nủ ụ ượ ọ.SelectedValue – giá tr c a m c đ c ch nị ủ ụ ượ ọ.SelectedName – tên c a m c đ c ch nủ ụ ượ ọ

<select name=”someId” onchange=”javascript:...”>

<option value=”some string” …> item text</option>


</select>

10 <asp:Image id = “some id” ImageURL=”image file name” AlternateText=”title text” runat=”server” />

<image src=”image file name” title=”title text”>

11 <asp:Label Text=”label text” runat=”server” />

<span>label text </span>

12 <asp:Panel id=”someId” runat=”server” /> <div>label text </div>

13 <asp:Table runat=”server” ><asp:TableRow><asp:TableCell>cell content</asp:TableCell></asp:TableRow></asp:Table>

<table><tr><td>cell content</td></tr></table>

14 <asp:AdRotator AdvertisementFile=”.xml file” OnAdCreated=”A_Create” runat=”server” />

.XML ad file<Advertisements><Ad><ImageURL>image file </ImageURL><TargetUrl> url </TargetUrl><AlternateText> title text </AlternateText><Keyword>a word </Keyword><Captain>some text</Captain></Ad><Ad><ImageURL>image file </ImageURL><TargetUrl> url </TargetUrl><AlternateText> title text </AlternateText><Keyword>a word </Keyword><Captain>some text</Captain></Ad><Advertisements>

Nhi u ph n t HTML và hàm javacsript ề ầ ửđ c t oượ ạ

15 <asp:Calendar runat=”server” OnSelectionChanged=”C# function” OnVisibleMonthChanged =”C# function” />











runat=server/>




















</select>




<span>label text </span>Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.









runat=server/>




















</select>






















runat=server/>




















</select>













16 <asp:CheckBoxList>Có các thu c tính và ph ng th c t a ộ ươ ứ ự

DropDownList

Danh sách các nút ki mể

17 <asp:RadioButtonList> Có các thu c tính và ph ng th c t a ộ ươ ứ ự

DropDownList

Danh sách các nút radio










runat=server/>




















</select>













16 <asp:CheckBoxList>Có các thu c tính và ph ng th c t a ộ ươ ứ ự

DropDownList

Danh sách các nút ki mể

17 <asp:RadioButtonList> Có các thu c tính và ph ng th c t a ộ ươ ứ ự

DropDownList

Danh sách các nút radio


Điều khiển kiểm tra nhập liệu

• ASP.NET có các điều khiển chuyên dùng để kiểm tra nhập liệu.

– Mỗi điều khiển kiểm tra nhập liệu (trừ điều khiển tổng hợp lỗi – ValidationSummary) dùng để kiểm tra dữ liệu được nhập vào một điều khiển nhập liệu (TextBox, RadioButton, CheckBox, …) theo một tiêu chí nào đó (buộc phải nhập, dữ liệu nhập phải nằm trong đoạn nào đó, dữ liệu nhập không thể là chữ, …)

Điều khiển nhập liệu Điều khiển

kiểm tra

Tiêu chí dữ liệu nhập

*



Điều khiểnnhập liệu 1

Điều khiểnnhập liệu 2

Điều khiểnnhập liệu n

Điều khiểnkiểm tra 1



Điều khiểnkiểm tra m

Báo c

áo lỗi

ValidationSummary



RequiredFieldValidator

CompareValidator

RangeValidator

RegularExpressionValidator

CustomValidator

Dữ liệu phảiđược nhập

So sánh dữ liệunhập

Dữ liệu nhập phải nằm trong khoảngnào đó

Dữ liệu nhập phải thỏa quy tắc miêu tả/cú pháp nào đó

Tự định nghĩa hàm kiểm tra

ValidationSummaryTổng hợp các báo

cáo lỗi


RequiredFieldValidator

• Kiểm tra dữ liệu được nhập vào điều khiển nhập liệu hay chưa<asp: RequiredFieldValidator

id=“myRFV” controlToValidate = “id_dieu_khien_duoc_kiem_tra” errorMessage = “Thong bao loi neu khong nhap” display = “static|dynamic|none” runat=server>

</asp: RequiredFieldValidator>


CompareValidator

• So sánh dữ liệu được nhập với giá trị định trước hoặc với giá trị của điều khiển khác<asp: CompareValidator id=“myCV”

controlToValidate = “id_dieu_khien_duoc_kiem_tra” controlToCompare = “id_dieu_khien_duoc_so_sanh” type = “String|Integer|Double|DateTime|Currency” operator = “Equal|NotEqual|Greater|…|DataTypeCheck” errorMessage = “Thong bao loi neu bieu thuc so sanh sai” display = “static|dynamic|none” runat=server>

</asp: CompareValidator>


RangeValidator

• Kiểm tra dữ liệu được nhập có giá trị trong khoảng xác định<asp: RangeValidator id=“myRV”

controlToValidate = “id_dieu_khien_duoc_kiem_tra” type = “String|Integer|Double|DateTime|Currency” minimumValue = “giá trị bé nhất” maximumValue = “giá trị lớn nhất” errorMessage = “Thông báo lỗi nếu giá trị nhập

ngoài khoảng” display = “static|dynamic|none” runat=server>

</asp: RangeValidator >Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

RegularExpressionValidator

• Kiểm tra dữ liệu được nhập có đúng theo một định dạng được mô tả hay không

<asp: RegularExpressionValidator id=“myREV” controlToValidate = “id_dieu_khien_duoc_kiem_tra” validationExpression = “Biểu thức mô tả định dạng dữ liệu nhập” errorMessage = “Thong bao loi neu khong nhap” display = “static|dynamic|none” runat=server>

</asp: RegularExpressionValidator >

Biểu thức kiểm tra là một xâu ký tự mô tả định dạng dữ liệu được nhập,

sử dụng các ký pháp: . - Một ký tự bất kỳ, * - Một chuỗi ký tự bất kỳ, \d - Một chữ số, [s1-s2] - Một ký tự từ s1 đến s2, …


CustomValidator

• Kiểm tra dữ liệu được nhập bằng một hàm tự định nghĩa<asp: CustomValidator id=“myREV” controlToValidate = “id_dieu_khien_duoc_kiem_tra” onServerValidationFunction = “Hàm kiểm tra trên Server, bằng

C# hay VB.NET” onClientValidationFunction = “Hàm kiểm tra trên Client, bằng

JavaScript” errorMessage = “Thong bao loi neu khong nhap” display = “static|dynamic|none” runat=server></asp: CustomValidator >


Thuộc tính Page.isValid• Ban đầu Page.isValid = true• Nếu các điều khiển kiểm tra bắt được lỗi, chúng

sẽ đặt Page.isValid = false.• Sử dụng:

if (Page.isValid){

//Xử lý nghiệp vụ thông thường

}else{

//Xử lý lỗi

}


ADO.NET

Kiến trúc ADO.NETTruy vấn, cập nhật phổ biến


ADO.NET – Kiến trúc

_Connection

_Command Parameter

_DataAdapter DataSet

DataTable

.Connection

_Parameter

.Parameters

.SelectCommand

.InsertCommand

.DeleteCommand

.UpdateCommandDataTable

.Tables

. Fill()

_: Sql, Odbc, OleDb

_DbType

<<uses>>


ADO.NET – Các gói

• System.Data Các lớp dữ liệu• System.Data.Common Các lớp chung• System.Data.Odbc Các lớp làm việc với

CSDL thông qua ODBC• System.Data.OleDb Các lớp làm việc với

CSDL thông qua OLEDB• System.Data.SqlClient Các lớp làm việc

với CSDL SQL Server• System.Data.SqlTypes Các lớp định kiểu

dữ liệu SQL


ADO.NET – DataSet

AuthorsAuthorsConnection

Database

DataAdapter

DataSet

Select … from Authors

Authors


ADO.NET - DataSet

PublishersPublishersConnection

Database

DataAdapter

DataSet

Select … from Publishers

Authors

Publishers


ADO.NET – Kết nối CSDL SQL Server

• String sConn = “server=Hudevelop; database=Daotao; uid=sa; pwd=sa;“;

• SqlConnection m_Conn = new SqlConnection(sConn);

• m_Conn.Open();


ADO.NET – Quy trình cập nhật dữ liệu

• Dùng _Connection để kết nối CSDL• Đặt thuộc tính _Command.Connection là

kết nối đã mở• Đặt kiểu lệnh và nội dung lệnh cho

_Command. CommandType và _Command. CommandText

• Tạo các tham số _Parameter và thêm vào đối tượng _Command

• Thực thi _Command. ExecuteNonQuery()


Quy trình cập nhật dữ liệu – Ví dụ

String sConn = “server=Hudevelop; database=Daotao ;uid=sa ;pwd=sa;”;SqlConnection m_Conn = new SqlConnection(sConn);m_Conn.Open();

SqlCommand m_Cmd = new SqlCommand();m_Cmd.Connection= m_Conn;

m_Cmd.CommandType= System.Data.CommandType.StoredProcedure;m_Cmd.CommandText= "SINHVIEN_THEM";

m_Cmd.Parameters.Clear();m_Cmd.Parameters.Add(new SqlParameter("@maSinhvien", SqlDbType.NVarChar));m_Cmd.Parameters["@maSinhvien"].Value= maSinhvien;m_Cmd.Parameters.Add(new SqlParameter("@hoSinhvien", SqlDbType.NVarChar));m_Cmd.Parameters["@hoSinhvien"].Value= hoSinhvien;m_Cmd.Parameters.Add(new SqlParameter("@tenSinhvien", SqlDbType.NVarChar));m_Cmd.Parameters["@tenSinhvien"].Value= tenSinhvien;m_Cmd.Parameters.Add(new SqlParameter("@ngaysinh", SqlDbType.DateTime));m_Cmd.Parameters["@ngaysinh"].Value= ngaysinh;m_Cmd.Parameters.Add(new SqlParameter("@gioitinh", SqlDbType.TinyInt));m_Cmd.Parameters["@gioitinh"].Value= gioitinh;

m_Cmd.ExecuteNonQuery();m_Conn.Close();


ADO.NET – Quy trình truy vấn dữ liệu

• Dùng _Connection để kết nối CSDL.• Đặt thuộc tính _Command.Connection là kết nối

đã mở.• Đặt kiểu lệnh và nội dung lệnh cho _Command.

CommandType và _Command. CommandText.• Tạo các tham số _Parameter và thêm vào đối

tượng _Command.• Tạo đối tượng _DataAdapter và chỉ định thuộc

tính .SelectCommand là đối tượng _Command.• Gọi _DataAdapter.Fill() để điền kết quả truy vấn

vào_DataSet.• Truy nhập thuộc tính _DataSet.Tables[] để lấy ra

từng _DataTable trong _DataSet.• Truy nhập thuộc tính _DataTable.Rows[] để lấy ra

từng hàng trong bảng, và dùng tên cột hay thứ tự cột để đọc dữ liệu trong từng ô.


Quy trình truy vấn dữ liệu – Ví dụString sConn = “server=Hudevelop; database=Daotao ;uid=sa ;pwd=sa;”;SqlConnection m_Conn = new SqlConnection(sConn);m_Conn.Open();SqlCommand m_Cmd = new SqlCommand();m_Cmd.Connection= m_Conn;m_Cmd.CommandType= System.Data.CommandType.StoredProcedure;m_Cmd.CommandText= "SINHVIEN_MO_THEO_LOP";m_Cmd.Parameters.Clear();m_Cmd.Parameters.Add(new SqlParameter("@maLopSV", SqlDbType.Int));m_Cmd.Parameters["@maLopSV"].Value= maLopSV;SqlDataAdapter da= new SqlDataAdapter(m_Cmd);DataSet m_DataSet = new DataSet();da.Fill(m_DataSet, "Sinhvien");DataTable m_Sinhvien = new DataTable();m_Sinhvien = m_DataSet.Tables[0];m_MaSinhvien = m_Sinhvien.Rows[m_BanghiHientai]["maSinhvien"].ToString();m_HoSinhvien = m_Sinhvien.Rows[m_BanghiHientai]["hoSinhvien"].ToString();m_TenSinhvien = m_Sinhvien.Rows[m_BanghiHientai]["tenSinhvien"].ToString();m_Ngaysinh = Convert.ToDateTime(m_Sinhvien.Rows[m_BanghiHientai]

["ngaysinh"].ToString())


DataReader

• Khi chỉ cần mở một truy vấn, duyệt một lần kết quả truy vấn mà không phải tạo nhiều DataTale, chúng ta có thể sử dụng DataReader (SqlDataReader hoặc ADODataReader)

• DataReader chứa các bản ghi dưới dạng danh sách– Thực thi câu lệnh và đưa dữ liệu vào DataReader:

dr = m_Command.ExecuteReader();– Sử dụng phương thức .Read() để duyệt lần lượt bản

ghi.– Sử dụng .GetSqlXXX(index) để đọc giá trị trường dữ

liệu của bản ghi hiện tại.


DataReader – Ví dụ

SqlConnection m_Conn = new SqlConnection("server=quantri; database=k6; uid=sa; pwd=;");

m_Conn.Open();

SqlCommand m_Command= new SqlCommand();

m_Command.Connection = m_Conn;

m_Command.CommandType = System.Data.CommandType.StoredProcedure;

m_Command.CommandText = "LOP_LAYCA";

SqlDataReader dr = m_Command.ExecuteReader();

while (dr.Read())

{

this.Response.Write(dr.GetSqlInt32(0));

this.Response.Write(" ");

this.Response.Write(dr.GetSqlString(1));

this.Response.Write("<br>");

}Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Ghi dữ liệu ra tệp XML

DataSet ds = new DataSet();…..ds.WriteXml(“abcfile.xml”);

<root><DocumentElement>

<Abc></Abc><Abc></Abc>

</DocumentElement></root>

Mẫu trang tài liệu XML, Abc là các phần tử dữ liệu


Lấy dữ liệu từ tệp XML

• Mở tệp tài liệu XMLFileStream fs = new FileStream(“abc.xml”,

FileMode.Open, FileAccess.Read);StreamReader srd = new StreamReader(fs);

• Đọc tài liệu vào DataSetDataSet ds = new DataSet();ds.ReadXml(srd);DataTable dt = ds.Tables(“Abc”);

• Đóng tệpfs.Close();

<root><DocumentElement>

<Abc></Abc><Abc></Abc>

</DocumentElement></root>

Mẫu trang tài liệu XML, Abc là các phần tử dữ liệuLê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Tạo giao diện bằng các điều khiển giao diện có ràng buộc dữ liệu

Sử dụng các đối tượng ASP.NET có thể

đọc nguồn dữ liệu và tự động sinh mã giao diện


Ràng buộc dữ liệu – Data Bind

Điều khiển giao diện

(DropDownListCheckBoxList

RadioButtonListDataListDataGridRepeaterTemplate)

Ràng buộc

Tự xử lý dữ liệu để sinh ra điều khiển web (HTML)

• Ý tưởng: Gắn một tập dữ liệu được chứa ở một nguồn nào đó (mảng, danh sách, bảng dữ liệu, …) vào một điều khiển giao diện, ASP.NET tự động xử lý các khâu còn lại để hiển thị dữ liệu.

● uic.DataSource = ds;● uic.DataBind();

uic là điều khiển GD, ds là nguồn dữ liệu

Nguồn dữ liệu(mảng, danh sách, bảng dữ liệu, …)


DropDownList

<%…DataTable m_Table = new DataTable();

m_Table = m_DataSet.Tables["TatcaLop"];

DropDownList1.DataSource = m_Table;

DropDownList1.DataTextField = "tenLop";

DropDownList1.DataValueField = "maLop";

DropDownList1.DataBind();

%><asp:DropDownList id=“DropDownList1”

runat=server/>

this.Response.Write(DropDownList1.SelectedItem.Value);this.Response.Write(DropDownList1.SelectedItems.Text);


CheckBoxList

<%

…

DataTable m_Table = new DataTable();


CheckBoxList1.DataSource = m_Table;

CheckBoxList1.DataTextField = "tenLop";

CheckBoxList1.DataValueField = "maLop";

CheckBoxList1.DataBind();%><asp:CheckBoxList id=“CheckBoxList1” ProductID”

runat=server/>

for (int i = 0; i< CheckBoxList1.Items.Count; i++)if (CheckBoxList1.Items[i].Selected){ this.Response.Write(CheckBoxList1.Items[i].Value); this.Response.Write(CheckBoxList1.Items[i].Text);}


RadioButtonList

<%

…

DataTable m_Table = new DataTable();


RadioButtonList1.DataSource = m_Table;

RadioButtonList1.DataTextField = "tenLop";

RadioButtonList1.DataValueField = "maLop";

RadioButtonList1.DataBind();%><asp:RadioButtonList id=“RadioButtonList1”

ProductID” runat=server/>

for (int i = 0; i< RadioButtonList1.Items.Count; i++)if (RadioButtonList1.Items[i].Selected){ this.Response.Write(RadioButtonList1.Items[i].Value); this.Response.Write(RadioButtonList1.Items[i].Text);}


Mẫu hiển thị - Template

• HeaderTemplate– Định mẫu tiêu đề

• ItemTemplate– Định mẫu các mục hiển thị

• AlternatingItemTemplate– Định mẫu mục xen kẽ

• SeperatorItemTemplate– Định mẫu cách mục

• FooterTemplate– Định mẫu chân đề

Có thể cung cấp template cho các điều khiển giao diện và ràng buộc dữ liệu DataGrid,

DataList, Repeater để các điều khiển này hiển thị dữ liệu

theo mẫu<_Template>//Đoạn mã xác định mẫu, định dạng hiển thị</_Template>


Repeater• Ràng buộc dữ liệu và hiển thị dữ liệu được ràng

buộc theo mẫu<asp:Repeater id="Repeater1" runat="server">

<HeaderTemplate><table width="100%">

<tr bgcolor=#ccffff><td>Mã lớp</td><td>Tên lớp</td>

</tr></HeaderTemplate>

<ItemTemplate><tr><td>

<%#DataBinder.Eval(Container.DataItem, "malop")%></td> <td><%#DataBinder.Eval(Container.DataItem, "tenLop")%>

</td></tr></ItemTemplate><FooterTemplate> </table> </FooterTemplate>

</asp:Repeater>Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

DataList

• Ràng buộc dữ liệu và hiển thị dữ liệu được ràng buộc dưới dạng danh sách.

<asp:DataList id="DataList1" runat=“server” RepeatDirection = Horizontal RepeatColumns = 4>

<ItemTemplate>

<%#DataBinder.Eval(Container.DataItem, "malop")%>

<%#DataBinder.Eval(Container.DataItem, "tenLop")%>

</ItemTemplate>

</asp:DataList>


Lưới dữ liệu – DataGrid

• Dùng để ràng buộc dữ liệu và hiển thị dưới dạng bảng<asp:DataGrid id=“dtgrid1” GridLine=“None”

HeaderStyle-BackColor=“green” runat=“server”>

dtgrid.DataSource = ds.Tables(“TenBang”);dtgrid.DataBind();

• Khi được buộc nguồn dữ liệu, DataGrid tự động phân tích các trường, đọc các bản ghi dữ liệu và hiển thị trong một bảng (<table>…</table>).


DataGrid – Sử dụng BoundColumn

• Để thay đổi các cột như tiêu đề các cột, thứ tự hiển thị các cột, chúng ta tắt chế độ tự động sinh cột của DataGrid và dùng <asp:BoundColumn> của DataGrid để định nghĩa cột của bảng.<asp:DataGrid id=“dtgrid1” runat=“server”

AutoGenerateColumns = “false”><Columns>

<asp:BoundColumn HeaderText=“abc def” DataField = “abcField” ReadOnly=“True/False”/>

</Columns></asp:DataGrid>


DataGrid – Sử dụng TemplateColumn

• Theo mặc định, dữ liệu được hiển thị ở dạng văn bản.

• Sử dụng mẫu cột <asp:TemplateColumn> và <_Template> để thay đổi cách hiển thị nội dung của cột.

<asp:DataGrid id=“MyGrid” AutoGenerateColumns = “false’ runat=“server”>

<Columns>

<asp:TemplateColumn HeaderText=“abc def”>

<ItemTemplate><asp:Image ImageURL=‘<

%#DataBinder.Eval(Container.DataItem, “tenTruongDL”)’ runat=“server”>

</ItemTemplate>

</asp:TemplateColumn>

</Columns>

</asp:DataGrid>


DataGrid – Cập nhật dữ liệu

• Dùng <asp:EditCommandColumn> để định nhãn cho các nút lệnh<Columns>

<asp:EditCommandColumn EditText = “Sửa” UpdateText = “Chấp nhận” CancelText = “Bỏ qua” IntemStyle-Wrap = “false”/>

</Columns>



• Sử dụng <asp:TemplateColumn> với <EditItemTemplate> để tạo giao diện cập nhật

<asp:TemplateColumn HeaderText="Tên lớp"><ItemTemplate> <%#DataBinder.Eval(Container.DataItem, "tenLop")%>

</ItemTemplate><EditItemTemplate>

<asp:TextBox Runat=server ID="hoten" Text = '<%#DataBinder.Eval(Container.DataItem, "tenLop")%>'/>

</EditItemTemplate></asp:TemplateColumn>



• Chỉ định các hàm sự kiện cập nhật dữ liệu<asp:DataGrid id=“MyGrid” runat=“server”

OnEditCommand = “Ham_Xuly_Khi_Chon_Suadoi” OnUpdateCommand = “Ham_Xuly_Khi_Chon_Capnhat”

OnCancelCommand = “Ham_Xuly_Khi_Ch_Bo_Capnhat” DataKeyField = “Truong_Khoa_Cac_Banghi_Dulieu”

AutoGenerateColumn = “false”>

• Thiết kế hàm để ràng buộc dữ liệu vào DataGrid, ví dụ hàm này tên là BindGrid().



• Viết các hàm xử lý các sự kiện Ham_Xuly_Khi_Chon_Suadoi (Object sender,

DataGridCommandEventArgs e){

MyGrid.EditItemIndex = e.Item.ItemIdex;BindGrid(); //ràng buộc lại dữ liệu vào khung lưới

}Ham_Xuly_Khi_Ch_Bo_Capnhat (Object sender,


MyGrid.EditItemIndex = -1;BindGrid(); //ràng buộc lại dữ liệu vào khung lưới

}



• Viết các hàm xử lý các sự kiện Ham_Xuly_Khi_Chon_Capnhat (Object sender,


e.Item.FindControl(“idxxx”) trả về điều khiển nhập liệu, được sử dụng để đọc giá trị do người dùng nhập vào.

MyGrid.DataKeys[e.Item.ItemIndex] là khóa của bản ghi được sửa.BindGrid(); //ràng buộc lại dữ liệu vào khung lưới


DataGrid – Sử dụng ButtonColumn

• Có thể sử dụng <ButtonColumn> tạo nút chọn xóa.

<asp:DataGrid id=“MyGrid” runat=“server” OnDeleteCommand = “ChonXoa”><Columns>

<asp:ButtonColumn CommandName="Delete" Text="Xóa"></asp:ButtonColumn>…

void ChonXoa(object sender, DataGridCommandEventArgs e)

{MyGrid.DataKeys[e.Item.ItemIndex] là khóa của bản ghi được chọn xóa

}


DataGrid – Phân trang

• Viết các hàm xử lý các sự kiện <asp:DataGrid id="DataGrid1“ runat = "server"

AutoGenerateColumns = "False" AllowPaging="True" PageSize="5"

PagerStyle-PrevPageText="Trang trước"

PagerStyle-NextPageText="Trang sau"

PagerStyle-Mode=NumericPages

OnPageIndexChanged="ThayTrang“>

void ThayTrang(object sender, DataGridPageChangedEventArgs e)

{

DataGrid1.CurrentPageIndex = e.NewPageIndex;

DataBind();


Thiết kế trang dùng lại

User Control


User control (pagelet)

• Usercontrol (tệp .ascx) là mẫu trang/điều khiển người dùng cho phép dùng lại mã.

• Các bước:– Tạo user control– Đăng ký user conrol– Sử dụng user control


Tạo User control

• User control (.ascx) tương tự một trang .aspx, chỉ khác không chứa thẻ <html> và <body>.

– User conrol là một phần trang web, được nhúng vào trang .aspx.


Đăng ký và sử dụng user control

• Tại trang .aspx muốn sử dụng user control<%@Register TagPrefix = “MyPrefix”

TagName = “MyName” src = “mypagelet.ascx” %>• Sau khi được đăng ký, user control

trở thành một đối tượng COM và được sử dụng như các điều khiển giao diện khác (TextBox, RadioButton, …)

<myPrefix:myName id = “myID” runat = “server”>Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Thêm thuộc tính và phương thức cho user control

• Vì pagelet là đối tượng COM, ta có thể định nghĩa các thuộc tính và phương thức cho user controlpublic string MyProPerty

{

get

{

return m_field;

}

set

{

m_field = value

}

}

public void myFunction()

{

}

<myPrefix:myName id = “myID” MyProperty = “abc…”>

<%myName.MyProperty =

“def…”myName.myFunction();%>


Cấu hình ứng dụng

Global.ASAXWeb.config


Global.ASAX

• Các phương thức xử lý sự kiện:– Application_Start– Application_End– Session_Start– Session_End

• Các biến– Session– Application

Các biến Application có phạm vi toàn ứng dụng, được dùng để thiết lập các

thuộc tính chung cho ứng dụng, ví dụ số lần truy cập.

Các biến Session có phạm vi trong mộtphiên, được dùng để thiết lập các thuộc

tính phiên, ví dụ định danh người sử dụng.

Sử dụng biến ứng dụng:Session(“tenBienPhien”) = “abc..”;

Sử dụng biến ứng dụng:Application(“tenBienUngdung”) = “abc..”;


Web.config

• Định dạng XML– Có thể mở rộng– Một số thiết lập

● An ninh● Phiên● Cục bộ hóa● Lần vết● Bắt lỗi● Ứng dụng


Thiết lập cấu hình với Web.config

• Web.config là một tệp xml được sử dụng để thiết lập các tham số cấu hình.

• Một trong những ứng dụng quan trọng của Web.config là khai báo các thông số toàn cục để sử dụng chúng trong ứng dụng.


Cấu trúc Web.config<?xml version="1.0" encoding="utf-8"?><configuration> <system.web>

<compilation defaultLanguage="c#" debug="true></compilation><customErrors mode="Off"/> <authentication mode="Windows" /> <authorization>

<allow users="*" /></authorization><trace enabled="false" requestLimit="10" pageOutput="false" traceMode="SortByTime" localOnly="true"/><sessionState mode="InProc" stateConnectionString="tcpip=127.0.0.1:42424" sqlConnectionString="data source=127.0.0.1;Trusted_Connection=yes" cookieless="false" timeout="9000"/><globalization requestEncoding="utf-8" responseEncoding="utf-8"/>

</system.web> <appSettings>

<add key="Constring" value="server=AT;database=Vidu;uid=sa;pwd=;"/>

</appSettings></configuration>


Sử dụng Web.config• ASP.NET cung cấp lớp System.Configuration

.ConfigurationSettings tự động xử lý nội dung Web.config

• Trong Web.config, ta định nghĩa các thông số, ví dụ <appSettings>

<add key=“constring" value="server=AT; database=Vidu; uid=sa; pwd=;"/>

</appSettings>• Khi cần sử dụng tham số trong

Web.config

using System.Configuration;

string sConn = ConfigurationSettings.AppSettings["constring"];


Xác thực người dùng

• Trong Web.config<authentication mode="Forms">

<forms loginUrl="login.aspx"></forms></authentication> <authorization><!– Tu choi nguoi dung chua xac thuc -->

<deny users="?"/> </authorization>

• Trong login.aspx.csSau khi cho người dùng đăng nhập, kiểm tra

trong CSDL.FormsAuthentication.RedirectFromLoginPage(ten

DN, false);Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Tiếp theoỨng dụng CSDL trên nền

web


Documents

PHÁT TRIỂN ỨNG DỤNG WEB · PDF filePHÁT TRIỂN ỨNG DỤNG WEB. Công nghệ ASP.NET ... đ c vi t t nhi u ngôn ượ ế ừ ... • Hoặc sử dụng các điều khiển