tổng quan về asp.net 3s1.downloadmienphi.net/file/downloadfile8/173/1317272.pdf · microsoft...

Tổng quan về ASP.NET 3.5

MỤC LỤC

1. ASP.NET là gì? .................................................................................................................. 2

1.1 ASP.NET tích hợp với NET Framework ..................................................................................... 2

1.2 ASP.NET là đa ngôn ngữ ............................................................................................................. 2

1.3 ASP.NET là hướng đối tượng (Object-Oriented) ........................................................................ 2

1.4 ASP.NET được biên dịch ............................................................................................................. 2

1.5 ASP.NET được lưu trữ trên máy bởi Common Language Runtime ............................................ 3

1.6 ASP.NET dễ dàng triển khai và cấu hình .................................................................................... 3

2. Các tính năng mới trong ASP.NET 3.5 ............................................................................ 3

2.1 ASP.NET AJAX .......................................................................................................................... 4

2.2 Các Control mới ........................................................................................................................... 4

2.3 LINQ ............................................................................................................................................ 4

2.4 Các Assembly mới ....................................................................................................................... 4

2.5 ASP.NET Dynamic Data ............................................................................................................. 4

2.6 ASP.NET MVC (Model View Control) ...................................................................................... 4

3. Cách tạo trang web trong Visual Studio 2008 ................................................................ 5

3.1 Khởi động Visual Studio 2008 hoặc Visual Web Developer 2008 (hình 1) ................................ 5

3.2 Cách tạo dự án mới ...................................................................................................................... 5

3.3 Ví dụ 1 .......................................................................................................................................... 7

4. Giới thiệu về sự kiện (Event) trong ASP.NET ................................................................. 9

4.1 Một số tệp cơ bản trong ASP.NET .............................................................................................. 9

4.2 Chu kỳ sống của trang web trong ASP.NET (ASP.NET Page Life Cycle) ................................ 9

4.3 Một số các sự kiện của trang web (Page Event) .......................................................................... 9

4.4 Sự kiện ứng dụng (Event Application) ...................................................................................... 10

5. Tài liệu tham khảo ........................................................................................................... 11

Microsoft Vietnam – DPE team |Bài mở đầu: Giới thiệu tổng quan về ASP.NET 3.5 2

Bài mở đầu

GIỚI THIỆU TỔNG QUAN VỀ ASP.NET 3.5

Bài này giới thiệu tổng quan về công nghệ ASP.NET 3.5 (Active Server Page). ASP.NET là gì? Giới

thiệu những tính năng mới của ASP.NET 3.5 sơ với ASP.NET 2.0. Cách tạo website trong Visual Studio 2008.

1. ASP.NET là gì?

Trước hết, tên đầy đủ của ASP.NET là Active Server Pages .NET (.NET ở đây là .NET framework). Nói

đơn giản thì ASP.NET là một công nghệ có tính cách mạng dùng để phát triển các ứng dụng về mạng hiện nay

cũng như trong tương lai. Bạn lưu ý ở chổ ASP.NET là một phương pháp tổ chức hay khung tổ chức (framework)

để thiết lập các ứng dụng hết sức hùng mạnh cho mạng dựa trên CLR (Common Language Runtime).

1.1 ASP.NET tích hợp với NET Framework

.NET Framework được chia thành bộ các tác vụ cho từng chức năng gồm các lớp (class), các cấu trúc

(structures), các giao diện (interfaces) và các lõi (core) thành phần chương trình. Trước khi sử dụng thành phần

nào bạn phải hiểu cơ bản về chức năng, các tổ chức của nó. Mỗi một trong hàng nghàn các tầng lớp được nhóm

theo trình tự logic, thứ bậc được gọi là một namespace. Mỗi namespace cung cấp một tính năng.

1.2 ASP.NET là đa ngôn ngữ

Để xây dựng một ứng dụng web chúng ta không chỉ chọn một ngôn ngữ mà có thể chọn nhiều ngôn ngữ

khác. Điều quan trọng là các ngôn ngữ chúng ta chọn mã của nó dịch được ra mã IL. Điều đó có nghĩa là IL là

ngôn ngữ của .NET và chỉ có CLR nhận biết được IL.

1.3 ASP.NET là hướng đối tượng (Object-Oriented)

ASP.NET là ngôn ngữ lập trình hướng đối tượng sử dụng các ngôn ngữ .NET. Nó cung cấp bộ các đối

tượng nhỏ và thực sự là một tầng làm việt trên nguyên lý của HTTP và HTML. Mã nguồn của chúng ta không

được truy cập toàn bộ các đối tượng trong .NET Framework nhưng có thể khai thác tất cả các quy ước của một

môi trường OOP (Object Oriented Programming). Chúng ta có tạo các lớp, giao diện, kế thừa các lớp… Chúng ta

có thể kiểm soát được các đối tượng trong chương trình như hiển thị dữ liệu và các sự kiện của đối tượng.

1.4 ASP.NET được biên dịch

Một ứng dụng ASP.NET luôn luôn được biên dịch, nó không chạy bằng mã của C# hoặc Visual Basic mà

không được biên dịch trước. Một ứng dụng ASP.NET thực sự được biên dịch thông qua 2 giai đoạn:

Giai đoạn đầu tiên những các mã (code) bạn viết (C#, Visual Basic hoặc ngôn ngữ .NET khác)

được dịch bởi Microsoft Intermediate Language (MSIL). Giai đoạn dịch này được dịch tự

động khi trang wed đầu tiên yêu cầu. Chúng ta có thể thực hiện dịch trước. Các tệp được dịch

thành mã IL (Intermediate Language Code).

Giai đoạn tiếp theo được dịch trước khi trang Web được thực thi. Tại giai đoạn này mã IL được

dịch thành bản mã máy (Native Machine Code). Giai đoạn này được gọi là Just-In-Time (JIT).


1.5 ASP.NET được lưu trữ trên máy bởi Common Language Runtime

Khía cạnh quang trọng nhất của công cụ ASP.NET là nó chạy trong môi trường thời gian thực (Runtime)

của CLR (Common Language Runtime). CLR là máy ảo (virtual machine) trong Microsoft .NET, do có ngôn

ngữ trung gian IL nên khi phát triển ứng dụng trên .NET, chúng ta không bị phụ thuộc vào thiết bị, có nghĩa là

theo Microsoft nói thì ứng dụng .NET có thể chạy trên bất kỳ thiết bị nào có .NET Framework. Tất cả các

namespace, các ứng dụng, các lớp trong bộ .NET Framework được gọi tắt là bộ quản lý mã. CLR cũng cung cấp

các dịch vụ quan trọng khác như:

Quản lý bộ nhớ

Thu nhặt rác

Quản lý các tuyến

Xử lý ngoại lệ

An toàn

1.6 ASP.NET dễ dàng triển khai và cấu hình

Mọi sự cài đặt .NET Framework đều cung cấp các lớp như nhau. Để triển khai ứng dụng ASP.NET

chúng ta chỉ cần sao chép các tập tin vào thư mục ảo trên máy chủ (server) và máy chỉ chỉ cần có .NET

Framework.

Việc cấu hình dễ dàng đơn giản không phụ thuộc vào IIS (Internet Information Services). Cấu hình trong

ASP.NET được đặt trong tệp web.config. Tệp web.config được để cùng với thư mực chứa trang web của chúng

ta. Tệp web.config không bao giờ bị khóa, chúng ta có thể truy cập bất kỳ lúc nào, việc sửa tệp này hoàn toàn dễ

dạng vì chúng được lưu dưới dạng XML.

2. Các tính năng mới trong ASP.NET 3.5

Microsoft phát hành ASP.NET vào ngày 19 tháng 11 năm 2007 cùng với Visual Stutio 2008. Đây là

bước tiến hóa từ ASP.NET 2.0 tới ASP.NET 3.5. Nếu chúng ta đang sử dụng ASP.NET 2.0 để sử dụng ASP.NET

3.5 chỉ cần cài đặt thêm các tính năng mới của ASP.NET 3.5.

Code in VB.NET

VB.NET Compiler

Code in Another

.NET Language

Appropriate Compiler

Code in C#

C# Compiler

IL (Intermediate

Language) Code

Just-In-Time (JIT) Compiler

Native Machine

Code

Execute

The Common

Language Runtime


Trong phần này sẽ giới thiệu một số tính năng mới trong ASP.NET 3.5

2.1 ASP.NET AJAX

Trong ASP.NET 2.0, ASP.NET AJAX được cài đặt thêm vào. Tuy nhiên trong ASP.NET 3.5, ASP.NET

AJAX đã được tích hợp. vào trong .NET Framework, do đó quá trình xây dựng giao diện người dùng được dễ

dàng và trực quan. ASP.NET AJAX Control Extenders đã được tích hợp ToolBox của Visual Studio 2008. Các

tính năng của ASP.NET AJAX sẽ được trình bày ở bài sau.

2.2 Các Control mới

Các control ListView và DataPager có thể dùng mới kiểu dữ liệu mới LinqDataSource.

ListView linh hoạt hơn và có chứa toàn bộ tính năng của Gridview, Datagrid, Repeater trong

ASP.NET 2.0. Nó cung cấp các khả năng và chèn, xóa, sửa, sắp xếp, phân trang. Chúng ta hoàn toàn định dạng

được việc dữ liệu hiển thị trên ListView mà không cần phải sử dụng thẻ <table>. Các Template trong ListView

rất phong phú và đa dạng. Datager cung cấp cho ListView trong việc phân trang.

2.3 LINQ

LINQ (Language Integrated Query) đưa ra khả năng lập trình mới trong .NET. Giải pháp lập trình hợp

nhất, đem đến khả năng truy vấn dữ liệu theo cú pháp SQL trực tiếp trong C# hay VB.NET, áp dụng cho tất cả

các dạng dữ liệu từ đối tượng đến Cơ sở dữ liệu quan hệ và XML.

ASP.NET LinqDataSource cho phép chúng ta có thể sử dụng LINQ để lọc (filter), order và nhóm (group)

dữ liệu trước khi binding vào List Control.

2.4 Các Assembly mới

System.Core.dll – Các implementation cho LINQ to Objects

System.Data.Linq.dll - Các implementation cho LINQ to SQL

System.Xml.Linq.dll - Các implementation cho LINQ to XML

System.Data.DataSetExtensions.dll - Các the implementation cho LINQ to DataSet

System.Web.Extensions.dll: Các implementation for ASP.NET AJAX

2.5 ASP.NET Dynamic Data

ASP.NET Dynamic Data cung cấp một Framework cho phép chúng ta nhanh chóng xây dựng một chức

năng ứng dụng driver-data, dựa trên LINQ to SQL hay Entity Framework. Nó cũng có thêm nhiều tính linh hoạt

cho các DetailsView, FormView, GridView, ListView trong kiểm tra tính hợp lệ của dữ liệu, hoặc chỉnh sửa lại

các mẫu để thay đổi cách hiển thị dữ liệu.

2.6 ASP.NET MVC (Model View Control)

Kiến trúc MVC là việc chia tất cả mục của một ứng dụng ra làm ba thành phần (component) khác nhau

Model, View và Controller:

Model: Model được giao nhiệm vụ cung cấp dữ liệu cho cơ sở dữ liệu và lưu dữ liệu vào các kho chứa

dữ liệu. Tất cả các nghiệp vụ logic được thực thi ở Model. Dữ liệu vào từ người dùng sẽ thông qua View được

kiểm tra ở Model trước khi lưu vào cơ sở dữ liệu. Việc truy xuất, xác nhận, và lưu dữ liệu là một phần của

Model.

View: View hiển thị các thông tin cho người dùng của ứng dụng và được giao nhiệm vụ cho việc nhận

các dữ liệu vào từ người dùng, gửi đi các yêu cầu đến bộ điều khiển, sau đó là nhận lại các phản hồi từ bộ điều

khiển và hiển kết quả cho người dùng. Các trang HTML, JSP, các thư viện thể và các file nguồn là một phần của

thành phần View.

Controller: Controller là tầng trung gian giữa Model và View. Controller được giao nhiệm vụ nhận các

yêu cầu từ phía máy khách. Một yêu cầu được nhận từ máy khách được thực hiện bởi một chức năng logic thích


hợp từ thành phần Model và sau đó sinh ra các kết quả cho người dùng và được thành phần View hiển thị.

ActionServlet, Action, ActionForm và struts-config.xml là các phần của Controller.

3. Cách tạo trang web trong Visual Studio 2008

3.1 Khởi động Visual Studio 2008 hoặc Visual Web Developer 2008 (hình 1)

3.2 Cách tạo dự án mới

Chọn File → New Project (Ctrl+Shitf+N) hoặc New Web Site (Shift+Alt+N) (Hình 2)

Hình 1: Visual Web Developer 2008

Hình 2: Tạo dự án mới


Nếu chọn New Project xuất hiện hộp hội thoại New Project sau (hình 3):

Trong Project Type:

Visual Basic → Web nếu chọn Visual Basic là ngôn ngữ viết ứng dụng.

Visual C# → Web nếu chọn C# là ngôn ngữ viết ứng dụng.

Trong Templates chọn ASP.NET Web Application,.

Trong Name đặt tên cho Project, tên do ta đặt.

Trong Location là thư mục chứa Project.

Nếu chọn New Web Site xuất hiện hộp hội thoại New Project sau (hình 4):

Hình 3

Hình 4


Trong Languge:

Visual Basic → Web nếu chọn Visual Basic là ngôn ngữ viết ứng dụng.

Visual C# → Web nếu chọn C# là ngôn ngữ viết ứng dụng.

Trong Templates chọn ASP.NET Web Application.

Trong Location là chọn Sysem File và Chọn tên và thư mực chứa Project.

3.3 Ví dụ 1

Ví dụ tạo một dự án có tên là “Vi_du_1”, đặt tại ổ đĩa D, chọn ngôn ngữ chọn là C# (hình 5) sau đó bấm

OK. Sau đó chúng ta được file “Default.aspx” (hình 6).

Hình 5

Hình 6


Trong ví dụ đầu tiên này chúng ta soạn một đoạn mã sau trong Default.aspx:

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

Inherits="_Default" %>

<!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></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<font face="verdana" color="red" size="20">Chào mừng bạn đến với ASP.NET

3.5 </font>

</div>

</form>

</body>

</html>

Để chạy chạy web này dưới dạng Deburg chúng ta chọn Deburg → Start Deburgging hoặc bấm phím

F5 (hình 7).

Kết quả khi chạy Vi_du_1 (hình 8)

Hình 7

Hình 8


4. Giới thiệu về sự kiện (Event) trong ASP.NET

4.1 Một số tệp cơ bản trong ASP.NET

Khi chúng ta xây dựng xong một ứng dụng Web:

Phần giao diện của ứng dụng nằm trong ở các tệp .aspx và html.

Tất cả các tệp mã nguồn (C#, VB.NET hoặc ngôn ngữ .NET) sẽ được biên dịch thành tệp .DLL và

nằm trong thư mục /Bin.

4.2 Chu kỳ sống của trang web trong ASP.NET (ASP.NET Page Life Cycle)

Chu kỳ sống được bắt đầu khi trình duyệt yêu cầu một trang web gọi là Session.

Chu kỳ sống vẫn tiếp tục nếu:

- Session đang hoạt động.

- Người sử dụng tương tác với giao diện web cho đến khi kích hoạt một sự kiện.

- Dữ liệu của trang (View State) wed được gửi về cho Server.

- Server nhận được View State và trả lại yêu cầu từ View State.

Chu kỳ sống kết thúc khi:

- Người dùng kết thúc trình duyệt.

- Session kết thúc (timeout).

4.3 Một số các sự kiện của trang web (Page Event)

SỰ KIỆN MIÊU TẢ

Pre_Init

Kiểm tra thuộc tính IsPostBack khi lần đầu tiên trang web đang được sử lý.

Tạo mới hoặc tạo mới lại các Control động (Dynamic Control).

Thiết lập trang chủ (Master page), thuộc tính Theme.

Đọc và thiết lập giá trị cho thuộc tính Profile.

Init Làm nổi (Raised) sau khi các Control đã được khởi động và các Skin đã được

ứng dụng. Chúng ta sử dụng sử kiện này để đọc hoặc khởi tạo các thuộc tính của

Control.

TỆP MIÊU TẢ

*.aspx Tệp này chứa toàn bộ giao diện người dùng, các tùy chọn, các đoạn

code ứng dụng. Đây là một trong những trang web đầu tiên được bắt

đầu khi người sử dụng duyệt web.

*.cs Tệp này chứa các mã nguồn của C#

web.config Tệp tin dạng XML chứa cấu hình cho ứng dụng ASP.NET. Nó bao

gồm các cấu hình về an ninh, quản lý trạng thái, quản lý bộ nhớ…

global.asax Chúng ta sử dụng tập tin này để khai báo các biến toàn cục và phản

ứng với các sự kiện toàn cục.


Load Sử dụng sự kiện này để thiết lập thuộc tính cho Control, thiết lập các kết nối với

Cơ sở dữ liệu.

InitComplete Sử dụng sự kiện này để xử lý các tác vụ có yêu cầu khi tất cả các khởi tạo hoàn

thành.

Unload Trang được giải phóng khỏi bộ nhớ

Error Khi xảy ra lỗi trong trang.

DataBinding Server Control trên trang được gắn với nguồn dữ liệu

4.4 Sự kiện ứng dụng (Event Application)

SỰ KIỆN MIÊU TẢ

Application_Start Người dùng đầu tiên duyệt trang web.

Application_End Khi không còn người dùng nào duyệt trang web.

Application_Error Khi có lỗi xảy ra trong ứng dụng

Session_Start Khi người dùng duyệt một trang web

Session_End Khi người dùng đóng trình duyệt hoặc Session kết thúc (time out)

Ví dụ sau đếm số người truy cập và số người online

Chọn Project → Add New Item (hình 9).

Trong “Add New Item” chọn “Global Application Class” (hình 10).

Hình 9

Hình 10


Trong file Global.asax soạn đoạn mã sau:

<%@ Application Language="C#" %>

<%@ Import Namespace="System.IO" %>

<script runat="server">

void Application_Start(object sender, EventArgs e)

{

if (!File.Exists("D:\\Dem.txt"))

File.WriteAllText("D:\\Dem.txt", "0");

Application["SNTruyCap"] = int.Parse(File.ReadAllText("D:\\Dem.txt"));

}

void Application_End(object sender, EventArgs e)

{

}

void Application_Error(object sender, EventArgs e)

{

}

void Session_Start(object sender, EventArgs e)

{

if (Application["SNOnline"] == null)

Application["SNOnline"] = 1;

else

Application["SNOnline"] = (int)Application["SNOnline"] + 1;

Application["SNTruyCap"] = (int)Application["SNTruyCap"] + 1;

File.WriteAllText("D:\\Dem.txt", Application["SNTruyCap"].ToString());

}

void Session_End(object sender, EventArgs e)

{

Application["SNOnline"] = (int)Application["SNOnline"] - 1;

}

</script>

5. Tài liệu tham khảo

1. Visual Web Developer, URL: http://msdn.microsoft.com/en-us/library/ms178093.aspx

2. Microsoft ASP.NET, URL: http://www.asp.net/

3. Bill Evjen, Scott Hanselman, Devin Rader, “Professional ASP.NET 3.5 In C# And VB”

http://msdn.microsoft.com/en-us/library/ms178093.aspx

http://www.asp.net/

MỤC LỤC

1. Dynamic Data là gì? ............................................................................................................ 2

2. Các tính năng của Dynamic Data ......................................................................................... 2

3. Xây dựng ứng dụng Dynamic Data với LINQ to SQL .......................................................... 2

2.1 Tạo Project Dynamic Data ........................................................................................................... 3

2.2 Xây dựng Cơ sở dữ liệu cho Project ............................................................................................ 4

2.3 Tạo DataContext với LINQ to SQL ............................................................................................. 5

2.4 Đăng ký DataContext ................................................................................................................... 7

2.5 Thêm Custom Metadata vào Model ............................................................................................. 8

4. Câu hỏi ôn tập ................................................................................................................... 13

5. Tài liệu tham khảo ............................................................................................................ 14

Microsoft Vietnam – DPE Team | Bài số 7: Dynamic Data với LINQ to SQL 2

Bài 7

DYNAMIC DATA VỚI LINQ TO SQL

Bài này giới thiệu tổng quan về Dynamic Data, những tính năng của Dynamic Data. Cách xây dựng

ứng dụng Dynamic Data với LINQ to SQL.

1. Dynamic Data là gì?

ASP.NET Dynamic Data cung cấp một Framework cho phép chúng ta nhanh chóng xây dựng

một chức năng ứng dụng driver-data, dựa trên LINQ to SQL hay Entity Framework .

Dựa trên cấu trúc của CSDL mà Dynamic Data Framework (DDF) sẽ tạo nên các trang web cho

phép người dùng xem/chèn/xóa/sửa dữ liệu.

Nhiều tính linh hoạt cho các DetailsView, FormView, GridView, ListView trong kiểm tra tính

hợp lệ của dữ liệu, hoặc chỉnh sửa lại các mẫu để thay đổi cách hiển thị dữ liệu.

ASP.NET Dynamic Data mang đến cho chúng ta các tiện ích và RAD (Rapid Application

Development) để thay đổi dữ liệu các các control ASP.NET.

2. Các tính năng của Dynamic Data

Web Scaffolding để tạo ra một ứng dụng web dựa trên các lược đồ cơ bản của cơ sở dữ liệu.

Dynamic Data scaffolding có thể tạo ra một chuẩn UI (User Interface – Giao diện người dùng)

từ các mô hình dữ liệu.

Đầy đủ các thao tác (tạo, cập nhật, xóa bỏ, hiển thị) cho việc truy cập dữ liệu truy cập dữ liệu,

các thao tác về quan hệ giữa các bảng và kiểm tra tính hợp lệ của dữ liệu.

Tự động hỗ quan các quan hệ khóa ngoài (foreign-key). Dynamic Data phát hiện ra các quan hệ

giữa các bảng và từ đó tạo ra các giao diện người dùng trên các bảng quan hệ.

Khả năng tùy chỉnh các UI.

Khả năng tùy chỉnh tính hợp lệ cho các trường dữ liệu.

3. Xây dựng ứng dụng Dynamic Data với LINQ to SQL

Để xây dựng một trang Web với Dynamic Data sẽ bắt đầu bằng cách sử dụng scaffolding. Dynamic Data

hỗ trợ mô hình dữ liệu LINQ to SQL và mô hình dữ liệu ADO.NET Entity Framework. Trong một ứng dụng web

của chúng ta có thể có nhiều loại mô hình dữ liệu nhưng để sử dụng Dynamic Data thì các mô hình dữ liệu phải

cùng kiểu.

Chúng ta phải đăng ký mô hình dữ liệu sử dụng Dynamic Data với file “Global.asax”. Sau khi mô hình

dữ liệu được đăng ký với Dynamic Data, dữ liệu mô hình có thể tự động thực hiện xác nhận các trường dữ liệu,

và nó cho phép chúng ta kiểm soát sự xuất hiện và hành vi của dữ liệu ở cấp độ tầng dữ liệu.

Trong ví dụ sau đây sẽ xây dựng một Project sử dụng Dynamic Data với mô hình dữ liệu LINQ to SQL.


2.1 Tạo Project Dynamic Data

Để bắt đầu, File→New Web Site và chọn “Dynamic Data Entities Web Site” hay “Dynamic Data Web

Site”. Ở đây chúng ta dùng Dynamic Data với LINQ to SQL nên chọn “Dynamic Data Web Site” (Hình 1).

Trong Project này chúng ta đặt tên là Vi_du_7, ngôn ngữ là Visual C# sau đó bấm “OK”.

Khi đã tạo xong, bạn sẽ thấy một số Folder/File

được đưa vào trong Solution Explorer (Hình 2).

Trong đó sẽ có một Folder có tên là DynamicData,

bên trong chứa một số các Folder khác, và trong mỗi Folder

con này sẽ chứa các UserControl và các trang ASP.NET.

Hình 1: Tạo Project Dynamic Data với LINQ to SQL

Hình 2: Các Folder và File trong Dynamic Data


Hình 4: SQL Server Database

Hình 5: Tạo bảng cho My_Database.mdf

2.2 Xây dựng Cơ sở dữ liệu cho Project

Tư Folder “App_Data” trong “Solution Explore” click phai chuôt chon “Add New Item” (Hình 3).

Chọn “SQL Server Database”, trong ví dụ

này đặt tên cho CSDL là

“My_Database.mdf”, chọn ngôn ngữ là

“Visual C#”, sau đó bấm “Add” (Hình 4).

Để tạo Table cho “My_Database”, trong “Database Explore”

chúng click chuột phải vào Folder “Table” chọn “Add New Table”.

Trong ví dụ này chúng ta sẽ tạo 2 bảng:

SanPham gồm các trường:

Id, TenSanPham, DonGia, SoLuong, LoaiSanPham (Hình 6).

LoaiSanPham gồm các trường:

Id, TenLoaiSanPham (Hình 7).

Hình 3: Tạo Cơ sở dữ liệu


Hình 8

2.3 Tạo DataContext với LINQ to SQL

Trong ví dụ này chúng ta dùng LINQ to SQL

để truy cập vào CSDL My_Database.mdf.

Để tạo các lớp cho cho LINQ to SQL, trong

“Solution Explore” click chuột phải chọn “Add New

Item” (Hình 8).

Hình 6: Bảng SanPham trong CSDL My_Database.mdf

Hình 7: Bảng LoaiSanPham trong CSDL My_Database.mdf


Hình 9: Tạo LINQ to SQL Classes

Hình 11:

Trong “Add New Item” (Hình 9) chọn

“LINQ to SQL Classes”, đặt tên tệp là

“MyDataClassess.dbml”, chọn ngôn ngữ là “Visual

C#”, sau đó bấm vào “Add” .

Sau khi bấm “Add” sẽ xuất hiện một thông

báo khuyên chúng ta nên đặt các file kiểu (LINQ to

SQL Class) vào trong thư mục “App_Code” của

Project. Chúng ta sẽ bấm “Yes” để các file

“MyDataClasses.dbml” sẽ được chứa trong thư mục

“App_Code”.

Mở file “MyDataClasses.dbml” trong thư mực “App_Code”, đánh dấu vào 2 bảng “LoaiSanPham”

và “SanPham”, kéo thả 2 bảng này vào file “MyDataClasses.dbml” (Hình 10).

Sau kéo thả 2 bảng này vào trong “MyDataClasses.dbml”

chúng ta sẽ tạo liên kết cho 2 bảng. Trong file “MyDataClasses.dbml” click phai chuôt chon Add→Association

để tạo liên kêt giưa 2 bảng (Hình 11).

Hình 10: Tạo file MyDataClasses với 2 bảng SanPham và LoaiSanPham

Hình 12: Tạo liên kết cho bảng LoaiSanPham và SanPham


Chúng ta sẽ tạo liên kết giữa trường Id của bảng LoaiSanPham với trường LoaiSanPham của bảng

SanPham (Hình 12). Sau đó chúng ta bấm “OK” tạo được kết quả như Hình 13.

2.4 Đăng ký DataContext

Sau khi tạo ra DataContext, chúng ta mở tệp “MyDataClasses.designer.cs”, chương trình đã tạo cho

chúng ta một lớp có tên là MyDataClassesDataContext.

public partial class MyDataClassesDataContext : System.Data.Linq.DataContext

Chúng ta phải đăng ký MyDataClassesDataContext với hệ thống DynamicData. Mở file Global.asax,

Sửa:

//model.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() { ScaffoldAllTables = false });

Thành:

model.RegisterContext(typeof (MyDataClassesDataContext), new ContextConfiguration() { ScaffoldAllTables = true });

Khi đó chúng ta được file Golobal.asax như sau:


<%@ Import Namespace="System.Web.Routing" %>

<%@ Import Namespace="System.Web.DynamicData" %>

<script RunAt="server">

public static void RegisterRoutes(RouteCollection routes) {

MetaModel model = new MetaModel();

// IMPORTANT: DATA MODEL REGISTRATION

// Uncomment this line to register LINQ to SQL classes or an ADO.NET Entity Data

// model for ASP.NET Dynamic Data. Set ScaffoldAllTables = true only if you are sure

// that you want all tables in the data model to support a scaffold (i.e. templates)

// view. To control scaffolding for individual tables, create a partial class for

// the table and apply the [Scaffold(true)] attribute to the partial class.

// Note: Make sure that you change "YourDataContextType" to the name of the data context

// class in your application.

model.RegisterContext(typeof(MyDataClassesDataContext), new ContextConfiguration() { ScaffoldAllTables = true

});

// The following statement supports separate-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using separate pages. To enable this mode, uncomment the following

// route definition, and comment out the route definitions in the combined-page mode section that follows.

routes.Add(new DynamicDataRoute("{table}/{action}.aspx") {

Constraints = new RouteValueDictionary(new { action = "List|Details|Edit|Insert" }),

Model = model

});

// The following statements support combined-page mode, where the List, Detail, Insert, and

// Update tasks are performed by using the same page. To enable this mode, uncomment the

// following routes and comment out the route definition in the separate-page mode section above.

//routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") {

Hình 13


// Action = PageAction.List,

// ViewName = "ListDetails",

// Model = model

//});


// Action = PageAction.Details,


// Model = model

//});

}

void Application_Start(object sender, EventArgs e) {

RegisterRoutes(RouteTable.Routes);

}

</script>

Chúng ta vào Deburg→StartDebugging (hoặc F5) để chạy thử chương trình. Kết quả khi chạy chương

trình (Hình 14).

Khi click vào LoaiSanPhams kết quả như hình 15. Khi click vào SanPhams kết quả như hình 16.

2.5 Thêm Custom Metadata vào Model

Để thêm tùy biến các mục, chúng ta cần tạo lớp Metadata để nó cung cấp cho hệ thống Dynamic Data

thông tin về các thực thể. Đầu tiên bạn cần tạo thêm một lớp partial với cùng tên của lớp entity trong mô hình dữ

liệu, sau đó muốn thay đổi thuộc tính lên lớp này phải chỉ ra lớp Metadata cho lớp này.

Hình 14

Hình 15

Hình 16


Trong ví dụ này chúng ta sẽ 2 lớp partial có tên là: LoaiSanPham và SanPham. Để thêm 2 lớp này chúng ta

làm như sau:

Click chuột phải vào “Add_Code” chọn “Add New Item”, trong hộp thoại “Add New Item”, chọn

“Class”, đặt tên cho file là “MyClass.cs”, chọn ngôn ngữ là “Visual C#”, sau đó bấm “Add” (Hình 17).

Mở file “MyClass.cs” khai báo thêm các namespace sau:

using System.Web.DynamicData;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel;

Thêm 2 lớp partial có tên là: LoaiSanPham, SanPham và tên lớp của MetadataType.

[MetadataType(typeof(LoaiSanPham_Metadata))]

public partial class LoaiSanPham

{

public class LoaiSanPham_Metadata

{

}

}

[MetadataType(typeof(SanPham_Metadata))]

public partial class SanPham

{

public class SanPham_Metadata

{

}

}

Các bảng muốn thay đổi tên hiển thị sử dụng thuộc tính TableName. Khi sử dụng thuộc tính này phải được

viết trong thân của lớp partial.

Các trường muốn thay đổi tên hiện thị sử dụng thuộc tính DisplayName

Các trường muốn có định dạng tùy biến sử dụng thuộc tính DisplayFormat

Các trường muốn ẩn khỏi giao diện sửa dụng thuộc tính ScaffoldColumn

Các trường muốn kiểu tra tính hợp lệ khi nhập sử dụng thuộc tính Required

Khi sử dụng các thuộc tính DisplayName,DisplayFormat,ScaffoldColumn,Required được viết trong thân của

lớp MetadataType.

Trong ví dụ này sử dụng các thuộc tính TableName, DisplayName để thay đổi giao diện hiện thị cho 2

bảng LoaiSanPham và SanPham. Sử dụng Required để kiểu tra việc nhập dữ liệu cho trường “SoLuong” và

“DonGia” của bảng SanPham.

using System;

using System.Collections.Generic;

Hình 17: Thêm file MyClass.cs


using System.Linq;

using System.Web;




/// <summary>

/// Thay đổi cho các thuộc tính cho 2 bảng SanPham và LoaiSanPham

/// </summary>



{

partial void OnTenLoaiSanPhamChanging(string value)

{

if (Char.IsLower(value[0]))//Kiểm tự đầu tiên phải có phải là chữ hoa

{

throw new ValidationException("Tên loại sản phẩm ký tự đầu tiên phải là chữ hoa!");

}

}

[TableName("Loại sản phẩm")]//Sửa lại tên bảng "LoaiSanPham" thành "Loại sản phẩm"


{

[DisplayName("Tên loại sản phẩm")]//Sửa lại tên hiển thị cho trường TenLoaiSanPham

public object TenLoaiSanPham { get; set; }

[DisplayName("Sản phẩm")]

public object SanPhams { get; set; }

}

}



{

partial void OnTenSanPhamChanging(string value)

{


{

throw new ValidationException("Tên sản phẩm ký tự đầu tiên phải là chữ hoa!");

}

}

[TableName("Sản phẩm")]//Sửa lại tên bảng "SanPham" thành "Sản phẩm"


{

[DisplayName("Tên sản phẩm")]//Sửa lại tên hiển thị cho trường TenLoaiSanPham

public object TenSanPham { get; set; }

[DisplayName("Số lượng")]

[Required]

[Range(0, 300)]//Nhập số lượng trong khoảng từ 0 đến 300

public object SoLuong { get; set; }

[DisplayName("Đơn giá")]

[Required]

[Range(100000, 3000000000)]//Nhập đơn giá trong khoảng từ 100.000 đến 3.000.000.000

public object DonGia { get; set; }

[DisplayName("Loại sản phẩm")]

public object LoaiSanPham1 { get; set; }

}

}

Để sửa lại đổi giao diện của trang Master chúng ta mở file “Site.master”. Ví dụ chúng ta một số nội

dung do chương trình tạo ra bằng tiếng Anh và thay bằng tiếng Việt.

Sửa:


<h1><span class="allcaps">Dynamic Data Site</span></h1>

Thành:

<h1 style="font-family:Times New Roman"><span class="allcaps">Dynamic Data VỚI LINQ to SQL</span></h1>

Sửa:

<a runat="server" href="~/"><img alt="Back to home page" runat="server"

src="DynamicData/Content/Images/back.gif" />Back to home page</a>

</div>

Thành:

<a runat="server" href="~/"><img alt="Trở về trang chủ" runat="server" src="DynamicData/Content/Images/back.gif"

/>Trở về trang chủ</a>

Trong file “Details.aspx” sửa một số giao diện tiếng Anh và thay bằng tiếng Việt.

<h2 style="font-family:Times New Roman">Chi tiết một bản ghi của bảng <%= table.DisplayName %></h2>

<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsDataSource"

OnItemDeleted="DetailsView1_ItemDeleted"

CssClass="detailstable" FieldHeaderStyle-CssClass="bold" >

<Fields>

<asp:TemplateField>

<ItemTemplate>

<asp:HyperLink ID="EditHyperLink" runat="server"

NavigateUrl='<%# table.GetActionPath(PageAction.Edit, GetDataItem()) %>'

Text="Sửa" />

<asp:LinkButton ID="DeleteLinkButton" runat="server" CommandName="Delete"

CausesValidation="false"

OnClientClick='return confirm("Bạn có chắc chắn xóa bản ghi này không?");'

Text="Xóa" />

</ItemTemplate>

</asp:TemplateField>

</Fields>

</asp:DetailsView>

Trong file “Edit.aspx” sửa lại <asp:DetailsView ID="DetailsView1" như sau:

<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsDataSource" DefaultMode="Edit"

AutoGenerateEditButton="False" OnItemCommand="DetailsView1_ItemCommand"

OnItemUpdated="DetailsView1_ItemUpdated"

CssClass="detailstable" FieldHeaderStyle-CssClass="bold">

<Fields>

<asp:TemplateField>

<ItemTemplate>

<asp:Button ID="UpdateLinkButton" runat="server" CommandName="Update"

CausesValidation="false"

Text="Cập nhật" />

<asp:Button ID="Button1" runat="server" CommandName="Cancel" CausesValidation="false"

Text="Hủy bỏ" />

</ItemTemplate>


</Fields>

</asp:DetailsView>

Trong file “Insert.aspx” sửa lại <asp:DetailsView ID="DetailsView1" như sau:

<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsDataSource" DefaultMode="Insert"

AutoGenerateInsertButton="False" OnItemCommand="DetailsView1_ItemCommand"

OnItemInserted="DetailsView1_ItemInserted"


<FieldHeaderStyle CssClass="bold" />

<Fields>

<asp:TemplateField>


<ItemTemplate>

<asp:Button ID="InsertLinkButton" runat="server" CommandName="Insert" Text="Thêm mới" />

<asp:Button ID="Button1" runat="server" CommandName="Cancel" CausesValidation="false"


</ItemTemplate>


</Fields>

</asp:DetailsView>

Trong file “List.aspx” sửa lại <asp:GridView ID="GridView1" như sau:

<asp:GridView ID="GridView1" runat="server" DataSourceID="GridDataSource"

AllowPaging="True" AllowSorting="True" CssClass="gridview">

<Columns>

<asp:TemplateField>

<ItemTemplate>


NavigateUrl='<%# table.GetActionPath(PageAction.Edit, GetDataItem()) %>'

Text="Sửa" /> <asp:LinkButton ID="DeleteLinkButton" runat="server" CommandName="Delete"

CausesValidation="false" Text="Xóa"

OnClientClick='return confirm("Bạn có chắc chắn xóa bản nghi này không?");'

/> <asp:HyperLink ID="DetailsHyperLink" runat="server"

NavigateUrl='<%# table.GetActionPath(PageAction.Details, GetDataItem()) %>'

Text="Chi tiết" />

</ItemTemplate>


</Columns>

<PagerStyle CssClass="footer"/>

<PagerTemplate>

<asp:GridViewPager runat="server" />

</PagerTemplate>

<EmptyDataTemplate>

Không có dữ liệu trong bảng!

</EmptyDataTemplate>

</asp:GridView>

Bây giờ chúng ta chạy thử chương trình. Các giao diện đã được sửa thành tiếng Việt. Chúng ta vào

Deburg→StartDebugging (hoặc F5) để chạy thử chương trình. Kết quả khi chạy chương trình file

“Defautl.axpx” (Hình 18).

Hình 18: Trang chủ của Vi_du_7


Khi click vào “Loại sản phẩm” kết quả như hình 19 hoặc click vào “Sản phẩm” kết quả như hình 20.

4. Câu hỏi ôn tập

1. Các tính năng của Dynamic Data?

Trả lời:



từ các mô hình dữ liệu.




giữa các bảng và từ đó tạo ra các giao diện người dùng trên các bảng quan hệ.



2. Dynamic Data hỗ trợ các các mô hình dữ liệu nào?

Hình 19: Giao diện của bảng LoaiSanPham

Hình 20: Giao diện của bảng SanPham

Hình 21: Thêm mới vào bảng SanPham

Hình 22: Sửa bản ghi của bản SanPham


Trả lời:

Dynamic Data hỗ trợ 2 mô hình dữ liệu LINQ to SQL và ADO.NET Entity Framework.

3. Các bước cơ bản xây dựng Dynamic Data với LINQ to SQL

Trả lời:

Tạo project Dynamic Data Web Site

Xây dựng Cơ sở dữ liệu

Tạo DataContext với LINQ to SQL

Đăng ký DataContext với file Global.asax

Thêm Custom Metadata vào Model


1. Using ASP.NET Dynamic Data, URL: http://msdn.microsoft.com/en-us/library/cc488545.aspx

2. Microsoft ASP.NET, URL: http://www.asp.net/DynamicData/

3. ScottGu's Blog, URL: http://weblogs.asp.net/scottgu/archive/2008/12/02/dec-2nd-links-asp-net-asp-

net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx

http://msdn.microsoft.com/en-us/library/cc488545.aspx


http://www.asp.net/DynamicData/

http://weblogs.asp.net/scottgu/archive/2008/12/02/dec-2nd-links-asp-net-asp-net-dynamic-data-asp-net-ajax-asp-net-mvc-visual-studio-silverlight-wpf.aspx


MỤC LỤC

1. Xây dựng ứng dụng Dynamic Data với ADO.NET Entity Framework .......................... 2

1.1. Tạo Project Dynamic Data ........................................................................................................... 2

1.2. Xây dựng Cơ sở dữ liệu cho Project ............................................................................................ 3

1.3. Tạo Data Model với ADO.NET Entity Framework ..................................................................... 6

1.4. Đăng ký Data Model .................................................................................................................... 8

1.5. Thêm Custom Metadata vào Model ........................................................................................... 10

2. Câu hỏi ôn tập ................................................................................................................ 15

3. Tài liệu tham khảo .......................................................................................................... 15

Microsoft Vietnam – DPE Team | Bài số 8: Dynamic Data với ADO.NET Entity Framework 2

Bài số 8

DYNAMIC DATA VỚI ADO.NET Entity Framework

Bài này giới thiệu cách xây dựng ứng dụng Dynamic Data với ADO.NET Entity Framework.

1. Xây dựng ứng dụng Dynamic Data với ADO.NET Entity Framework

1.1. Tạo Project Dynamic Data

Để bắt đầu, File→New Web Site và chọn “Dynamic Data Entities Web Site” hay “Dynamic Data Web

Site”. Ở đây chúng ta dùng Dynamic Data với ADO.NET Entity Framwork nên chọn “Dynamic Data Entities

Web Site” (Hình 1).

Trong Project này chúng ta đặt tên là Vi_du_8, ngôn ngữ là Visual C# sau đó bấm “OK”.

Hình 1: Tạo Project Dynamic Data với ADO.NET Entity Framework


Hình 2: Các Folder và File trong Dynamic Data

Khi đã tạo xong, bạn sẽ thấy một số Folder/File được đưa

vào trong Solution Explorer (Hình 2).

Trong đó sẽ có một Folder có tên là DynamicData, bên trong

chứa một số các Folder khác, và trong mỗi Folder con này sẽ chứa

các UserControl và các trang ASP.NET.

1.2. Xây dựng Cơ sở dữ liệu cho Project

Tư Folder “App_Data” trong “Solution Explore” click phai chuôt chon “Add New Item” (Hình 3).

Hình 3: Tạo Cơ sở dữ liệu


Chọn “SQL Server Database”, trong ví dụ này đặt tên cho CSDL là “My_Database.mdf”, chọn ngôn ngữ là

“Visual C#”, sau đó bấm “Add” (Hình 4).

Để tạo Table cho “My_Database”, trong “Database Explore” chúng click chuột phải vào Folder

“Table” chọn “Add New Table”.

Trong ví dụ này chúng ta sẽ tạo 2 bảng:

SanPham gồm các trường:

Id, TenSanPham, DonGia, SoLuong, LoaiSanPham (Hình 5).

LoaiSanPham gồm các trường:

Id, TenLoaiSanPham (Hình 6).

Hình 4: SQL Server Database

Hình 5: Bảng SanPham trong CSDL My_Database.mdf


Chúng ta cũng có thể sử dụng CSDL đã có. Để sử dụng CSDL đã có tư Folder “App_Data” trong

“Solution Explore” click phai chuôt chon “Add Existing Item” (Hình 7).

Trong hộp thoại “Add Existing Item” chọn CSDL muốn thêm vào Project, sau đó bấm “Add” (hình 8).

Hình 8: Chọn Cơ sở dữ liệu đã có

Hình 6: Bảng LoaiSanPham trong CSDL My_Database.mdf

Hình 7: Thêm Cơ sở dữ liệu đã có


1.3. Tạo Data Model với ADO.NET Entity Framework

Trong ví dụ này chúng ta dùng ADO.NET Entity Framework để truy cập vào CSDL My_Database.mdf.

Để tạo Data Model, trong “Solution Explore” click chuột phải chọn “Add New Item” (Hình 9).

Trong “Add New Item” (Hình 10) chọn “ADO.NET Entity Data Model”, đặt tên tệp là

“My_Modle.edmx”, chọn ngôn ngữ là “Visual C#”, sau đó bấm vào “Add” .

Sau khi bấm “Add” sẽ xuất hiện một thông báo khuyên chúng ta nên đặt các file kiểu (ADO.NET Entity

Data Model) vào trong thư mục “App_Code” của Project. Chúng ta sẽ bấm “Yes” để các file

“My_Model.edmx” sẽ được chứa trong thư mục “App_Code”. Khi đó sẽ xuất hiện hộp thoại “Entity Data

Model Wizard” (hình 11). Chúng ta chọn “Generate from database”, rồi bấm “Next” sẽ xuất hiện giao diện

(hình 12) chọn CSDL “My_Database.mdf” tiếp tục bấm “Next” sẽ xuất hiện giao diện (hình 13).

Hình 10: Tạo ADO.NET Entity Data Model Classes

Hình 9

Hình 11

Hình 12


Trong giao diện hình14, chọn đánh dấu vào các bảng trong “Tables” sau đó bấm “Finish”. Tiếp theo

chúng ta mở file “My_Model.edmx” trong thư mực “App_Code”. Chúng ta sẽ tạo liên kết giữa trường Id của

bảng LoaiSanPham với trường LoaiSanPham của bảng SanPham. Click chuột phải chọn Add→Association

(hình 14) sẽ xuất hiện “Add Association” (hình 15), chúng ta chọn như hình 16 rồi bấm OK.

Sau đó click chuột phải chọn “Mapping Details” và chọn như hình 16. Ở đây chúng ta chọn quan hệ 1-

nhiều giữa bảng LoaiSanPham và SanPham.

Hình 13

Hình 15

Hình 14

Hình 16: Tạo liên kết giữa bảng LoaiSanPham với bảng SanPham


1.4. Đăng ký Data Model

Sau khi tạo ra DataModel, chúng ta mở tệp “My_Model.Designer.cs”, chương trình đã tạo cho chúng ta

một namespace có tên là My_DatabaseModel và trong namespace My_DatabaseModel có một lớp My_DatabaseEntities.

public partial class My_DatabaseEntities :global::System.Data.Objects.ObjectContex

Chúng ta phải đăng ký My_DatabaseEntities với hệ thống DynamicData. Mở file Global.asax, thêm <%@ Import Namespace="My_DatabaseModel" %>

Sửa:

//model.RegisterContext(typeof(YourDataContextType), new ContextConfiguration() {

ScaffoldAllTables = false });

Thành:

model.RegisterContext(typeof (My_DatabaseEntities), new ContextConfiguration() {

ScaffoldAllTables = true });

Khi đó chúng ta được file Golobal.asax như sau:


<%@ Import Namespace="System.Web.Routing" %>

<%@ Import Namespace="System.Web.DynamicData" %>

<%@ Import Namespace="My_DatabaseModel" %>

<script RunAt="server">

public static void RegisterRoutes(RouteCollection routes) {

MetaModel model = new MetaModel();

// IMPORTANT: DATA MODEL REGISTRATION

// Uncomment this line to register LINQ to SQL classes or an ADO.NET Entity

Data

// model for ASP.NET Dynamic Data. Set ScaffoldAllTables = true only if you

are sure

// that you want all tables in the data model to support a scaffold (i.e.

templates)

// view. To control scaffolding for individual tables, create a partial

class for

// the table and apply the [Scaffold(true)] attribute to the partial class.

// Note: Make sure that you change "YourDataContextType" to the name of the

data context

// class in your application.

model.RegisterContext(typeof(My_DatabaseEntities), new

ContextConfiguration() { ScaffoldAllTables = true });

// The following statement supports separate-page mode, where the List,

Detail, Insert, and

// Update tasks are performed by using separate pages. To enable this mode,

uncomment the following

// route definition, and comment out the route definitions in the combined-

page mode section that follows.

routes.Add(new DynamicDataRoute("{table}/{action}.aspx") {

Constraints = new RouteValueDictionary(new { action =

"List|Details|Edit|Insert" }),

Model = model

});

// The following statements support combined-page mode, where the List,

Detail, Insert, and

// Update tasks are performed by using the same page. To enable this mode,

uncomment the

// following routes and comment out the route definition in the separate-

page mode section above.


// Action = PageAction.List,



// Model = model

//});


// Action = PageAction.Details,


// Model = model

//});

}

void Application_Start(object sender, EventArgs e) {


}

</script>

Chúng ta vào Deburg→StartDebugging (hoặc F5) để chạy thử chương trình. Kết quả khi chạy chương

trình (Hình 17).

Khi click vào LoaiSanPhams kết quả như hình 18. Khi click vào SanPhams kết quả như hình 19.

Hình 17

Hình 18

Hình 19


1.5. Thêm Custom Metadata vào Model

Để thêm tùy biến các mục, chúng ta cần tạo lớp Metadata để nó cung cấp cho hệ thống Dynamic Data

thông tin về các thực thể. Đầu tiên bạn cần tạo thêm một lớp partial với cùng tên của lớp entity trong mô hình

dữ liệu, sau đó muốn thay đổi thuộc tính lên lớp này phải chỉ ra lớp Metadata cho lớp này.

Trong ví dụ này chúng ta sẽ 2 lớp partial có tên là: LoaiSanPham và SanPham. Để thêm 2 lớp này

chúng ta làm như sau:

Click chuột phải vào “Add_Code” chọn “Add New Item”, trong hộp thoại “Add New Item”, chọn

“Class”, đặt tên cho file là “MyClass.cs”, chọn ngôn ngữ là “Visual C#”, sau đó bấm “Add” (Hình 20).

Mở file “MyClass.cs” khai báo thêm các namespace sau:




Thêm 2 lớp partial có tên là: LoaiSanPham, SanPham và tên lớp của MetadataType trong

namespace My_DatabaseModel.

namespace My_DatabaseModel

{



{


{

}

}



{

public class SanPham_Metadata {

}

}

}

Trong ví dụ này sử dụng các thuộc tính TableName, DisplayName để thay đổi giao diện hiện thị cho

2 bảng LoaiSanPham và SanPham. Sử dụng Required để kiểu tra việc nhập dữ liệu cho trường “SoLuong”

và “DonGia” của bảng SanPham. Sử dụng ScaffoldColumn để ẩn trường “Id” của 2 bảng.

Hình 20: Thêm file MyClass.cs


using System;


using System.Linq;

using System.Web;




namespace My_DatabaseModel

{

/// <summary>

/// Thay đổi cho các thuộc tính cho 2 bảng SanPham và LoaiSanPham

/// </summary>



{

partial void OnTenLoaiSanPhamChanging(string value)

{


{

throw new ValidationException("Tên loại sản phẩm ký tự đầu tiên

phải là chữ hoa!");

}

}

[TableName("Loại sản phẩm")]//Sửa lại tên bảng "LoaiSanPham" thành "Loại

sản phẩm"


{

[ScaffoldColumn(false)]//// Ẩn cột Id

public object Id { get; set; }

[DisplayName("Tên loại sản phẩm")]//Sửa lại tên hiển thị cho trường

TenLoaiSanPham

public object TenLoaiSanPham { get; set; }

[DisplayName("Sản phẩm")]

public object SanPham { get; set; }

}

}



{

partial void OnTenSanPhamChanging(string value)

{


{

throw new ValidationException("Tên sản phẩm ký tự đầu tiên phải là

chữ hoa!");

}

}

[TableName("Sản phẩm")]//Sửa lại tên bảng "SanPham" thành "Sản phẩm"


{

[ScaffoldColumn(false)]// Ẩn cột Id

public object Id { get; set; }

[DisplayName("Tên sản phẩm")]//Sửa lại tên hiển thị cho trường

TenLoaiSanPham

public object TenSanPham { get; set; }

[DisplayName("Số lượng")]

[Required]

[Range(0, 300)]//Nhập số lượng trong khoảng từ 0 đến 300


public object SoLuong { get; set; }

[DisplayName("Đơn giá")]

[Required]

[Range(100000, 3000000000)]//Nhập đơn giá trong khoảng từ 100.000 đến

3.000.000.000

public object DonGia { get; set; }

[DisplayName("Loại sản phẩm")]

public object LoaiSanPham { get; set; }

}

}

}

Để sửa lại đổi giao diện của trang Master chúng ta mở file “Site.master”. Ví dụ chúng ta một số nội

dung do chương trình tạo ra bằng tiếng Anh và thay bằng tiếng Việt.

Sửa:

<h1><span class="allcaps">Dynamic Data Site</span></h1>

Thành:

<h1 style="font-family:Times New Roman"><span class="allcaps">Dynamic Data VỚI

ADO.NET Entity Framework</span></h1>

Sửa:

<a runat="server" href="~/"><img alt="Back to home page" runat="server"

src="DynamicData/Content/Images/back.gif" />Back to home page</a>

</div>

Thành:

<a runat="server" href="~/"><img alt="Trở về trang chủ" runat="server"

src="DynamicData/Content/Images/back.gif" />Trở về trang chủ</a>

Trong file “Details.aspx” sửa một số giao diện tiếng Anh và thay bằng tiếng Việt.

<h2 style="font-family:Times New Roman">Chi tiết một bản ghi của bảng <%=

table.DisplayName %></h2>

<asp:DetailsView ID="DetailsView1" runat="server"

DataSourceID="DetailsDataSource" OnItemDeleted="DetailsView1_ItemDeleted"

CssClass="detailstable" FieldHeaderStyle-CssClass="bold" >

<Fields>

<asp:TemplateField>

<ItemTemplate>


NavigateUrl='<%#

table.GetActionPath(PageAction.Edit, GetDataItem()) %>'

Text="Sửa" />

<asp:LinkButton ID="DeleteLinkButton" runat="server"

CommandName="Delete" CausesValidation="false"

OnClientClick='return confirm("Bạn có chắc chắn xóa

bản ghi này không?");'

Text="Xóa" />

</ItemTemplate>


</Fields>

</asp:DetailsView>

Trong file “Edit.aspx” sửa lại <asp:DetailsView ID="DetailsView1" như sau:


DataSourceID="DetailsDataSource" DefaultMode="Edit"

AutoGenerateEditButton="False"

OnItemCommand="DetailsView1_ItemCommand" OnItemUpdated="DetailsView1_ItemUpdated"


<Fields>


<asp:TemplateField>

<ItemTemplate>

<asp:Button ID="UpdateLinkButton" runat="server"

CommandName="Update" CausesValidation="false"

Text="Cập nhật" />

<asp:Button ID="Button1" runat="server"

CommandName="Cancel" CausesValidation="false"


</ItemTemplate>


</Fields>

</asp:DetailsView>

Trong file “Insert.aspx” sửa lại <asp:DetailsView ID="DetailsView1" như sau:


DataSourceID="DetailsDataSource" DefaultMode="Insert"

AutoGenerateInsertButton="False"

OnItemCommand="DetailsView1_ItemCommand" OnItemInserted="DetailsView1_ItemInserted"


<FieldHeaderStyle CssClass="bold" />

<Fields>

<asp:TemplateField>

<ItemTemplate>

<asp:Button ID="InsertLinkButton" runat="server"

CommandName="Insert" Text="Thêm mới" />

<asp:Button ID="Button1" runat="server"

CommandName="Cancel" CausesValidation="false" Text="Hủy bỏ" />

</ItemTemplate>


</Fields>

</asp:DetailsView>

Trong file “List.aspx” sửa lại <asp:GridView ID="GridView1" như sau:

<asp:GridView ID="GridView1" runat="server"

DataSourceID="GridDataSource"

AllowPaging="True" AllowSorting="True" CssClass="gridview">

<Columns>

<asp:TemplateField>

<ItemTemplate>


NavigateUrl='<%#

table.GetActionPath(PageAction.Edit, GetDataItem()) %>'

Text="Sửa" /> <asp:LinkButton

ID="DeleteLinkButton" runat="server" CommandName="Delete"

CausesValidation="false" Text="Xóa"

OnClientClick='return confirm("Bạn có chắc chắn xóa

bản nghi này không?");'

/> <asp:HyperLink ID="DetailsHyperLink"

runat="server"

NavigateUrl='<%#

table.GetActionPath(PageAction.Details, GetDataItem()) %>'

Text="Chi tiết" />

</ItemTemplate>


</Columns>

<PagerStyle CssClass="footer"/>

<PagerTemplate>

<asp:GridViewPager runat="server" />

</PagerTemplate>

<EmptyDataTemplate>

Không có dữ liệu trong bảng!

</EmptyDataTemplate>

</asp:GridView>


Bây giờ chúng ta chạy thử chương trình. Các giao diện đã được sửa thành tiếng Việt. Chúng ta vào

Deburg→StartDebugging (hoặc F5) để chạy thử chương trình. Kết quả khi chạy chương trình file

“Defautl.axpx” (Hình 21).

Khi click vào “Loại sản phẩm” kết quả như hình 22 hoặc click vào “Sản phẩm” kết quả như hình 23.

Hình 21: Trang chủ của Vi_du_8

Hình 22: Giao diện của bảng LoaiSanPham

Hình 23: Giao diện của bảng SanPham



1. Các tính năng của Dynamic Data?

Trả lời:



tư các mô hình dữ liệu.




giữa các bảng và tư đó tạo ra các giao diện người dùng trên các bảng quan hệ.



2. Dynamic Data hỗ trợ các các mô hình dữ liệu nào?

Trả lời:

Dynamic Data hỗ trợ 2 mô hình dữ liệu LINQ to SQL và ADO.NET Entity Framework.

3. Các bước cơ bản xây dựng Dynamic Data với ADO.NET Entity Framework

Trả lời:

Tạo project Dynamic Data ADO.NET Entity Framework

Xây dựng Cơ sở dữ liệu

Tạo Data Model với ADO.NET Entity Framework

Đăng ký DataModel với file Global.asax

Thêm Custom Metadata vào Model


1. Using ASP.NET Dynamic Data, URL: http://msdn.microsoft.com/en-us/library/cc488545.aspx

2. Microsoft ASP.NET, URL: http://www.asp.net/DynamicData/





http://www.asp.net/DynamicData/



MỤC LỤC

1. JQUERY là gì? .................................................................................................................. 2

2. Download jQuery .............................................................................................................. 2

3. Sử dụng jQuery trong ASP.NET ...................................................................................... 3

4. jQuery hoạt động như thế nào? ...................................................................................... 3

4.1. Chạy mã khi Document Ready (trang đã sẵn sàng) ..................................................................... 3

4.2. Function $() .................................................................................................................................. 4

5. Một số API trong jQuery .................................................................................................. 4

5.1. Selectors ....................................................................................................................................... 4

5.1.1. Basic ..................................................................................................................................... 4 5.1.2. HIERACHY .......................................................................................................................... 5

5.1.3. Basic Filters (Các yếu tố chọn lọc cơ bản) ........................................................................... 6 5.1.4. Content Filters (Chọn lọc nội dung) ..................................................................................... 7

5.1.5. Visibility Filters .................................................................................................................... 8

5.2 Attributes ...................................................................................................................................... 9

5.2.1 Class ...................................................................................................................................... 9 5.2.2 HTML, Text ........................................................................................................................ 10

5.3 Events ......................................................................................................................................... 10

6. Câu hỏi ôn tập ................................................................................................................ 12

7. Tài liệu tham khảo .......................................................................................................... 13

Microsoft Vietnam – DPE Team | Bài số 9: jQuery 2

Bài số 9

JQUERY

Bài này giới thiệu tổng quan jQuery.

1. JQUERY là gì?

jQuery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết JavaScript và tăng tốc độ xử

lý các sự kiện trên trang web. Các thư viện jQuery cung cấp một mục đích chung là sự trừu tượng hoá các lớp

phổ biến cho các trang web scripting, do đó nó hữu ích trong hầu hết các tình huống scripting.

Các chức năng jQuery bao gồm:

Chọn một tag hoặc một tập hợp các tag trên trang web.

Cung cấp các hàm tiện ích thông dụng.

Nhanh chóng tạo ra các tag mới.

Quan trọng nhất là phân tách việc thiết kế và lập trình web trên phía client.

2. Download jQuery

jQuery là một thư viện script, do đó chúng ta có thể thêm vào trang web. Chúng ta có thể download phiên

bản mới nhất của jQuery từ http://docs.jquery.com/Downloading_jQuery.

Như hình 1 ở trên phiên bản mới nhất của jQuery là 1.3.2, sau khi download về chúng ta được file “jquery-

1.3.2.js”, sau đó để viết ứng dụng bạn chỉ cần nhúng file “jquery-1.3.2.js” vào phần javascript của trang.

Trong Visual Studio 2008 SP1 đã hỗ trợ đầy đủ các chức năng của JavaScript Intellisense. Để Visual Studio

hỗ trợ Intellisense cho jQuery, chúng ta cần cài đặt thêm “Visual Studio 2008 Patch KB958502”, và download

từ:

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736.

Sau đó chúng ta download file “jquery-1.3.2-vsdoc.js” từ:

http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc.js

Mục đích chính của “jquery-1.3.2-vsdoc.js” là giúp đỡ chúng ta trong việc viết các dòng chú thích và hỗ trợ

cho việc phát sinh mã thông minh trong khi soạn thảo jQuery.

Hình 1: Downdload jQuery

http://docs.jquery.com/Downloading_jQuery

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736



3. Sử dụng jQuery trong ASP.NET

Chúng ta tạo một project (Vi_du_9) sau đó thêm 2 file “jquery-1.3.2.js” và “jquery-1.3.2-vsdoc.js” vào

trong project (hình 2).

Trước khi viết các câu lệnh jQuery là bạn chỉ cần khai báo sử dụng thư viện jQuery như sau:

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

Inherits="_Default" %>





<title>Vi_du_9</title>

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

<script src="jquery-1.3.2.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

</div>

</form>

</body>

</html>

4. jQuery hoạt động như thế nào?

4.1. Chạy mã khi Document Ready (trang đã sẵn sàng)

Có thể thấy rằng hầu hết khi lập trình với Javascript, kết thúc mã thực thi bằng cách thêm các dòng mã vào

script, tương tự như sau:

window.onload = function() { … }

Các mã bên trong đó sẽ được thực thi khi trang được tải xong. Tuy nhiên, mã Javascript không chạy cho đến

khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng

window.onload là để chắc chắn rằng HTML 'document' phải được tải xuống hết, sau đó mới chạy mã kia.

Để giải quyết, jQuery có câu lệnh đơn giản, được biết như:

$(document).ready(function() {

//Mã của chúng ta

});

Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý chúng ta muốn.

Hình 2


4.2. Function $()

Khi chúng ta làm việc với CSS, Xpath hoặc custom, jQuery sử dụng function $() (dấu $ và cặp dấu

ngoặc). Dưới dây là một số thành phần trong $():

$("p"): p là tên của một thẻ (tag).

$("#id"): id là tên của một id.

$(".class"): class là tên của một lớp.

5. Một số API trong jQuery

5.1. Selectors

5.1.1. Basic

id #

Trả về một phần tử của mảng: Array <Element>

Nó tương ứng với một phần tử duy nhất được gán bởi thuộc tính id.

Nếu id chứa các ký tự như dấu chấm (.) hoặc 2 dấu [] thì chúng phải thêm 2 dấu ngạch chéo (\\)

vào trước các ký tự đó.

Nếu là $("#some.id") thì phải viết thành $("#some\\.id")

Nếu là $("#some[id]") thì phải viết thành $("#some\\[id]\\")

element

Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử với tên được gán.

.class


Tương ứng với tất cả các phần tử với tên lớp.

*


Tương ứng với tất cả các phần tử.

selector1, selector2, selectorN


Phù hợp với sự kết hợp của tất cả các kết quả xác định selectors, số lượng selectors là bất kỳ, trật tự

của các phần tử DOM trong đối tượng jQuery không nhất thiết phải đúng thứ tự.

Ví dụ: Vi_du_9_1.aspx

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

Inherits="Vi_du_9_1" %>




<head id="Head1" runat="server">

<title>Vi_du_9_1</title>



<script type="text/javascript" language="javascript">


$("#div1").css("color", "red");

$("#div3\\.1\\.\\[0\\]").css("color", "red");

$("div").css("width", "200px");

$("div").css("height", "100px");

$(".Class1").css("color", "red");

$("*").css("border", "1px solid blue");

http://docs.jquery.com/Types#Array

http://docs.jquery.com/Types#Element






$("div,span").css("background-color", "#EEEEEE");

});

</script>

<style type="text/css" >

div {

float:left;padding: 5px;margin: 5px;

}

.Class1{

}

</style>

</head>

<body >

<div id="div1" align="center" >Visual Studio 2008</div>

<div id="div2" align="center">ASP.NET 3.5</div>

<div id="div3.1.[0]" align="center"> <a

href="http://docs.jquery.com/Downloading_jQuery"> Download jQuery </a></div>

<br />

<span class="Class1">Chào mừng bạn đến với jQuery</span>

</body>

</html>

5.1.2. HIERACHY

ancestor descendant Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử với danh nghĩa descendant của các phần tử xác định bởi danh nghĩa

“ancestor”.

Ví dụ: $("form input").css("border", "2px dotted blue");

parent > child Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử con dưới danh nghĩa “child” của phần tử được xác định với danh nghĩa

“parent”.

Ví dụ: $("#main > *").css("border", "3px double red");

prev + next Kiểu trả về: Array<Element(s)>

Phù hợp với tất cả các yếu tố sau được xác định bởi "kế tiếp" bên cạnh đó là yếu tố xác định bởi

"prev".

Ví dụ: $("label + input").css("color", "blue").val("Labeled!");

prev ~ siblings Kiểu trả về: Array<Element(s)>

Phù hợp với tất cả các yếu tố sau "prev" và với các yếu tố lọc "siblings" (liên quan) của selector.

Ví dụ: $("#prev ~ div").css("border", "3px groove blue");













$("form input").css("border", "1px solid blue");

$("#submit > *").css("border", "1px solid red");

$("label + input").css("background-color", "#EEEEEE");

});

</script>


body { font-size:14px; }

form { border:2px green solid; padding:2px; margin:0; background:#efe; }

div { color:red; }

fieldset { margin:1px; padding:3px; }

http://docs.jquery.com/Selectors/descendant#ancestordescendant



http://docs.jquery.com/Selectors/child#parentchild



http://docs.jquery.com/Selectors/next#prevnext



http://docs.jquery.com/Selectors/siblings#prevsiblings




</style>

</head>

<body>

<form id="form1" runat ="server" >

<div id="main">Nhập thông tin cá nhân </div>

<br />

Họ và tên:<input type="text" size="50" />

<fieldset>

<legend>Nơi công tác</legend>

<label>Tên công ty:</label>

<input type="text" size="50" /><br />

<label>Địa chỉ:</label>

<input type="text" size="100" /><br />

</fieldset>

<br />

Hộ khẩu thường trú: <input type="text" size="100" /><br /><br />

<div id="submit">

<button>Cập nhật</button>

<button>Hủy bỏ</button>

</div>

</form>

</body>

</html>

5.1.3. Basic Filters (Các yếu tố chọn lọc cơ bản)

:first Kiểu trả về: Array<Element(s)>

Tương ứng với phần tử đầu tiên được chọn. Ví dụ: $("tr:first").css("font-style", "italic");

:last Kiểu trả về: Array<Element(s)>

Tương ứng với phần tử cuối cùng được chọn. Ví dụ: $("tr:last").css("background-color", "yellow");

:not(selector) Kiểu trả về: Array<Element(s)>

Bỏ ra tất cả các phần tử tương ứng cho selector. Ví dụ: $("input:not(:checked)+span").css("background-color", "yellow");

:even Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử chẵn, chỉ số 0, 2, 4, …

Ví dụ: $("tr:even").css("background-color", "#bbbbff");

:odd Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử lẻ, chỉ số 1, 3, 5, …

Ví dụ: $("tr:odd").css("background-color", "#bbbbff");

:eq(index) Kiểu trả về: Array<Element(s)>

Tương ứng với một phần tử riêng lẻ bởi chỉ số của nó.

Ví dụ: $("td:eq(2)").css("color", "red");

:gt(index) Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần ở trên chỉ số được gán.

Ví dụ: $("td:gt(2)").css("color", "red");

:lt(index) Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần ở dưới chỉ số được gán.

Ví dụ: $("td:lt(2)").css("color", "blue");

:header Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử tiêu đề, giống như h1, h2, h3…

http://docs.jquery.com/Selectors/first



http://docs.jquery.com/Selectors/last



http://docs.jquery.com/Selectors/not#selector



http://docs.jquery.com/Selectors/even














Ví dụ: $(":header").css({ background: '#CCC', color: 'blue' });













$("tr:first").css("font-style", "italic");

$("tr:last").css({ backgroundColor: 'yellow', fontWeight: 'bolder' });

$("tr:even").css("color", "red");

$("tr:odd").css("color", "blue");

$("tr:eq(4)").css("text-decoration", "line-through");

$("tr:gt(6)").css("font-size", "30px");

$("tr:lt(3)").css("font-size", "25px");

$(":header").css({ background: '#CCC', color: 'blue' });

});

</script>

</head>

<body>

<table border="1">

<tr><td>Dòng thứ 1</td></tr>









</table>

<h1>Tiêu đề 1</h1>

<p>Nội dung 1</p>

<h2>Tiêu đề 2</h2>

<p>Nội dung 2</p>

</body>

</html>

5.1.4. Content Filters (Chọn lọc nội dung)

:contains(text) Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử chứa nội dung văn bản.

Ví dụ: Gạch chân tất cả các thẻ “div” có chứa từ “John”.

$("div:contains('John')").css("text-decoration", "underline");

:empty Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử không có phần tử con

Ví dụ: Chèn xâu “Không có nội dung” màu đỏ vào các thẻ “td” không có phần tử con.

$("td:empty").text("Không có nội dung!").css('color','red');

:has(selector) Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử bao gồm ít nhất một phần tử phù hợp với định danh selector.

Ví dụ: Đặt cỡ chữ là 30px cho đoạn văn có nằm trong các thẻ “div” có chứa thẻ “p”.

$("div:has(p)").css("font-size", "30px");

:parent Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử là cha (chứa các phần tử con, gồm cả phần tử văn bản).










Ví dụ: Đặt cỡ chữ là 30px cho các thẻ “td” cha có phần tử con.

$("td:parent)").css("font-size", "30px");













$("div:contains('Thị')").css("text-decoration", "underline");

$("td:empty").css("background-color", "#EEEEEE");

$("div:has(p)").css("font-size", "30px");

$("td:parent").css("color", "yellow");

});

</script>


td {width:200px;background:green; }

</style>

</head>

<body>

<div><h2>Danh sách lớp 12A3</h2></div>

<div>Đỗ Thị Thu Hằng</div>

<div>Lê Văn Bình</div>

<div>Trần Thị Hương</div>

<div>Nguyễn Hải Nam</div>

<div>Hoàng Thu Bình</div>

<br />

<table border="1">

<tr><td>TD #0</td><td></td></tr>

<tr><td>TD #2</td><td></td></tr>

</table>

<div><p>Chào bạn đến với jQuery</p></div>

<div>Chào bạn đến với jQuery</div>

</body>

</html>

5.1.5. Visibility Filters

:hidden Kiểu trả về: Array<Element(s)>

Tương ứng với tất cả các phần tử được ẩn đi hoặc phần tử vào có dạng ẩn “hidden”.

Ví dụ: Ẩn các thẻ “div”.

$("div:hidden").show(3000);

:visble Kiểu trả về: Array<Element(s)>

Tương ứng với các phần tử nhìn thấy được

Ví dụ: Click chuột vào các thẻ div nhìn thấy được.

$("div:visible").click(function() {$(this).css("background", "yellow");});


















$("span:first").text("Tìm thấy " + $(":hidden", document.body).length +

" phần tử ẩn.");

$("div:hidden").show(3000);

$("span:last").text("Tìm thấy " + $("input:hidden").length + " inputs

ẩn.");

$("div:visible").click(function() {

$(this).css("background", "yellow");

});

});

</script>

<style type ="text/css" >

div { width:70px; height:40px; background:#ee77ff; margin:5px;

float:left; }

span { display:block; clear:left; color:red; }

.starthidden { display:none; }

</style>

</head>

<body>

<span></span>

<div></div>

<div style="display:none;">Ẩn</div>

<div></div>

<div class="starthidden">Ẩn</div>

<div></div>

<input type="hidden" />



<span></span>

</body>

</html>

5.2 Attributes

5.2.1 Class

addClass( class ) Kiểu trả về: jQuery

Thêm các class đã xác định vào mỗi tập phần tử phù hợp. Nếu có thêm nhiều class thì các class được

các nhau bởi khoảng trắng.

Ví dụ: Thêm class “Maudo” vào các thẻ p.

$("p").addClass("Maudo");

removeClass( class ) Kiểu trả về: jQuery

Loại bỏ tất cả hoặc các class đã xác định khỏi tập phần tử phù hợp.

Ví dụ: Loại bỏ lass “Maudo” khỏi các thẻ p.

$("p").removeClass("Maudo");

toggleClass( class ) Kiểu trả về: jQuery

Thêm class nếu class chưa tồn tại hoặc loại bỏ nếu class đã tồn tại.

Ví dụ: Thêm class “Maudo” vào thẻ p nếu class “Maudo” chưa tồn tại trong thẻ p hoặc loại bỏ

class “Maudo” khỏi thẻ p nếu nó tồn tại.

$("p").toggleClass("Maudo");














$("p").addClass("under");

$("p:last").removeClass("highlight");

$("p").click(function() {

$("p").removeClass("highlight");

$(this).toggleClass("highlight");

});

});

</script>


p { margin: 4px; font-size:16px; font-weight:bolder; }

.blue { color:blue; }

.under { text-decoration:underline; }

.highlight { background:yellow; }

</style>

</head>

<body>

<p class="blue">Visual Studio 2000</p>

<p class="blue">ASP.NET 3.5</p>

<p class="blue highlight">Chào mừng bạn đến với jQuery</p>

</body>

</html>

5.2.2 HTML, Text

html() Kiểu trả về: String

Lấy nội dung html (innerHTML) của phần tử.

Ví dụ: Mỗi khi click vào thẻ p lấy nội dung html của thẻ p đó và thông báo nội dung lấy được.

$("p").click(function() {alert($(this).html())});

html( val ) Kiểu trả về: jQuery

Thiết lậ nội dung html (innerHTML) cho phần tử.

Ví dụ: Thiết lập nội dung html cho thẻ div.

$("div").html("<b>Chào các bạn!<i> Chúc buổi học hôm nay thú vị.</i></b>");

text() Kiểu trả về: String

Lấy nội dung text (innerText) của phần tử.

Ví dụ: Mỗi khi click vào thẻ p lấy nội dung text của thẻ p đó và thông báo nội dung lấy được.

$("p").click(function() {alert($(this).html())});

text( val ) Kiểu trả về: jQuery

Thiết lập nội dung text (innerText) cho phần tử.

Ví dụ: Thiết lập nội dung text cho thẻ div.

$("div").text("Chào các bạn! Chúc buổi học hôm nay thú vị");

5.3 Events

Bind( type, [data], fn )

Bind một hander vào một sự kiện cho mỗi phần tử phù hợp, “type” là sự kiện, “[data]” (tùy chọn)

thêm dữ liệu thông qua sự kiện, “fn” là hàm xử lý khi sự kiện đó xảy ra.


one( type, [data], fn )

Bind một hander vào một sự kiện và nó được thực thi 1 lần cho mỗi phần tử phù hợp.

trigger( type, [data] )

Kích một sự kiện trên mọi phần tử phù hợp.

unbind( [type], [data] )

Loại bỏ sự kiện khỏi phần tử

hover( over, out )

over, out là 2 hàm xử lý sự kiện. Hàm over xử lý khi chuột di chuyển trên phần tử hàm out xử lý khi

chuột rời khỏi phần tử

toogle( fn, fn )

Chuyển đổi gọi hàm giữa 2 lần click.













$("p:first").bind("click", function(e) {

var str = "( " + e.pageX + ", " + e.pageY + " )";

$("span:first").text("Sự kiện click vừa xảy ra tại vị trí " + str);

});

$("p:first").bind("dblclick", function() {

$("span:first").text("Sự kiện click đúp vừa xảy ra tại thẻ " +

this.tagName);

});

var n = 0;

$("div:lt(2)").one("click", function() {

var index = $("div").index(this) + 1;

$(this).css({ borderStyle: "inset",

cursor: "auto"

});

$("p:last").text("Hình chữ nhật thứ " + index + " vừa được click."

+

" Tổng cộng có " + ++n + " click.");

});

$("button:eq(0)").click(function() {

update($("span:eq(1)"));

});

$("button:eq(1)").click(function() {

$("button:first").trigger('click');

update($("span:eq(2)"));

});

function update(j) {

var n = parseInt(j.text(), 0);

j.text(n + 1);

}

function aClick() {

$("div:last").show().fadeOut("slow");

}


$("#bind").click(function() {

// could use .bind('click', aClick) instead but for variety...

$("#theone").click(aClick).text("Có thể click");

});

$("#unbind").click(function() {

$("#theone").unbind('click', aClick)

.text("Không làm gì cả....");

});

$("li").hover(

function() {

$(this).css("color", "red");

},

function() {

$(this).css("color", "black");

}

);

});

</script>


p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; }

span { color:red; }

.div1 { width:60px; height:60px; margin:5px; float:left;

background:green; border:5px outset;

cursor:pointer; }

</style>

</head>

<body>

<p>Click hoặc click đúp vào đây.</p>

<span></span>

<p>Hãy click vào các hình chữ nhật màu xanh</p>

<div class="div1" ></div>

<div class="div1"></div>

<br /><br /><br /><br /><br />

<button>Button thứ 1</button>

<button>Button thứ 2</button>

<div><span>0</span> lần button thứ 1 được click.</div>

<div><span>0</span> lần button thứ 2 được clicks.</div>

<button id="theone">Không làm gì cả....</button>

<button id="bind">Bind Click</button>

<button id="unbind">Unbind Click</button>

<div style="display:none;">Click!</div>

<br />

<p>Hãy di chuyển chuột lên Máy bay, Ôtô, Xe máy, Xe đạp</p>

<ul>

<li>Máy bay</li>

<li>Ôtô</li>

<li>Xe máy</li>

<li>Xe đạp</li>

</ul>

</body>

</html>


1. jQuery là gì?

Trả lời:

jQuery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết JavaScript và tăng tốc độ xử

lý các sự kiện trên trang web. Các thư viện jQuery cung cấp một mục đích chung là sự trừu tượng hoá các lớp

phổ biến cho các trang web scripting, do đó nó hữu ích trong hầu hết các tình huống scripting.

Các chức năng jQuery bao gồm:

Chọn một tag hoặc một tập hợp các tag trên trang web.

Cung cấp các hàm tiện ích thông dụng.


Nhanh chóng tạo ra các tag mới.

Quan trọng nhất là phân tách việc thiết kế và lập trình web trên phía client.

2. Trong Visual Studio 2008 có hỗ trợ Intellisense cho jQuery không?

Trả lời:

Có. Nếu chúng ta downdload và cài đặt file sau:

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736.

Sau đó chúng ta download file “jquery-1.3.2-vsdoc.js” từ:



1. jQuery, URL: http://docs.jquery.com



http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736


http://docs.jquery.com/



Bài số 2

Giơi thiê u vê cach thưc truy câ p dư liê u

Table of Contents

1 Tổng quan ............................................................................................................................... 2

2 Truy cập dữ liệu ADO.NET .......................................................................................................... 3

3 Truy cập dữ liệu XML ................................................................................................................. 4

4 Truy cập dữ liệu với SqlDataSource. ........................................................................................... 5

5 Truy cập dữ liệu LINQ ................................................................................................................. 7

5.1 LINQ cơ bản ................................................................................................................................ 7

5.1.1 Cách làm việc của LINQ ................................................................................................. 7

5.1.2 Cú pháp LINQ ................................................................................................................. 8

5.1.3 Dùng filter và sorting với LINQ ...................................................................................... 8

5.2 LinqDataSource ........................................................................................................................... 8

6 Truy cập dữ liệu với web services ............................................................................................ 11

7 Truy cập dữ liệu với Ajax ......................................................................................................... 12

8 Câu hỏi ôn tập ....................................................................................................................... 14

9 Tài liệu tham khảo ................................................................................................................ 14

Microsoft Vietnam – DPE Team | Bài số 2: Giới thiệu cách thức truy cập dữ liệu 2

1 Tổng quan

Phần lớn các ứng dụng hiện nay đều sử dụng cơ sở dữ liệu. Có nhiều cách thức truy cập dữ liệu khác nhau trong

các công nghệ của Microsoft như ADO, RDO, DAO, ODBC. Tuy nhiên từ khi .NET Framework ra đời thì công

nghệ ADO.NET đã được tích hợp, ADO.NET chứa các lớp cho phép các ứng dụng connect data sources (kết nối

với các nguồn dữ liệu), execute commands (thực hiện các lệnh), manage disconnected data (quản lý dữ liệu đã

ngắt kết nối). Với ADO.NET người lập trình có thể viết ít mã lệnh thao tác cơ sở dữ liệu hơn so với các công

nghệ trước trong các ứng dụng client-server hoặc các ứng dụng trên desktop.

Mặt khác, trong ASP.NET từ phiên bản .NET Framework 2.0 trở lên có thêm các thao tác với cơ sở dữ liệu mà

không sử dụng ADO.NET như SqlDataSource, LINQ hoặc Profiles.

Ngoài ra các ứng dụng truy cập dữ liệu của .NET Framework còn có thể truy nhập vào các nguồn dữ liệu ngoài

như File, Stream, XML, Ajax, web services, WCF, data services.

Trong hướng dẫn này, ta sẽ tạo ra một Web site project thao tác với cơ sở dữ liệu. Sử dụng Visual Studio 2008

tạo một project Website. Trong đó tạo một database tên là DB_TEST.MDF trong folder App_Data (Figure 1)

Figure 1. Tạo database DB_TEST trong ứng dụng Website

Sử dụng database DB_TEST tạo 2 table HangHoa và KhoHang (Figure 2, Figure 3)


Figure 2. Table HangHoa trong database DB_TEST

Figure 3. Table KhoHang trong database DB_TEST

Tạo một chuỗi connection trong file cấu hình web.config đặt tên là ConnectionString cho phép truy nhập vào cơ

sở dữ liệu DB_TEST.MDF

web.config

<configuration>

<connectionStrings>

<add name="ConnectionString" connectionString="Data

Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\DB_TEST.mdf;Integrated

Security=True;User Instance=True"

providerName="System.Data.SqlClient" />

</connectionStrings>

// … các thiết lập cấu hình khác …

</configuration>

2 Truy cập dữ liệu ADO.NET

ADO.NET Data Providers cho phép truy nhập vào một cơ sở dữ liệu cụ thể, thực hiện các câu lệnh SQL và nhận

dữ liệu. Data provider là chiếc cầu nối giữa ứng dụng và nguồn dữ liệu.

Lớp ADO.NET Data Provider bao gồm các thành phần: Connection: Thực hiện connect tới nguồn cơ sở dữ liệu;

Command: Thực hiện một câu lệnh SQL hoặc một store procedures; DataReader: Chỉ đọc và nhận dữ liệu từ một

truy vấn; DataAdapter thực hiện 2 nhiệm vụ: Điền dữ liệu nhận được vào một DataSet, có thể ghi nhận sự thay

đổi dữ liệu trong DataSet.

Một ví dụ sử dụng ADO.NET với đối tượng hiển thị dữ liệu là GridView. Tạo một webform đặt tên là

Adonet.aspx, trong webform đó tạo một GridView đặt tên là GridView1. Mã lệnh thực hiện kết nối dữ liệu:

Adonet.aspx.cs

SqlConnection conn = new

SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].Connection

String);


SqlCommand sql = new SqlCommand("SELECT * FROM HangHoa", conn);

DataSet ds = new DataSet();

SqlDataAdapter sda = new SqlDataAdapter(sql);

sda.Fill(ds,"HangHoa");

DataTable dt = ds.Tables["HangHoa"];

GridView1.DataSource = dt.DefaultView;

GridView1.DataBind();

Figure 4. Thực hiện chương trình với truy nhập dữ liệu ADO.NET

3 Truy cập dữ liệu XML

Dữ liệu XML ngày càng thông dụng và được phát triển mạnh mẽ hơn trước. Trong các ứng dụng ngày nay, việc

sử dụng XML thay cho dữ liệu truyền thống đang có xu hướng phát triển mạnh mẽ. Tuy nhiên các ứng dụng sử

dụng XML làm cơ sở dữ liệu vẫn còn ở mức quy mô nhỏ và hạn chế.

Ví dụ sử dụng GridView để hiển thị dữ liệu trong một file XML.

Employee.xml

<?xml version="1.0" encoding="utf-8" ?>

<JobDataSet>

<Employees>

<Name>Nguyen Van A</Name>

<Birthday>1988</Birthday>

<Jobs>Student</Jobs>

</Employees>

<Employees>

<Name>Do Nhu B</Name>

<Birthday>1989</Birthday>

<Jobs>Engineer</Jobs>

</Employees>

</JobDataSet>

XML.aspx.cs


ds.ReadXml(Server.MapPath("Employee.xml"));

DataTable dt = ds.Tables["Employees"];

GridView1.DataSource = dt.DefaultView;



Figure 5. Thực hiện truy cập dữ liệu XML

4 Truy cập dữ liệu với SqlDataSource.

SqlDataSource là một thành phần được giới thiệu từ .NET Framework 2.0. Sử dụng SqlDataSource để truy cập

dữ liệu sẽ không cần phải viết mã lệnh lập trình, chỉ cần khai báo đầy đủ các thuộc tính cần. SqlDataSource chỉ

nên dùng khi không cần sử dụng các truy vấn SQL quá phức tạp để thao tác với cơ sở dữ liệu.

SqlDataSource là một cách thức kết nối dữ liệu dùng ADO.NET provider (System.Data.SqlClient,

System.Data.OracleClient, System.Data.OleDbClient, System.Data.OdbcClient). SqlDataSource cần có một

connectionString thường đặt trong web.config. Tiếp theo của SqlDataSource là một câu lệnh SQL có thể là một

câu lệnh truy vấn SELECT hoặc các câu lệnh liên quan đến thay đổi dữ liệu như: DELETE, INSERT, UPDATE.

Figure 6. Tạo SqlDataSource truy cập cơ sở dữ liệu


Figure 7. Lựa chọn kết nối cơ sở dữ liệu trong SqlDataSource

Lựa chọn table cần hiển thị dữ liệu vào trong SqlDataSource (ví dụ table KhoHang) sau đó thiết lập GridView trỏ

vào SqlDataSource vừa được tạo (Figure 8)

Figure 8. Lựa chọn SqlDataSource1 cho GridView1


Figure 9. Thực hiện truy cập dữ liệu với SqlDataSource

5 Truy cập dữ liệu LINQ

LINQ là một sự sáng tạo mới trong .NET Framework 3.5 (Language Integrate Query) là một tập hợp mở rộng

ngôn ngữ cho phép thực hiện các truy vấn trong ngôn ngữ C# 2008 và Visual Basic 2008. LINQ cho phép select,

filter, sort, group và transform data từ các nguồn data source khác nhau theo một cách chung. LINQ to Objects

thực hiện truy vấn các đối tượng, LINQ to DataSet thực hiện truy vấn DataSet, LINQ to SQL thực hiện truy vấn

đến cơ sở dữ liệu SQL Server mà không phải viết code, LINQ to XML đọc dữ liệu từ định dạng XML.

5.1 LINQ cơ bản

Ví dụ, nếu không dùng LINQ cho, cần lấy tất cả hàng hóa bắt đầu bằng B thì ta có code sau:

DanhMucHangHoa dm = new DanhMucHangHoa();

List<HangHoaChiTiet> dshh = dm.LayDanhMucHangHoa();

List<HangHoaChiTiet> dmhh = new List<HangHoaChiTiet>();

foreach (HangHoaChiTiet hh in dshh)

{

if (hh.HangHoa_TenHang.ToString().StartsWith("B"))

{

dmhh.Add(hh);

}

}

Nếu sử dụng LINQ trong mã lập trình:

List<HangHoaChiTiet> dshh = dm.LayDanhMucHangHoa();

IEnumerable<HangHoaChiTiet> dmhh;

dmhh = from hh in dshh

where hh.HangHoa_TenHang.ToString().StartsWith("B")

select hh;

GridView1.DataSource = dshh;


5.1.1 Cách làm việc của LINQ

Để dùng LINQ cần tạo ra một LINQ expression theo đúng quy tắc.

Giá trị trả về của LINQ expression là một đối tượng iterator thực thi giao diện IEnumerable<T>

Khi enumerable đã được gán vào iterator thì LINQ thực hiện.


5.1.2 Cú pháp LINQ

Cú pháp của LINQ tương tự như một cú pháp của SQL nhưng có trật tự khác với SQL.


…;

Ví dụ:

IEnumerable<HangHoaChiTiet> dmhh = from hh in dshh

select hh.HangHoa_TenHang;

5.1.3 Dùng filter và sorting với LINQ



where hh.HangHoa_TenHang.ToString().StartsWith("B")

select hh;

hoặc



orderby hh.HangHoa_TenHang

select hh;

Có thể dùng LINQ như sau (hai câu lệnh sau tương đương nhau):

IEnumerable<HangHoaChiTiet> dmhh = from hh in dshh

select hh;

IEnumerable<HangHoaChiTiet> dmhh = hh.Select(hh => hh);

5.2 LinqDataSource

LinqDataSource là một control có thể thực hiện nhiều tác vụ thêm, sửa, xóa dữ liệu một cách tự động. Với

LinqDataSource không cần viết code cho cả việc cập nhật, sửa đổi dữ liệu cũng giống như SqlDataSource.

Trước hết cần phải tạo ra một Linq to SQL class: File New File LINQ to SQL class (Figure 10)


Figure 10. Tạo ra một LinqSqlDataContext cho phép LinqDataSource truy nhập

Tạo ra mô hình LinqSqlDataContext cho phép Linq lấy dữ liệu từ database DB_TEST.MDF (Figure 11)

Figure 11. Mô hình LinqSqlDataContext

Thiết lập cấu hình cho control Linqdatasource1: Chọn Linqdatasource1 Configure Data Source… Chọn

LinqSqlDataContext (Figure 12)


Figure 12. LinqDataSource Configure Data Source…

Thực hiện đưa dữ liệu từ LinqDataSource vào vào GridView (Figure 13)

Figure 13. Chọn DataSource của GridView1 là LinqDataSource1


Figure 14. Thực hiện truy cập dữ liệu với LinqDataSource

6 Truy cập dữ liệu với web services

Web services là một ứng dụng quan trọng trong các ứng dụng. Phần lớn các ứng dụng hiện nay đều sử dụng web

services. Cách đơn giản nhất là thông qua HTTP-POST hoặc HTTP-GET hoặc SOAP. Mục đích của web

services là các ứng dụng khác nhau có thể sử dụng các phương thức web services có sẵn mà không cần phải viết

lại chúng nên sẽ tiết kiệm nhiều thời gian và công sức.

Từ Solution Explorer Website chọn Add New Item Web Service WebService.asmx (Figure 15)

Figure 15. Tạo web services trong ứng dụng

Mặc định với mỗi web service được tạo ra trong các ứng dụng sử dụng Visual Studio đều có sẵn phương thức

HelloWorld. Phương thức này trả về một giá trị string là “Hello World”. Ta tạo thêm một phương thức

DanhMucHangHoa để truy cập vào dữ liệu đã có trong ứng dụng. Các phương thức trong web services được tạo


như các phương thức bình thường trong ứng dụng nhưng có thêm thuộc tính chỉ định nó là một web services ký

pháp là [WebMethod].

WebService.asmx.cs

[WebMethod]

public DataSet DanhMucHangHoa()

{

SqlConnection conn = new

SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].Connection

String);


SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM HangHoa", conn);

sda.Fill(ds, "HangHoa");

return ds;

}

Dùng một GridView để nhận dữ liệu từ phương thức DanhMucHangHoa của web services để kiểm tra xem dữ

liệu nhận được như thế nào. Từ Website Add New Item WebForm WebServices.aspx

WebServices.aspx.cs

protected void Page_Load(object sender, EventArgs e)

{

WebService vs = new WebService();

GridView1.DataSource = vs.DanhMucHangHoa().Tables["HangHoa"].DefaultView;


}

Kết quả khi thực hiện (Figure 16)

Figure 16. Kết nối dữ liệu với web services

7 Truy cập dữ liệu với Ajax

Hiện nay công nghệ AJAX đang được ưa chuộng trong lĩnh vực lập trình web. Thiếu vắng AJAX thì nền tảng

được coi là Web 2.0 sẽ không còn tồn tại. Về mặt công nghệ Ajax cho ta một cái nhìn mới về tương tác giữa web

client và web server. Ajax được coi là chiếc cầu nối giữa client và server, làm tăng tốc độ thực hiện của ứng

dụng, làm ẩn đi cơ chế postback khiến người dùng tưởng như đang làm việc trên một ứng dụng desktop hơn là

một ứng dụng web.


Ajax sử dụng XMLHttpRequest của trình duyệt để gửi một yêu cầu đến web server thay cho Request truyền

thống. Dữ liệu từ web server trả về cho XMLHttpRequest có dạng một tài liệu XML hoặc một tài liệu dạng Text.

Dữ liệu này có thể được xử lý bởi các hàm Javascript trước khi được trả lại cho trình duyệt. Khác với cách gửi

request – response truyền thống thì dữ liệu từ web server trả về cho client được trình duyệt hiển thị ngay mà

không qua một bước xử lý trung gian nào nữa.

Sử dụng các framework AJAX có sẵn để gọi Ajax. Ví dụ ta gọi URL http://localhost:49163/WebSite/Adonet.aspx

bằng ajax của thư viện miễn phí prototype.js như sau (Figure 17)

Figure 17. Sử dụng AJAX

AJAX có 2 dạng dữ liệu được trả về là responseText và responseXML. Tùy từng mục đích sử dụng mà có thể lựa

chọn cách thức lấy dữ liệu về cho hợp lý. Mặt khác, khi nhận được dữ liệu từ AJAX trả về có thể xử lý trước khi

hiển thị dữ liệu cho người dùng cuối.

Kết quả thực hiện Ajax với tham số URL: http://localhost:49163/WebSite/Adonet.aspx (Figure 18)

http://localhost:49163/WebSite/Adonet.aspx

http://localhost:49163/WebSite/Adonet.aspx


Figure 18. Gọi AJAX với tham số URL

8 Câu hỏi ôn tập

Câu hỏi: Từ khi có các control SqlDataSource, LinqDataSource thì có cần thiết dùng các đối tượng của

ADO.NET (Connection, Command, Adapter,… ) để truy cập dữ liệu nữa không?

Trả lời: Vẫn cần thiết vì dù các đối tượng SqlDataSource, LinqDataSource rất linh hoạt và có thể đảm đương hầu

hết các chức năng nhưng vẫn chưa thể cung cấp đủ cho nhu cầu người dùng nhất là đối với những thao tác phức

tạp lên cơ sở dữ liệu.

Câu hỏi: Khi cần thực hiện lấy dữ liệu từ một table trong cơ sở dữ liệu sử dụng ADO.NET rồi đưa vào đối tượng

DataTable thì cần các bộ thành phần nào sau đây:

A. Connection, Command, Adapter

B. Connection, DataSet, Adapter

C. Connection, DataTable, DataSet

D. Command, Adapter, DataTable

Trả lời: Đáp án B.

9 Tài liệu tham khảo

http://www.codegod.de/webappcodegod

http://www.asp.net/

http://www.linqhelp.com/

http://www.codegod.de/webappcodegod

http://www.asp.net/

http://www.linqhelp.com/

Bài số 3

Tổng quan về ASP.NET MVC Framework

Table of Contents

1 Tại sao sử dụng ASP.NET MVC ............................................................................................ 2

1.1 ASP.NET MVC là gì ................................................................................................................. 2

1.1.1 Mô hình MVC cơ bản .................................................................................................... 2

1.1.2 Một vài đặc tính trong ASP.NET MVC ........................................................................... 2

1.2 Sự khác biệt với WebForm ..................................................................................................... 3

2 Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework ................................................ 4

2.1 Tạo Project vơi ASP.NET MVC Web Application ........................................................................ 4

2.2 Tìm hiểu định tuyến URL ............................................................................................................ 8

2.3 Xây dựng mô hinh dư liê u .......................................................................................................... 9

2.3.1 Tao cơ sơ dư liê u .......................................................................................................... 9

2.3.2 Sư dung mô hinh LINQ to SQL ..................................................................................... 10

2.4 Tìm hiểu về Controllers ............................................................................................................ 14

2.5 Tìm hiểu về Views ..................................................................................................................... 16

2.6 Tìm hiểu về Models .................................................................................................................. 18

2.7 Câu truc Views\Shared\Site.Master ......................................................................................... 20

2.8 Kêt qua ...................................................................................................................................... 21

3 Câu hỏi ôn tập ....................................................................................................................... 21

4 Tài liệu tham khảo ................................................................................................................ 22

Microsoft Vietnam – DPE Team |Bài số 3: Tổng quan về ASP.NET MVC Framework 2

1 Tại sao sư dụng ASP.NET MVC

1.1 ASP.NET MVC là gì

1.1.1 Mô hình MVC cơ bản

MVC viết tắt của các chữ cái đầu của Models, Views, Controllers. MVC chia giao diện UI thành 3 phần tương

ứng: đầu vào của controller là các điều khiển thông qua HTTP request, model chứa các miền logic, view là những

thứ được sinh ra trả về cho trình duyệt.

Figure 1. Mô hình MVC cơ bản

Lợi ích của việc dùng phương pháp MVC là sự phân đoạn rõ ràng giữa models, views, controllers bên trong ứng

dụng. Cấu trúc sạch sẽ giúp cho việc kiểm tra lỗi ứng dụng trở nên dễ dàng hơn.

1.1.2 Một vài đặc tính trong ASP.NET MVC

Tách rõ ràng các mối liên quan, mở khả năng test TDD (test driven developer). Có thể test unit trong ứng

dụng mà không cần phải chạy Controllers cùng với tiến trình của ASP.NET và có thể dùng bất kỳ một unit

testing framework nào như NUnit, MBUnit, MS Test, v.v…

Có khả năng mở rộng, mọi thứ trong MVC được thiết kế cho phép dễ dàng thay thế/tùy biến ( ví dụ: có thể

lựa chọn sử dụng engine view riêng, routing policy, parameter serialization, v.v…).

Bao gồm một ánh xạ URL mạnh mẽ cho phép xây dựng ứng dụng với những URL sạch, các URL không

cần cs phần mở rộng ( ví dụ: có thể ánh xạ địa chỉ /Products/Edit/4 để thực hiện hành động “Edit” của lớp

điều khiển ProductControllers hoặc ánh xạ địa chỉ /Blog/SomeTopic để thực hiện hành động “Display

Topic” của lớp điều khiển BlogEngineController )

ASP.NET MVC Framework cũng hỗ trợ những file ASP.NET như .ASPX .ASCX và .Master, đánh dấu các

tập tin này như một “view template” ( có thể dễ dàng dùng các tính năng của ASP.NET như lồng các trang

Master, <%= %> snippets, mô tả server controls, template, data-binding, localization, v.v… ). Tuy nhiên sẽ


không còn postback và interactive back server và thay vào đó là interactive end-user tới một Controller

class ( không còn viewstate, page lifecycle )

ASP.NET MVC Framework hỗ trợ đầy đủ các tính năng bảo mật của ASP.NET như forms/windows

authenticate, URL authorization, membership/roles, output và data caching, session/profile state,

configuration system, provider architecture v.v…

1.2 Sự khác biệt với WebForm

ASP.NET WebForm sử dụng ViewState để quản lý, các trang ASP.NET đều có lifecycle, postback và dùng các

web controls, các events để thực hiện các hành động cho UI khi có sự tương tác với người dùng nên hầu hết

ASP.NET WebForm xử lý chậm.

ASP.NET MVC Framework chia ra thành 3 phần: Models, Views, Controllers. Mọi tương tác của người dùng với

Views sẽ được thực hiện hành động trong Controllers, không còn postback, không còn lifecycle không còn

events.

Việc kiểm tra ( test ), gỡ lỗi ( debug ) với ASP.NET đều phải chạy tất cả các tiến trình của ASP.NET và mọi sự

thay đổi ID của bất kỳ controls nào cũng ảnh hưởng đến ứng dụng. Đối với ASP.NET MVC Framework thì việc

có thể sử dụng các unit test có thể thẩm định rất dễ dàng các Controller thực hiện như thế nào.

Tính năng ASP.NET 2.0 ASP.NET MVC

Kiến trúc chương trình Kiến trúc mô hình WebForm

Business Database

Kiến trúc sử dụng việc phân chia

chương trình thành Controllers,

Models, Views

Cú pháp chương trình Sử dụng cú pháp của webform, tất

các sự kiện và controls do server

quản lý

Các sự kiện được điều khiển bởi

controllers, các controls không do

server do server quản lý

Truy cập dữ liệu Sử dụng hầu hết các công nghệ truy

cập dữ liệu trong ứng dụng

Phần lớn dùng LINQ to SQL class

để tạo mô hình truy cập đối tượng

Debug Debug chương trình phải thực hiện

tất cả bao gồm các lớp truy cập dữ

liệu, sự hiển thị, điều khiển các

controls

Debug có thể sử dụng các unit test

kiểm tra các phương thức trong

controller

Tốc độ phân tải Tốc độ phân tải chậm khi trong

trang có quá nhiều các controls vì

ViewState quá lớn

Phân tải nhanh hơn do không phải

quản lý ViewState để quản lý các

control trong trang

Tương tác với javascript Tương tác với javascript khó khăn

vì các controls được điều khiển bởi

server

Tương tác với javascript dễ dàng vì

các đối tượng không do server quản

lý điều khiển không khó

URL Address Cấu trúc địa chỉ URL có dạng

<filename>.aspx?&<các tham số>

Cấu trúc địa chỉ rành mạch theo

dạng Controllers/Action/Id


2 Ví dụ xây dựng ứng dụng với ASP.NET MVC Framework

Tính năng ASP.NET MVC Framework hiện giờ mới là bản Beta trong .NET Framework 3.5. Để xây dựng ứng

dụng với ASP.NET MVC Framework cần có môi trường hoạt động .NET Framework 3.5 ( cụ thể chương trình

sau sẽ xây dựng với Visual Studio 2008 ), tiếp theo cần một MVC Framework. Mặc định trong Visual Studio

2008 chưa có sẵn ASP.NET MVC Web Applications. Có thể download ASP.NET MVC Framework tại địa chỉ

http://www.microsoft.com/downloads/details.aspx?FamilyId=A24D1E00-CD35-4F66-BAA0-

2362BDDE0766&displaylang=en. Cài đặt Visual Studio 2008 sau đó cài đặt ASP.NET MVC Framework. Bây

giờ có thể bắt đầu xây dựng ứng dụng với MVC.

2.1 Tạo Project vơi ASP.NET MVC Web Application

Trong chương trình Visual Studio 2008 đã cài đặt ASP.NET MVC Framework: File New Project Windows

C# ASP.NET MVC Web Application ( xem Figure 2).

Figure 2. Tạo một Projects ASP.NET MVC

Khi tạo một ASP.NET MVC Framework thì một hộp thoại Unit Test xuất hiện. Chọn Yes nếu muốn tạo một

Project Test, chọn No nếu không muốn tạo một Unit Test. ( xem Figure 3)

http://www.microsoft.com/downloads/details.aspx?FamilyId=A24D1E00-CD35-4F66-BAA0-2362BDDE0766&displaylang=en

http://www.microsoft.com/downloads/details.aspx?FamilyId=A24D1E00-CD35-4F66-BAA0-2362BDDE0766&displaylang=en


Figure 3. Tạo Unit Test cho ASP.NET MVC

Sau khi một ứng dụng ASP.NET MVC Web Application được tạo, nhìn vào trong mục Solution Explorer sẽ thấy

xuất hiện mặc định 3 thư mục: Models, Views, Controllers chứa các đối tượng tương ứng với các thành phần

Models, Views, Controllers trong mô hình MVC.

Mở rộng folder Controllers sẽ thấy HomeController.cs, mở rộng Views sẽ thấy folder Home, Shared và Account.

Mở rộng folder Home sẽ thấy About.aspx và Index.aspx ( xem hình Figure 4 )


Figure 4. Solution Explorer MVC

Chạy ứng dụng bằng cách ấn F5. Nếu là ứng dụng mới tạo lần đầu thì sẽ có thông báo hỏi có cho phép mở chế độ

Debug hay không? Nếu đồng ý chọn “Modify the Web.config file to enable debugging”, ko muốn debug chọn

“Run without debugging”. ( xem Figure 5).


Figure 5. Mở Debug trong Web.config ASP.NET MVC

Kết quả khi chạy ứng dụng ( xem Figure 6) là ứng dụng được load vào browser. Trong ví dụ này chỉ có 2 trang là

Index và About.


Figure 6. Thực thi ứng dụng mẫu ASP.NET MVC

2.2 Tìm hiểu định tuyến URL

Browser yêu cầu một địa chỉ từ controller action trong ASP.NET MVC Framework được gọi là định tuyến URL (

URL routing). Url routing sẽ chỉ định request tới controller action. URL routing sử dụng một bảng định tuyến để

điều khiển các request. Bảng định tuyến được tạo khi ứng dụng bắt đầu được chạy lần đầu tiên. Bảng định tuyến

được thiết lập trong file Global.asax

using System;


using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Routing;

namespace HiTest

{

// Note: For instructions on enabling IIS6 or IIS7 classic mode,

// visit http://go.microsoft.com/?LinkId=9394801

public class MvcApplication : System.Web.HttpApplication

{

public static void RegisterRoutes(RouteCollection routes)

{

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(

"Default", // Route

name

"{controller}/{action}/{id}", // URL with

parameters

new { controller = "Home", action = "Index", id = "" } //

Parameter defaults

);

}

protected void Application_Start()

{


}

}

}

Khi ứng dụng chạy lần đầu tiên, phương thức Application_Start() được gọi, phương thức này gọi một phương

thức khác RegisterRoutes(RouteTable.Routes) để tạo ra bảng định tuyến.

Định tuyến mặc định chia một request thành 3 phân đoạn, mỗi phân đoạn nằm giữa 2 dấu “/”. Phân đoạn đầu tiên

chứa tên một controller, phân đoạn thứ 2 chứa tên controller action, phân đoạn thứ 3 là tham số đầu vào của

controller action.

Ví dụ: với địa chỉ /Product/Details/3 được hiểu là:

Controller = ProductController

Action = Detail

Id = 3

Controller mặc định sẽ là HomeController, Action mặc định là Index, Id mặc định là “” http://localhost:1727/

Ví dụ: với địa chỉ /Employee:

http://localhost:1727/


Controller = EmployeeController

Action = Index

Id = “”

2.3 Xây dư ng mô hinh dư liê u

2.3.1 Tao cơ sơ dư liêu

Tư App_Data click phai chuôt chon Add New Item SQL Server Database đăt tên Database.mdf

Figure 7. Tạo cơ sở dư liêu Database.mdf trong App_Data

Trong cơ sơ dư liêu Database.mdf tao 2 table: ( xem Figure 8, Figure 9 )


Figure 8. Bảng SanPham trong cơ sơ dư liêu Database.mdf

Figure 9. Bảng LoaiSanPham trong cơ sở dư liêu Database.mdf

2.3.2 Sư dung mô hinh LINQ to SQL

Trong Solution Explorer click phai chuôt vao Models Add New Item LINQ to SQL Classes (Figure 10)


Figure 10. Tạo LINQ to SQL Classes


Tư Server Explorer Kéo thả 2 tables LoaiSanPham, SanPham vao file DataClasses.dbml

Figure 10. Tạo file DataClasses.dbml sư dung 2 bảng LoaiSanPham va SanPham

Trong file DataClasses.dbml click phai chuôt chon Add Association để tạo liên kêt giưa 2 table. (Figure 11)


Figure 11. Tạo liên kêt giưa cac bảng trong DataClasses.dbml

Kêt qua đươc như Figure 12 dươi đây.

Figure 12. Câu truc cua DataClasses.dbml


2.4 Tìm hiểu về Controllers

Controller chịu trách nhiệm điều khiển các tương tác của người dùng bên trong ứng dụng MVC. Controller sẽ

quyết định cái gì được trả về cho người dùng khi người dùng tạo ra một request trên browser.

Một controller là một class ( C# class hoặc VB class). Trong ví dụ ứng dụng ASP.NET MVC Web Application

mâu luôn tôn tai 2 controller là AccountController.cs và HomeController.cs nằm trong folder Controllers

HomeController.cs

using System;


using System.Linq;

using System.Web;


using System.Web.Mvc.Ajax;

namespace HiTest.Controllers

{

[HandleError]

public class HomeController : Controller

{

public ActionResult Index()

{

ViewData["Title"] = "Home Page";

ViewData["Message"] = "Welcome to ASP.NET MVC!";

return View();

}

public ActionResult About()

{

ViewData["Title"] = "About Page";

return View();

}

}

}

Trong HomeController.cs có 2 phương thức là Index() và About(). Hai phương thức này là 2 action trong

controller HomeController.cs nó thực hiện khi được gọi bằng địa chỉ /Home/Index và /Home/About. Bất kỳ

phương thức nào có thuộc tính public đều là một action trong controller.

Tao một Controller mơi

Trong folder Controllers phải chuột chọn Add New Item MVC Controller Class ( Figure 13)


Figure 13. Tạo controller tên la SanPhamController.cs

SanPhamController.cs

using System;


using System.Linq;

using System.Web;



using BanHang.Models;

namespace BanHang.Controllers

{

public class SanPhamController : Controller

{

DataClassesDataContext data = new DataClassesDataContext();


{

// Add action logic here

ViewData["Title"] = "San phâm";

return RedirectToAction("DanhMucLoaiSanPham");

}

public ActionResult DanhMucLoaiSanPham()

{

// Code cua ban o day

ViewData["Title"] = "Danh muc loai san phâm";

List<LoaiSanPham> lsp = data.LoaiSanPhams.ToList();

return View("DanhMucLoaiSanPham", lsp);

}

public ActionResult DanhSachSanPham(string loaisanpham)

{

ViewData["Title"] = "Danh sach san phâm trong loai san phâm";


List<SanPham> sp = data.LaySanPhamTuLoaiSanPham(loaisanpham);

return View("DanhSachSanPham", sp);

}

public ActionResult ChiTietSanPham(int id)

{

ViewData["Title"] = "Chi tiêt san phâm";

SanPham ctsp = data.LaySanPhamQuaID(id);

return View("ChiTietSanPham", ctsp);

}

}

}

2.5 Tìm hiểu về Views

Trong controller HomeController.cs, cả hai phương thức Index() và About() đều trả về một view. Một view chứa

các thẻ HTML và được trả về cho browser. Trong mô hình MVC thì một view tương ứng với một trang .aspx

trong WebForm.

View phải được tạo đúng vị trí đường dẫn. Ví dụ với controller HomeController.cs thì hành động

HomeController.Index() trả về một view nằm ở vị trí đường dẫn \Views\Home\Index.aspx và

HomeController.About() sẽ trả về một view nằm ở vị trí đường dẫn \Views\Home\About.aspx

View About.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

AutoEventWireup="true" CodeBehind="About.aspx.cs"

Inherits="HiTest.Views.Home.About" %>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">

<h2>About Us</h2>

<p>

TODO: Put <em>about</em> content here.

</p>

</asp:Content>

View Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

AutoEventWireup="true" CodeBehind="Index.aspx.cs"

Inherits="HiTest.Views.Home.Index" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

<h2><%= Html.Encode(ViewData["Message"]) %></h2>

<p>

To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc"

title="ASP.NET MVC Website">http://asp.net/mvc</a>.

</p>

</asp:Content>

Tất cả các thuộc tính nằm giữa 2 thẻ <asp:Content></asp:Content> đều có định dạng HTML và có thể tùy ý sửa

đổi theo ý muốn.

Tạo view cho controller SanPhamController.cs, trong SanPhamController.cs có 4 phương thưc public là Index(),

DanhMucLoaiSanPham(), DanhSachSanPham() và ChiTietSanPham() nên trong Views phai tao 4 view tương

ứng là Index.aspx, DanhMucLoaiSanPham.aspx, DanhSachSanPham.aspx, ChiTietSanPham.aspx băng cach tư


folder Views click phai chuôt chon Add New Folder nhâp tên folder mơi tao la SanPham. Tư folder SanPham

click phai chuôt chon Add View… (Figure 14) (ví dụ tạo view DanhMucLoaiSanPham)

Figure 14. Tạo view DanhMucLoaiSanPham trong folder SanPham

Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"


Inherits="BanHang.Views.SanPham.Index" %>

<asp:Content ID="viewIndex" ContentPlaceHolderID="MainContent" runat="server">

<h1>Đây la trang chinh cua san phâm</h1>

</asp:Content>

DanhMucLoaiSanPham.aspx


AutoEventWireup="true"

CodeBehind="DanhMucLoaiSanPham.aspx.cs"

Inherits="BanHang.Views.SanPham.DanhMucLoaiSanPham" %>

<asp:Content ID="viewDanhMucLoaiSanPham" ContentPlaceHolderID="MainContent"

runat="server">

<h1>

Đây la danh muc loai san phâm</h1>

<% foreach (var lsp in ViewData.Model)

{ %>

<li>

<%= Html.ActionLink(lsp.TenLoaiSanPham, "DanhSachSanPham/" +

lsp.TenLoaiSanPham, "SanPham") %>

</li>

<% } %>

</asp:Content>

DanhSachSanPham.aspx


AutoEventWireup="true" CodeBehind="DanhSachSanPham.aspx.cs"

Inherits="BanHang.Views.SanPham.DanhSachSanPham" %>

<asp:Content ID="viewDanhSachSanPham" ContentPlaceHolderID="MainContent"

runat="server">

<h1>Đây la danh sach san phâm co trong chuyên muc</h1>

</asp:Content>

ChiTietSanPham.aspx



AutoEventWireup="true" CodeBehind="ChiTietSanPham.aspx.cs"

Inherits="BanHang.Views.SanPham.ChiTietSanPham" %>

<asp:Content ID="viewChiTietSanPham" ContentPlaceHolderID="MainContent"

runat="server">

<h1>Đây la Chi tiêt san phâm</h1>

</asp:Content>

2.6 Tìm hiểu về Models

Một model trong ứng dụng ASP.NET MVC chứa tất cả các nghiệp vụ logic mà không có trong controllers và

views. Models chứa tất cả các tầng truy xuất dữ liệu logic và tầng nghiệp vụ logic. Ví dụ, nếu sử dụng LINQ to

SQL để truy nhập dữ liệu thì phải tạo LINQ to SQL class ( file định dạng dbml ) trong folder Models.

Mô hinh dư liêu LINQ to SQL ( Figure 15 )

Figure 15. Mô hinh dư liêu LINQ to SQL

Xây dưng lơp trơ giup cho viêc thao tac vơi dư liêu thông qua LINQ to SQL

DataClasses.cs

using System;


using System.Linq;

namespace BanHang.Models

{


partial class DataClassesDataContext

{

public List<LoaiSanPham> LayCacLoaiSanPham()

{

return LoaiSanPhams.ToList();

}

public List<SanPham> LaySanPhamTuLoaiSanPham(string loaisanpham)

{

return SanPhams.Where(l => l.LoaiSanPham1.Id == loaisanpham).ToList();

}

public SanPham LaySanPhamQuaID(int id)

{

return SanPhams.Single(s => s.Id == id);

}

}

}

Vơi lơp trơ giup co thê thao tac dê dang hơn vơi cơ sơ dư liêu khi cân . Chăng han vơi lơp DataClasses.cs ở trên

khi cân truy nhâp đê lây thông tin vê san phâm co ma Id , có thể viết như sau trong bất kỳ một code -behind nao

của Views (ví dụ với view DanhMucLoaiSanPham.aspx.cs trong folder Views):

Figure 16. Binding data vao trong Views\DanhMucLoaiSanPham.aspx.cs

Khi đo ta phai sưa đôi lai file Views\DanhMucLoaiSanPham.aspx cho phu hơp vơi code trên


AutoEventWireup="true"

CodeBehind="DanhMucLoaiSanPham.aspx.cs"

Inherits="BanHang.Views.SanPham.DanhMucLoaiSanPham" %>

<asp:Content ID="viewDanhMucLoaiSanPham" ContentPlaceHolderID="MainContent"

runat="server">


<h1>

Đây la danh muc loai san phâm</h1>

<asp:ListView ID="listLoaiSanPham" runat="server">

<LayoutTemplate>

<ul>

<asp:PlaceHolder ID="itemPlaceHolder"

runat="server"></asp:PlaceHolder>

</ul>

</LayoutTemplate>

<ItemTemplate>

<li>

<%= Html.ActionLink(Eval("TenLoaiSanPham"), "DanhSachSanPham/" +

Eval("TenLoaiSanPham"), "SanPham") %>

</li>

</ItemTemplate>

</asp:ListView>

</asp:Content>

Views chỉ chứa tất cả những gì hiển thị cho người dùng trên browser, Controllers chỉ chứa các logic mà trả về

view nào cho người dùng hoặc hướng từ action này đến action khác. Còn lại tất cả đều được viết trong Models.

2.7 Câu truc Views\Shared\Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs"

Inherits="BanHang.Views.Shared.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title><%= Html.Encode(ViewData["Title"]) %></title>

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="page">

<div id="header">

<div id="title">

<h1>My Sample MVC Application</h1>

</div>

<div id="logindisplay">

<% Html.RenderPartial("LoginUserControl"); %>

</div>

<div id="menucontainer">

<ul id="menu">

<li><%= Html.ActionLink("Home", "Index", "Home")%></li>

<li><%= Html.ActionLink("SanPham", "Index", "SanPham")%></li>

<li><%= Html.ActionLink("About Us", "About", "Home")%></li>

</ul>

</div>

</div>

<div id="main">

<asp:ContentPlaceHolder ID="MainContent" runat="server" />


<div id="footer">

My Sample MVC Application © Copyright 2008

</div>

</div>

</div>

</body>

</html>

2.8 Kêt qua

Figure 17. Kêt qua chay ưng dung khi thêm SanPham vao ưng dung ASP.NET MVC

3 Câu hỏi ôn tập

Hỏi: Views của MVC có thể sử dụng AJAX, javascript không?

Đáp: Được. Về bản chất, view trong ASP.NET MVC Framework cũng là một trang .aspx như với mô hình

WebForm vì thế có thể thực hiện các tác vụ tương tự. Vì thế việc sử dụng jQuery, ASP.NET AJAX, và javascript

đều có thể thực hiện được.

Hỏi: Xây dựng ứng dụng với ASP.NET MVC Framework thì trang web sẽ chạy nhanh hơn so với xây dựng trên

nền WebForm cũ?

Đáp: Chưa hẳn là thế. Nếu xây dựng trang web với nền tảng WebForm mà sử dụng ít các controls, usercontrols

hoặc ít events thì giá trị ViewState và PostBack không lớn nên sự thực thi không hẳn đã chậm. Trang web xây

dựng theo nền WebForm chỉ thực hiện chậm khi giá trị của ViewState là quá lớn.

Hỏi: Có phải thực hiện test và debug trên ASP.NET MVC Framework dễ dàng hơn so với nền tảng WebForm.

Đáp: Đúng. Vì việc thực hiện test và debug trên ASP.NET MVC Framework chỉ phải thực hiện trên Controller

nên dễ dàng kiểm soát hơn so với thực hiện test và debug trên WebForm.


4 Tài liệu tham khảo

http://www.asp.net/

http://weblogs.asp.net/scottgu/archive/2007/10/14/asp-net-mvc-framework.aspx

http://www.asp.net/

http://weblogs.asp.net/scottgu/archive/2007/10/14/asp-net-mvc-framework.aspx

Bài số 4

Định tuyến URL và điều phối hiển thị

Table of Contents

1 URL routing (Định tuyến URL) .............................................................................................. 2

1.1 Giới thiệu định tuyến URL ....................................................................................................... 2

1.1.1 Hệ thống định tuyến trong ASP.NET MVC làm gì?........................................................ 2

1.1.2 Các quy tắc định tuyến URL mặc định trong ASP.NET MVC Web Application ............. 2

1.2 Ví dụ định tuyến URL............................................................................................................... 3

2 Điều phối hiển thị dữ liệu .......................................................................................................... 6

2.1 Điêu phôi hiên thi dư liê u vơi ViewData Dictionary ................................................................... 6

2.2 Điêu phôi hiên thi dư liê u vơi cach dung Strongly Typed Classes .............................................. 9

2.2.1 Lơi ich cua viêc dung strongly typed ............................................................................. 9

2.2.2 Tao strongly-typed DuLieuDanhSachSanPham trong folder Models ............................ 9

2.2.3 Dung ViewData dictionary vơ i môt đôi tương ViewData strongly typed ................... 11

3 Câu hoi ôn tâp .......................................................................................................................... 11

4 Tai liêu tham khao .................................................................................................................... 11

Microsoft Vietnam – DPE Team | Bài số 4: Định tuyến URL và điều phối hiển thị 2

1 URL routing (Định tuyến URL)

1.1 Giới thiệu định tuyến URL

1.1.1 Hệ thống định tuyến trong ASP.NET MVC làm gì?

ASP.NET MVC Framework có một hệ thống định tuyến URL ( URL Routing System ) linh hoạt cho phép xác

định các quy tắc ánh xạ địa chỉ URL bên trong ứng dụng. Một hệ thống định tuyến có 2 mục đích:

Xây dựng một tập hợp các URL đi vào ứng dụng và định tuyến chúng tới các Controller và thực thi các

phương thức Action để xử lý.

Xây dựng các URL gửi đi mà có thể gọi ngược trở lại Controllers/Actions ( ví dụ: form posts, liên kết <a

href=“”> và các lời gọi AJAX )

Sử dụng các quy tắc ánh xạ URL để điều khiển URL đi vào và đi ra để tăng tính mềm dẻo cho việc lập trình ứng

dụng, nghĩa là nếu muốn thay đổi cấu trúc URL ( ví dụ /Catalog thành /Products ) có thể thay đổi một tập hợp

quy tắc ánh xạ mức ứng dụng mà không cần phải viết lại mã lập trình bên trong Controllers và Views.

1.1.2 Các quy tắc định tuyến URL mặc định trong ASP.NET MVC Web Application

Mặc định khi tạo ứng dụng với ASP.NET MVC Web Application trong Visual Studio sẽ tạo ra một ASP.NET

Application class gọi là Global.asax chứa cấu hình các quy tắc định tuyến URL. Xây dựng các định tuyến thông

qua phương thức RegisterRoutes(ReouteCollection routes) và khi ứng dụng bắt đầu, phương thức

Application_Start() trong Global.asax.cs sẽ gọi RegisterRoutes để tạo ra bảng định tuyến.

Global.asax.cs

using System;


using System.Linq;

using System.Web;



namespace BanHang

{




{


{


routes.MapRoute(

"Default", // Route

name


parameters


Parameter defaults

);

}



{


}

}

}

Mặc định định tuyến URL trong ASP.NET MVC Framework có cấu trúc dạng: Controllers/ControllerAction/Id

Với ASP.NET MVC Web Application thì mặc định Controllers là HomeController, mặc định ControllerAction là

Index, mặc định Id là rỗng. Nghĩa là khi gọi trang web được xây dựng thông qua template ASP.NET Web

Application thì mặc định http://localhost/ tương đương với http://localhost/Home/Index/

Khi ứng dụng ASP.NET MVC Web Application nhận được một Url, MVC Framework sẽ định giá các quy tắc

định tuyến trong tập hợp RouteTable.Routes để quyết định Controller nào sẽ điều khiển request.

MVC framework chọn Controller bằng cách định giá các quy tắc trong bảng định tuyến theo trật tự đã có sẵn.

1.2 Ví dụ định tuyến URL

Sư dung ứng dụng BanHang dựa trên Framework ASP.NET MVC Web Application:

Tạo TimKiem URL

Figure 1. Tạo controller TimKiemController.cs

http://localhost/

http://localhost/Home/Index/


Có 2 action trong TimKiemController.cs: action Index() để hiển thị một trang search với một TextBox cho người

dùng nhập từ khóa cần tìm, action Results để điều khiển khi yêu cầu tìm kiếm được xác định.

using System;


using System.Linq;

using System.Web;




{

public class TimKiemController : Controller

{


{


return View();

}

public ActionResult Results(string query)

{

return View();

}

}

}

Trong Global.asax.cs một cách thức định tuyến mặc định. Theo quy tắc định tuyến mặc định thì khi yêu cầu một

trang tìm kiếm, địa chỉ Url được gọi theo sẽ tương ứng với [controller]/[action]/[id] là /TimKiem/Results/[string

query]. Cách dùng này không có vấn đề gì nhưng ta tìm hiểu một cách tùy biến định tuyến url để thay đổi thành

/TimKiem/[string query]. Thêm vào trong Global.asax.cs:

using System;


using System.Linq;

using System.Web;



namespace BanHang

{




{


{


routes.MapRoute(

"TimKiem", // Route

name

"TimKiem/{query}", // URL with parameters

new { controller = "TimKiem", action = "Results" } // Parameter

defaults

);

routes.MapRoute(

"Default", // Route

name


parameters



Parameter defaults

);

}


{


}

}

}

Tạo 2 view hiển thị dữ liệu được điều khiển trong TimKiemController.cs là Index.aspx và Results.aspx

Index.aspx



Inherits="BanHang.Views.TimKiem.Index" %>

<asp:Content ID="viewTimKiem" ContentPlaceHolderID="MainContent" runat="server">

<form method="post" action="TimKiem/Search">

<input type="text" id="txtTimKiem" name="txtTimKiem" />

<input type="submit" value="Tìm Kiếm" />

</form>

</asp:Content>

Result.aspx


AutoEventWireup="true" CodeBehind="Results.aspx.cs"

Inherits="BanHang.Views.TimKiem.Results" %>

<asp:Content ID="viewResults" ContentPlaceHolderID="MainContent" runat="server">

Kết quả dữ liệu tìm kiếm được ở đây

</asp:Content>

Thêm vào Views\Shared\Site.master một tab tìm kiếm

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs"

Inherits="BanHang.Views.Shared.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title><%= Html.Encode(ViewData["Title"]) %></title>

<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="page">

<div id="header">

<div id="title">

<h1>My Sample MVC Application</h1>

</div>

<div id="logindisplay">

<% Html.RenderPartial("LoginUserControl"); %>

</div>

<div id="menucontainer">

<ul id="menu">

<li><%= Html.ActionLink("Home", "Index", "Home")%></li>


<li><%= Html.ActionLink("Sản phâm", "Index", "SanPham")%></li>

<li><%= Html.ActionLink("Tìm kiếm", "Index", "TimKiem")%></li>

<li><%= Html.ActionLink("About Us", "About", "Home")%></li>

</ul>

</div>

</div>

<div id="main">

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<div id="footer">

My Sample MVC Application © Copyright 2008

</div>

</div>

</div>

</body>

</html>

Kêt qua thưc thi chương trinh ( Figure 2)

Figure 2 Thưc hiên tim kiêm vơi TimKiemController.cs

2 Điều phối hiển thị dữ liệu

ViewData là thành phần quan trọng trong việc hiển thị dữ liệu của ASP.NET MVC Framework. Môi Controller

đều có một ViewData dictionary có thể dung để đưa dữ liệu vào View . Đê đưa dư liêu vao ViewData dung đinh

dạng key/value ( ví dụ ViewData[“Title’’] = “San phâm” ).

2.1 Điêu phôi hiê n thi dư liê u vơi ViewData Dictionary


using System;


using System.Linq;

using System.Web;






{


{



{


ViewData["Title"] = "Sản phâm";


}


{





}


{


List<SanPham> sp = data.LaySanPhamTuLoaiSanPham(loaisanpham);


}


{

ViewData["Title"] = "Chi tiêt sản phâm";

SanPham ctsp = data.LaySanPhamTuID(id);


}

}

}

Có 2 cách tiếp cận việc hiển thị dữ liệu trong Views : cách 1 dung trực tiếp <%= %> trong code, cách 2 sư dung

server controls đê hiên thi dư liêu

Thưc thi view vơi cach dung <%= %>

Views\SanPham\DanhSachSanPham.aspx





runat="server">


<ul>

<% foreach (var sp in ViewData.Model)

{ %>


<li>

<%= Html.ActionLink(sp.TenSanPham , "ChiTietSanPham/" + sp.Id,

"SanPham") %>

</li>

<% } %>

</ul>

</asp:Content>

Views\SanPham\DanhSachSanPham.aspx.cs

using System;


using System.Linq;

using System.Web;



namespace BanHang.Views.SanPham

{

public partial class DanhSachSanPham : ViewPage <List<BanHang.Models.SanPham>>

{

}

}

Thưc thi view vơi server controls

Bind Data vao code -behide Views\SanPham\DanhSachSanPham.aspx.cs có thể dung ViewPage hoặc từ điển

ViewData, để hiển thị dung một server control là <asp:DataList>. Vì không có <form runat=“server”> như

WebForm nên trong Views\SanPham\DanhSachSanPham.aspx không chưa môt ViewState và cung sẽ không phát

sinh ID ( kiêu như Ctrl00_listView ), toàn thể trang chỉ chứa các định dạng HTML.






runat="server">


<asp:DataList ID="listView" runat="server">

<ItemTemplate>

<%= Html.ActionLink(Eval("TenSanPham") , "ChiTietSanPham/" +

Eval("Id"), "SanPham") %>

</ItemTemplate>

</asp:DataList>

</asp:Content>


using System;


using System.Linq;

using System.Web;





{

public partial class DanhSachSanPham : ViewPage <List<BanHang.Models.SanPham>>

{

public void Page_Load()

{

listView.DataSource = ViewData["SanPham"];

listView.DataBind();

}

}

}

2.2 Điêu phôi hiê n thi dư liê u vơi cach dung Strongly Typed Classes

2.2.1 Lơi ich cua viêc dung strongly typed

Tránh được việc dung chuỗi string để tra cứu các đối tượng và không phải mất thời gian kiểm tra biên dịch

cho ca Controllers va Views

Tránh được việc phải đưa dữ liệu vào ViewData dictionar y khi sư dung ngôn ngư strongly -typed dưa trên

C#

Nhân đươc code thông minh trong ca file .aspx va .aspx.cs như dung vơi môt class thưc thu cua C#.

Dung lại được code trong khi tạo các unit test trong ứng dụng.

2.2.2 Tạo strongly-typed DuLieuDanhSachSanPham trong folder Models

DuLieuDanhSachSanPham.cs

using System;

using System.Data;


using System.Configuration;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;


{

public class DuLieuDanhSachSanPham

{


public string TenLoaiSanPham { get; set; }

public List<Models.SanPham> SanPham { get; set; }

}

}

Sưa đôi lai SanPhamController.cs cụ thể là thay đổi phương thức DanhSachSanPham

using System;


using System.Linq;

using System.Web;





{


{



{


ViewData["Title"] = "Sản phâm";


}


{





}


{


//List<SanPham> sp = data.LaySanPhamTuLoaiSanPham(loaisanpham);

//return View("DanhSachSanPham", sp);

DuLieuDanhSachSanPham sp = new DuLieuDanhSachSanPham();

ViewData.TenLoaiSanPham = loaisanpham;

ViewData.SanPham = data.LaySanPhamTuLoaiSanPham(loaisanpham);

return View("DanhSachSanPham", ViewData);

}


{




}

}

}


2.2.3 Dung ViewData dictionary vơi môt đôi tương ViewData strongly typed

Trong Views\SanPham\DanhSachSanPham.aspx không cân thay đôi khi co sư thay đôi trong

SanPhamController.cs vi ly do la đôi tương ViewData strongly typed đa đươc đưa tơi tư ViewPage , đôi tương

ViewData dictionary se tư đông sư dung tim đên các thuộc tính nằm trong ViewData strongly typed.

Dung lớp cơ sở ViewPage<T> mang dư liêu tơi ViewData strongly typed

ASP.NET MVC Framework hô trơ môt dictionary dưa trên lơp cơ sơ ViewPage . ViewPage<T> ( T la môt kiêu

của lớp ViewData ma Controllers chuyên tơi Views ) đươc thay đôi


using System;


using System.Linq;

using System.Web;




{

public partial class DanhSachSanPham : ViewPage <DuLieuDanhSachSanPham>

{

public void Page_Load()

{

}

}

}

3 Câu ho i ôn tâ p

Hoi: Đinh tuyên Url khi sư dung Controllers khai bao phương thưc ActionRes ults co chưa tham sô , thưc thi

chương trinh bao lôi thi phai lam sao?

Đap: Khi tao phương thưc trong Controllers co sư dung tham sô, có 2 trương hơp xay ra: phương thưc chưa tham

sô co thê nhân gia tri null hoăc phương thưc c hưa tham sô không cho phep nhâp gia tri null . Vơi tham sô không

cho phep nhâp gia tri null thi nêu goi Url không chưa tham sô thi se bao lôi. Có thể giải quyết bằng cách cho phep

nhân gia tri null vao tham sô hoăc băt buôc khi goi Url phai đưa tham sô đâu vao.

Hoi: Trong một ứng dụng MVC, liệu có tồn tại 1 mô hình dữ liệu Models, có n Controllers, mỗi Controllers điều

khiển m Views không?

Đáp: Có. Thực chất việc tạo ra mô hình MVC chính là một cách thể hiện lập trình đa mục đích. Với một mô hình

dữ liệu đã có, việc xây dựng các Controllers khác nhau cùng truy cập đến mô hình dữ liệu đã có là hoàn toàn thực

hiện được. Mỗi Controllers sẽ có nhiều hơn m phương thức tương ứng với m Views.

4 Tai liệu tham khao

http://asp.net/mvc

http://weblogs.asp.net/scottgu/archive/2007/12/03/asp-net-mvc-framework-part-2-url-routing.aspx

http://weblogs.asp.net/scottgu/archive/2007/12/06/asp-net-mvc-framework-part-3-passing-viewdata-from-

controllers-to-views.aspx

http://asp.net/mvc

http://weblogs.asp.net/scottgu/archive/2007/12/03/asp-net-mvc-framework-part-2-url-routing.aspx

http://weblogs.asp.net/scottgu/archive/2007/12/06/asp-net-mvc-framework-part-3-passing-viewdata-from-controllers-to-views.aspx

http://weblogs.asp.net/scottgu/archive/2007/12/06/asp-net-mvc-framework-part-3-passing-viewdata-from-controllers-to-views.aspx

Bài số 5

Chỉnh sửa dữ liệu với MVC

Table of Contents 1 Thêm mới dữ liệu trong MVC .......................................................................................... 2

2 Sưa đôi dư liêu trong MVC .................................................................................................. 5

3 Xây dưng quy trinh test trong ưng dung ASP.NET MVC ................................................ 9

3.1 Tạo một controller để test. ........................................................................................... 10

3.2 Test một view được trả về từ một controller................................................................ 14

3.3 Test một ViewData được trả về từ một controller ....................................................... 15

3.4 Test một Result Action được trả về từ một controller ................................................. 16

4 Tai liêu tham khao ............................................................................................................... 16

Microsoft Vietnam – DPE Team |Bài số 5: Chỉnh sửa dữ liệu với MVC 2

1 Thêm mới dữ liệu trong MVC Sử dụng ứng dụng BanHang đã có:

Figure 1. Sửa đổi controller SanPhamController.cs

Thêm môt phương thưc trong Models\DataClasses.cs thưc hiên ghi nhân thêm mơi vao cơ sơ dư liêu.

Models\DataClasses.cs

using System;


using System.Linq;


{

partial class DataClassesDataContext

{

public List<LoaiSanPham> LayCacLoaiSanPham()

{

return LoaiSanPhams.ToList();

}

public List<SanPham> LaySanPhamTuLoaiSanPham(int id)

{

return SanPhams.Where(l => l.LoaiSanPham == id).ToList();

}


public SanPham LaySanPhamTuID(int id)

{

return SanPhams.Single(s => s.Id == id);

}

public void ThemMoiSanPham(SanPham sp)

{

SanPhams.InsertOnSubmit(sp);

}

}

}

Thiết lập 2 phương thức thêm mới dữ liệu trong lớp SanPhamController.cs là ThemMoiSanPham và

Create. Phương thức ThemMoiSanPham trả về một Views cho phép người sử dụng nhập nội dung sản

phẩm, còn phương thức Create sẽ thực thi công việc thêm mới sản phẩm khi người dùng nhân nut đê

submit dư liêu.


using System;


using System.Linq;

using System.Web;





{


{



{




}


{





}

public ActionResult DanhSachSanPham(int id)

{


List<SanPham> sp = data.LaySanPhamTuLoaiSanPham(id);


//DuLieuDanhSachSanPham sp = new DuLieuDanhSachSanPham();

//ViewData.TenLoaiSanPham = loaisanpham;

//ViewData.SanPham = data.LaySanPhamTuLoaiSanPham(loaisanpham);

//return View("DanhSachSanPham", ViewData);

}



{




}

public ActionResult ThemMoiSanPham()

{

ViewData["Title"] = "Thêm mới san phâm";

//List<LoaiSanPham> dulieu = data.LayCacLoaiSanPham();

var loaiSanpham = from c in data.LoaiSanPhams select c;

ViewData["lsp"] = new SelectList(loaiSanpham, "Id", "TenLoaiSanPham");

return View("ThemMoiSanPham", ViewData["lsp"]);

}

public ActionResult Create(string TenSanPham, float DonGia, int SoLuong,

int loaiSanPham)

{

SanPham sp = new SanPham();

sp.TenSanPham = TenSanPham;

sp.DonGia = DonGia;

sp.SoLuong = SoLuong;

sp.LoaiSanPham = loaiSanPham;

data.ThemMoiSanPham(sp);

data.SubmitChanges();


}

}

}

Tạo Views cho phép thêm mới sản phẩm.

Views\SanPham\ThemMoiSanPham.aspx


AutoEventWireup="true" CodeBehind="ThemMoiSanPham.aspx.cs"

Inherits="BanHang.Views.SanPham.ThemMoiSanPham" %>

<asp:Content ID="viewThemMoiSanPham" ContentPlaceHolderID="MainContent"

runat="server">

<form action="Create" method="post">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td>Tên san phâm:</td>

<td><input type="text" id="TenSanPham" name="TenSanPham" /></td>

</tr>

<tr>

<td>Đơn giá:</td>

<td><input type="text" id="DonGia" name="DonGia" /></td>

</tr>

<tr>

<td>Số lượng:</td>

<td><input type="text" id="SoLuong" name="SoLuong" /></td>

</tr>

<tr>

<td>Loại san phâm:</td>

<td>

<%--<input type="text" id="LoaiSanPham" name="LoaiSanPham" />--

%>

<%=

Html.DropDownList("loaiSanPham",(SelectList)ViewData["lsp"]) %>

</td>

</tr>


<tr>

<td colspan="2"> </td>

</tr>

<tr>

<td colspan="2"><input type="submit" value="Thêm mới san phâm"

/></td>

</tr>

</table>

</form>

</asp:Content>

Thưc thi se cho ra kêt qua như sau (figure 2)

Figure 2. Thưc hiên thêm mơi san phâm trong MVC

2 Sư a đô i dư liê u trong MVC Thay đôi danh sach hiên thi san phâm cho phep câp nhât dư liêu






runat="server">


<p>

<ul>

<% foreach (var sp in ViewData.Model)

{ %>

<li>

<%= Html.ActionLink(sp.TenSanPham , "ChiTietSanPham/" + sp.Id,

"SanPham") %>

(<%= Html.ActionLink("Edit" , "CapNhatSanPham/" + sp.Id, "SanPham")

%>)

</li>

<% } %>

</ul>

</p>

<p>

<form action="../ThemMoiSanPham" method="post">

<input type="submit" value="Thêm mới một san phâm" />

</form>

</p>


</asp:Content> Danh sach san phâm bây giơ co thêm môt actionlink “Edit” bên canh môi san phâm đê ngươi dung

tương tac vơi chưc năng câp nhât dư liêu san phâm. (figure 3)

Figure 3. Danh sach san phâm đa đươc thay đôi.

Thêm 2 phương thưc CapNhatSanPham va Update trong lơp Controllers\SanPhamController.cs

Controllers\SanPhamController.cs

using System;


using System.Linq;

using System.Web;





{


{



{




}


{





}



{








}


{




}


{






}


int loaiSanPham)

{



sp.DonGia = DonGia;






}

public ActionResult CapNhatSanPham(int id)

{

ViewData["Title"] = "Câp nhât san phâm";

var spToEdit = (from sp in data.SanPhams

where sp.Id = id

select sp).First();

ViewData.Model = spToEdit;

return View();

}

public ActionResult Update()

{


}

}

}


Trong lơp Controllers \SanPhamController.cs đăt con tro chuôt bên canh phương thưc

CapNhatSanPham, click phai chuôt chon Add View (figure 4)

Figure 4. Thêm mơi view cho phương thưc CapNhatSanPham

Thiêt lâp cac thuôc tinh sau: Đanh dâu chon vao checkbox “Created a strongly typed view”, chon thuộc

tinh cua View content là Edit, chon thuộc tinh cua View data class là BanHang.Models.SanPham rôi ân

nut Add để thêm vào Views\SanPham\CapNhatSanPham.aspx (Figure 5)

Figure 5. Tao view CapNhatSanPham tư controller CapNhatSanPham

Sau khi tao xong ta se co môt Views\SanPham\CapNhatSanPham.aspx như sau:



Inherits="System.Web.Mvc.ViewPage<BanHang.Models.SanPham>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<h2>CapNhatSanPham</h2>

<%= Html.ValidationSummary() %>

<% using (Html.BeginForm()) {%>

<fieldset>

<legend>Fields</legend>

<p>

<label for="Id">Id:</label>

<%= Html.TextBox("Id") %>

<%= Html.ValidationMessage("Id", "*") %>

</p>

<p>

<label for="TenSanPham">TenSanPham:</label>

<%= Html.TextBox("TenSanPham") %>

<%= Html.ValidationMessage("TenSanPham", "*") %>

</p>

<p>

<label for="DonGia">DonGia:</label>

<%= Html.TextBox("DonGia") %>

<%= Html.ValidationMessage("DonGia", "*") %>

</p>

<p>

<label for="SoLuong">SoLuong:</label>

<%= Html.TextBox("SoLuong") %>

<%= Html.ValidationMessage("SoLuong", "*") %>

</p>

<p>

<label for="LoaiSanPham">LoaiSanPham:</label>

<%= Html.TextBox("LoaiSanPham") %>

<%= Html.ValidationMessage("LoaiSanPham", "*") %>

</p>

<p>

<input type="submit" value="Save" />

</p>

</fieldset>

<% } %>

<div>

<%=Html.ActionLink("Back to List", "Index") %>

</div>

</asp:Content>

3 Xây dư ng quy trinh test trong ưng du ng ASP.NET MVC Có 3 kiểu unit test trong ứng dụng ASP.NET MVC dùng để test các controllers được xây dựng: test

view được trả về từ controller action, test dữ liệu trả về từ một controller action, test một controller

action được redirect tới một tới một controller action khác.

Mặc định khi tạo ứng dụng với ASP.NET MVC đã mặc định xây dựng sẵn một project test (Figure 6).


Figure 6. Ứng dụng test được tao

3.1 Tạo một controller để test.

Xét lớp Controllers\SanPhamController.cs

using System;


using System.Linq;

using System.Web;





{


{



{




}


{






}


{








}


{




}


{






}


int loaiSanPham)

{



sp.DonGia = DonGia;






}

public ActionResult CapNhatSanPham(int id)

{

ViewData["Title"] = "Câp nhât san phâm";

var spToEdit = (from sp in data.SanPhams

where sp.Id == id

select sp).First();

ViewData.Model = spToEdit;

return View();

}


[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Update()

{

//UpdateModel(sp,FormCollection.KeysCollection);


}

}

}

Xây dựng một lớp test cho Controllers\SanPhamController.cs ở trên, tạo SanPhamControllerTest.cs từ

folder Controllers cua projects chon Add Unit Test (figure 7)

Figure 7. Xây dựng test cho controller

Đánh dấu vào phương thức cần được test (figure 8)

Figure 8. Check chọn phương thức cần test


BanHang.Tests\Controllers\SanPhamControllerTest.cs

using BanHang.Controllers;

using Microsoft.VisualStudio.TestTools.UnitTesting;

using Microsoft.VisualStudio.TestTools.UnitTesting.Web;


namespace BanHang.Tests

{

/// <summary>

///This is a test class for SanPhamControllerTest and is intended

///to contain all SanPhamControllerTest Unit Tests

///</summary>

[TestClass()]

public class SanPhamControllerTest

{

private TestContext testContextInstance;

/// <summary>

///Gets or sets the test context which provides

///information about and functionality for the current test run.

///</summary>

public TestContext TestContext

{

get

{

return testContextInstance;

}

set

{

testContextInstance = value;

}

}

#region Additional test attributes

//

//You can use the following additional attributes as you write your tests:

//

//Use ClassInitialize to run code before running the first test in the

class

//[ClassInitialize()]

//public static void MyClassInitialize(TestContext testContext)

//{

//}

//

//Use ClassCleanup to run code after all tests in a class have run

//[ClassCleanup()]

//public static void MyClassCleanup()

//{

//}

//

//Use TestInitialize to run code before running each test

//[TestInitialize()]

//public void MyTestInitialize()

//{

//}

//

//Use TestCleanup to run code after each test has run

//[TestCleanup()]

//public void MyTestCleanup()

//{

//}

//


#endregion

/// <summary>

///A test for ChiTietSanPham

///</summary>

[TestMethod()]

[HostType("ASP.NET")]

[AspNetDevelopmentServerHost("D:\\@Projects\\@Test\\HiTest\\BanHang\\BanHang",

"/")]

[UrlToTest("http://localhost:2430/")]

public void ChiTietSanPhamTest()

{

SanPhamController target = new SanPhamController(); // TODO: Initialize

to an appropriate value

int id = 0; // TODO: Initialize to an appropriate value

ActionResult expected = null; // TODO: Initialize to an appropriate

value

ActionResult actual;

actual = target.ChiTietSanPham(id);

Assert.AreEqual(expected, actual);

Assert.Inconclusive("Verify the correctness of this test method.");

}

}

}

3.2 Test một view được trả về từ một controller.

Kiểm tra xem view được trả về có đung không và khi nào thì nó được goi đến, phương thức nào cua

view được trả về.


[TestMethod()]



"/")]


public void DetailViewTest()

{

SanPhamController sp = new SanPhamController();

var result = sp.ChiTietSanPham(8) as ViewResult;

Assert.AreEqual("ChiTietSanPham", result.ViewName);

}

Bắt đầu thực hiện công việc test (figure 9). Lựa chon một phương thức test Run Selection


Figure 9. Thực hiện các phương thức test

Kết quả thực hiện test (figure 10)

Figure 10. Kết quả thực hiện test DetailViewTest

3.3 Test một ViewData được trả về từ một controller


[TestMethod]



"/")]


public void TestViewData()


{

//

// TODO: Add test logic here

//

var controller = new BanHang.Controllers.SanPhamController();

var result = controller.ChiTietSanPham(8) as ViewResult;

var sp = (SanPham)result.ViewData.Model;

Assert.AreEqual("Yamaha", sp.TenSanPham);

}

3.4 Test một Result Action được trả về từ một controller


[TestMethod]



"/")]


public void TestResultAction()

{

//

// TODO: Add test logic here

//

var controller = new BanHang.Controllers.SanPhamController();

var result = (RedirectToRouteResult)controller.ChiTietSanPham(-1);

Assert.AreEqual("Index", result.Values["action"]);

}

4 Tài liệu tham khảo http://asp.net/mvc

http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-

scenarios.aspx

http://asp.net/mvc

http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-scenarios.aspx

http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-scenarios.aspx

Bài số 6

Bao mât vơi ASP.NET MVC Application

Table of Contents

1 Authentication (Xac thưc ngươi dung) ................................................................................ 2

1.1 Tạo người dùng mặc định vơi ASP.NET MVC Application ............................................. 2

1.2 Quan lý người dùng vơi công cụ Website Administration Tool ........................................ 3

1.3 Roles (Phân quyền nhóm người dùng) .................................................................................. 4

2 Cấu hình xác thưc ngươi dùng ............................................................................................. 7

2.1 Sử dụng SQL Server 2005 ...................................................................................................... 8

2.2 Cấu hình truy nhâp database trong SQL Server ................................................................... 9

3 Câu hoi ôn tâp ...................................................................................................................... 10

4 Tai liêu tham khao ............................................................................................................... 10

Microsoft Vietnam – DPE team | Bài số 6: Bảo mật với ASP.NET MVC Application 2

1 Authentication (Xac thưc người dung)

Co nhiều phương phap xac thưc người dung như Windows Authentication, Forms Authentication. Ơ phân nay chi

giơi thiêu phương phap xac thưc ngươi dung dưa trên Forms (dung C#). Mục đich cua hương dân nay la giang

giai cach dung Forms Authentication đê yêu câu bao mât băng password cho cac Views . Sư dung Website

Administration Tool tao ngươi dung va phân quyên nhom ngươi dung, ngăn chăn nhưng ngươi dung trai phep.

1.1 Tạo người dùng mặc định vơi ASP.NET MVC Application

Mặc định khi ứng dụng được tạo sẽ có sẵn một Controllers có tên là AccountController.cs và có sẵn các Views

tương ứng ChangePassword.aspx, ChangePasswordSuccess.aspx, Login.aspx, Register.aspx (Figure 1)

Figure 1. Controllers và Views có sẵn để tạo người dùng

Views thể hiện việc register một người dùng mơi như sau. (Figure 2)

Figure 2. Tạo người dùng sử dụng công cụ của ASP.NET MVC Application


1.2 Quan lý người dùng vơi công cụ Website Administration Tool

Chon menu Projects ASP.NET Configuration. Xuât hiên công cu Website Administration Tool Chon tab

Security (Figure 3)

Figure 3. Công cu Website Administration Tool

Click vao link Create User để tạo người dùng. Chẳng hạn tạo người dùng tên Lan (Figure 4)

Figure 4. Tạo người dùng với Website Administration Tool


1.3 Roles (Phân quyền nhom người dùng)

Để tạo role trươc hết cân phai enable role bằng cach click vao link Enable roles sau đo click vao link Create and

Manage roles tạo role có tên Administrators (Figure 5)

Figure 5. Tạo role cho người dùng

Tiếp theo tạo một người dùng mơi kết hợp vơi role đã co (Figure 6)


Figure 6. Tạo người dùng với role Administrators

Bây giờ ta co 2 người dùng mơi, người dùng Lan không thuộc roles và người dùng Trang thuộc roles

Administrators.

Xây dưng một controllers xem tin tức được bao mât. Yêu câu người dùng phai đăng nhâp mơi có quyền xem. Tùy

thuộc đối tượng người dùng nào sẽ được vào các vùng tin tức nào.

BanHang\Controllers\TinTucController.cs

using System;


using System.Linq;

using System.Web;




{

public class TinTucController : Controller

{


{

return View();

}

[Authorize]

public ActionResult NguoiDung()

{

return View();

}

[Authorize(Users="Lan")]

public ActionResult NguoiDungCuThe()

{

return View();

}

[Authorize(Roles = "Administrators")]

public ActionResult NhomNguoiDung()

{

return View();


}

}

}

Tạo ra cac Views tương ứng vơi cac phương thức cua TinTucController.cs: Index.aspx dành cho tất ca người

dùng (kể ca người dung không được xác thưc), NguoiDung.aspx chi dành cho những người dung đã được xác

thưc, NguoiDungCuThe.aspx danh cho người dung đặc biệt tên là Lan, NhomNguoiDung.aspx dành cho nhóm

người dùng thuộc roles Administrators. (Figure 7)

Figure 7. Các Views tương ứng với TinTucController.cs


Thêm một tab Tin Tức bằng cách tạo một Html.ActionLink trong Views\Shared\Site.Master. (Figure 8)

Figure 8. Views Index trong Controllers\TinTucController.cs

2 Cấu hình xác thưc người dùng

Thông tin về người dùng và quyền truy nhâp cho nhom người dung được lưu trong cơ sở dữ liệu. Trong ví dụ này

thông tin được lưu trữ trong một SQL Express database (RAUN) tên là ASPNETDB.mdf trong folder App_Data

cua ứng dụng MVC. Database ASPNETDB.mdf được sinh tư động bởi ASP.NET Framework khi sử dụng

membership. Mặc định ASPNETDB.mdf bị ẩn, vào Solution Explorer, chon Show All Files sẽ thấy

ASPNETDB.mdf nằm cùng vơi Database.mdf ở dùng một thư mục App_Data (Figure 9)

Figure 9. Xem ASPNETDB.MDF bị ẩn bằng Show All Files


Thông thường các ứng dụng thưc tế, hâu hết các nhà phát triển đều ít khi dùng database nằm trong SQL Express

ma thường sử dụng SQL Server để lưu trữ database. Có thể thay đổi để SQL Server lưu trữ thông tin người dùng

bằng hai bươc sau:

Thêm một đối tượng database Application Services trong hệ quan trị cơ sở dữ liệu (SQL Server)

Thay đổi connectionstring trong web.config trỏ đến database đã được tạo

2.1 Sử dụng SQL Server 2005

Tạo một database mơi trong SQL Server 2005 (hương dân này sử dùng phiên ban Developer). (Figure 10)

Figure 10. Tạo database BanHang trong SQL Server 2005

Thêm tất ca các table và stored procedure vào database mơi. Sử dụng công cụ ASP.NET SQL Server Setup

Wizard để sửa đổi thông tin trong database BanHang:

Vào Start All Programs Visual Studio 2008 Visual Studio Tools Visual Studio 2008 Command

Prompt rồi đanh vao aspnet_regsql (Figure 11)

Figure 11. Thực thi aspnet_regsql từ Visual Studio 2008 Command Prompt

Thưc hiện tuân tư các bươc đơn gian để sửa đổi cơ sở dữ liệu BanHang lưu thông tin về người dùng và

membership. Database này có thể nằm trong mạng không nhất thiết phai nằm ở máy cục bộ. (Figure 12)


Figure 12. Cập nhật database BanHang để lưu thông tin người dùng

Sửa đổi file cấu hình web.config trong ứng dụng ASP.NET MVC Application để chuyển lưu trữ thông tin người

dùng vào database BanHang trong SQL Server 2005 thay vì sử dụng database ASPNETDB.MDF có sẵn cua

Visual Studio 2008 trong folder App_Data.

Trong file web.config sử dụng ASPNETDB.MDF mặc định để lưu thông tin người dùng

<connectionStrings>

<add name="ApplicationServices" connectionString="data source=.\SQLEXPRESS;Integrated

Security=SSPI;AttachDBFilename=|DataDirectory|aspnetdb.mdf;User Instance=true"

providerName="System.Data.SqlClient"/>


Sửa đổi web.config sử dụng database BanHang trong SQL Server để lưu thông tin người dùng.

<connectionStrings>

<add name="ApplicationServices" connectionString="Data Source=HUNTER-XX\SQL2005;Initial

Catalog=BanHang;User ID=sa;Password=abc@123;" providerName="System.Data.SqlClient" />


2.2 Cấu hình truy nhâp database trong SQL Server

Sử dụng Intergrated Security để kết nối database cân được thêm một tài khoan người dùng cua Windows để đăng

nhâp vào database. Tài khoan này phụ thuộc vào sử dụng web server nào khi thưc thi ứng dụng gồm ASP.NET

Development Server (mặc định cua Visual Studio) và Internet Information Services (component cua Windows),

và tài khoan đăng nhâp database cũng phụ thuộc vào hệ điều hành.

Nếu sử dụng ASP.NET Developmet Server cân thêm tài khoan người dùng cua Windows để đăng nhâp vào

database server. Nếu sử dụng IIS cân phai thêm tài khoan người dùng ASPNET (trong WindowsXP) hoặc NT

AUTHORITY/NETWORK SERVICE (trong Windows Vista/Windows Server 2008/Windows 7) để đăng nhâp

database server.


Thêm tài khoan người dùng mơi để đăng nhâp database sử dụng công cụ Microsoft SQL Server Management

Studio (Figure 13)

Figure 13. Tạo tài khoản đăng nhập mới cho database

Sau khi tạo tài khoan đăng nhâp database, cân phai thiết lâp quyền truy nhâp cua tài khoan. Thiết lâp quyền truy

nhâp sử dụng User Mapping (Figure 14).

Figure 14. Thiết lập roles cho tài khoản đăng nhập database

3 Câu hoi ôn tâp

Hỏi: Khi chuyển từ database sử dụng SQL Express sang database sử dụng SQL Server, kết nối vơi database

không thưc hiện được (báo lỗi)?

Tra lơi: Nguyên nhân có thể do chưa thiết lâp đúng quyền cua tài khoan đăng nhâp database. Sau khi xem lại

thiết lâp đúng quyền đăng nhâp, xem sử dụng web server nào, nếu dùng IIS thì cân phai thêm tài khoan đăng

nhâp ASPNET (đối vơi Windows XP trở xuống) hoặc NT AUTHORITY/NETWORK SERVICE (đối vơi

Windows Vista/Windows 2008 Server/Windows 7) cho database cân sử dụng.

4 Tai liệu tham khao

http://asp.net/mvc

http://www.asp.net/learn/mvc/tutorial-10-cs.aspx


http://asp.net/mvc



tổng quan về asp.net 3s1.downloadmienphi.net/file/downloadfile8/173/1317272.pdf · microsoft...

Documents