Tạo ứng dụng ASP mvc

Với loạt bài hướng dẫn trong chương 1, bạn sẽ học được: · Cách tạo một dự án ASP.NET MVC · Cách tạo Controllers và Views · Cách tạo database mới bằng cách sử dụng Entity Framework C

Tạo ứng dụng ASP.NET MVC 3

Bài viết được cập nhật từ 2:08:33 CH, 18 Tháng Tám 2012 bởi tumivn

Đây là phần đầu của hướng dẫn nhằm giúp bạn xây dựng một ứng dụng ASP.NET MVC

có chức năng quản lý danh sách các việc cần làm của bạn

Bạn sẽ làm những gì?

Bạn sẽ cùng tôi xây dựng một ứng dụng quản lý sổ tay công việc cần làm Ứng dụng này hỗ trợ tạo, điều chỉnh, xóa và liệt kê danh sách các tác vụ cần thực hiện bằng cách lấy từ database (cơ sở dữ liệu) Đưới đây là hai hình minh họa cho ứng dụng mà bạn sẽ xây dựng:

[Hình 1 - Sẽ cập nhật]

[Hình 2 - Sẽ cập nhật]

Bạn sẽ học được những gì?

Với loạt bài hướng dẫn trong chương 1, bạn sẽ học được:

· Cách tạo một dự án ASP.NET MVC

· Cách tạo Controllers và Views

· Cách tạo database mới bằng cách sử dụng Entity Framework Code First

· Cách lấy dữ liệu từ database và hiển thị chúng

· Cách sửa dữ liệu và áp dụng data validation (kiểm tra tính hợp lệ dữ liệu)

Tạo ứng dụng đầu tiên

Đầu tiên hãy chạy Visual Studio 2010 hoặc Visual Web Developer 2010 Express và tạo một dự án mới, bạn sẽ thấy hiển thị cửa sổ chọn loại dự án cần tạo như sau:

Bạn hãy chọn mẫu dự án ASP.NET MVC 3 Web Application và đặt tên cho ứng dụng là ToDoApp và nhấn OK để tạo dự án.

Lúc đó hộp thoại New ASP.NET MVC Project sẽ xuất hiện và bạn sẽ có ba sự lựa chọn, bạn sẽ chọn Internet Application để dự án có cài đặt sẵn mã cho phép người dùng đăng

ký tài khoản, đăng nhập và đăng xuất bằng cách sử dụng Membership Provider của ASP.NET

Đồng thời bạn cũng chọn luôn View Engine là Razor để sử dụng Razor View Engine Razor View Engine là điểm mới trên ASP.NET MVC 3, nó giúp cho chúng ta lập trình các Views một cách dễ dàng với cú pháp đơn giản hơn và thông minh hơn so với Web FormsView Engine ở các bản ASP.NET MVC trước.

Khi bạn click chọn nút OK, Visual Studio sẽ tạo dự án mới cho bạn, và bạn đã có một dự án ASP.NET MVC mà hầu như chưa phải lập trình một dòng code nào Tuy nhiên dự án được tạo ra chỉ mới có cấu trúc cơ bản giúp bạn dễ dàng làm quen và lập trình với ASP.NET MVC

Cấu trúc của dự án được tạo ra như sau:

Dự án ToDoApp có các thành phần mà chúng ta cần quan tâm là:

· Tập tin Global.asax có chứa cấu hình định tuyến cho các request để ánh xạ các request với Controller và Action tương ứng

· Tập tin Web.config chứa các cấu hình dành cho ứng dụng web

· Thư mục Content chứa các tập tin tĩnh như tập tin CSS, hình ảnh v.v

· Thư mục Scripts chứa các tập tin JavaScript để chúng ta sử dụng trong các Views

· Các thành phần Controllers, View, Models của MVC sẽ được lưu vào ba thư mục cùng tên

o Bạn nên lưu ý rằng mỗi Controller sẽ có một thư mục chứa các Views thuộc về Controller đó trong thư mục Views Ví dụ HomeController sẽ có thư mục /Views/Home chứa các View tương ứng của Controller này

Tạo Controller cho ứng dụng ASP.NET MVC

Bài viết được cập nhật từ 3:39:49 SA, 19 Tháng Tám 2012 bởi tumivn

Chú ý: Hãy đăng nhập để download tập tin đính kèm!

Ở bài trước bạn đã học cách tạo ứng dụng ASP.NET MVC, và ở bài học này bạn sẽ học cách tạo Controller và tìm hiểu một chút về Controller trong mô hình MVC.

MVC là viết tắt của model-view-controller MVC là mẫu thiết kế để phát triển các ứng dụng có kiến trúc tốt và dễ bảo trì Ứng dụng MVC bao gồm:

· Controller: Là các lớp có trách nhiệm tiếp nhận và xử lý các request gởi đến cho ứng dụng, lấy dữ liệu lên (model) và chọn view để kết hợp với model để tạo ra kết quả trả về cho trình khách

· Models: Là các lớp đại diện cho dữ liệu của ứng dụng, chúng còn có chức năng kiểm tra tính hợp lệ dữ liệu

· Views: các tập tin template (mẫu) để ứng dụng sử dụng và tạo ra các kết quả HTML trả về cho trình khách

Chúng ta sẽ tìm hiểu các thành phần nói trên trong loạt bài hướng dẫn này để có thể tự mình xây dựng được ứng dụng MVC

Bây giờ hãy bắt đầu để tạo Controller cho ứng dụng Ở cửa sổ Solution Explorer, nhấp chuột phải lên thư mục Controllers và sau đó chọn Add Controller

Hãy đặt tên cho controller là HelloWorldController, hãy chọn default template (mẫu mặcđịnh) là Emty Controller.

Sau đó lớp HelloWordController sẽ được lưu bên trong tập tin HelloWordController.cs ở thư mục Controllers.

Bên trong của lớp HelloWorldController, bạn hãy tạo hai phương thức Index và Welcomenhư mã dưới đây Các phương thức sẽ trả về các đoạn mã HTML để hiển thị ở các trình duyệt.

Các bạn sẽ thấy, một Controller phải kế thừa từ lớp Controller trong namespace

System.Web.Mvc Bạn cần lưu ý rằng, bất kỳ một phương thức công (định nghĩa bởi từ khóa public) nào đều được xem như là một action Nghĩa là nếu bạn duyệt /[Tên

Controller]/[Tên Action] như /HelloWord/Index thì kết quả sẽ được trả về cho trình duyệt

ASP.NET MVC có cách định tuyến mặc định là:

Đến lúc này ta chỉ mới trả về những chuỗi HTML nhưng chúng ta cũng đã thao tác đến phần View và phần Controller trong mô hình MVC Tuy nhiên view ở đây là cả chuỗi được trả về trực tiếp cho trình duyệt Tất nhiên bạn không chỉ muốn trả về các chuỗi như thế này, thay vì đó thì chúng ta sẽ sử dụng các view template để tạo ra mã HTML

Bài viết được cập nhật từ 8:08:21 SA, 25 Tháng Tám 2012 bởi tumivn

Trong bài trước chúng ta đã học cách tạo một controller trong ứng dụng ASP.NET MVC, tuy nhiên kết quả trả về của các action chỉ là các chuỗi ký tự đơn giản, với bài học này, chúng ta sẽ học cách để sử dụng các mẫu (.cshtml) để sinh ra mã HTML trả về cho người dùng

Nếu bạn không quên, thì trong bài trước của loạt bài hướng dẫn này, chúng ta đã tạo controller có tên là HelloWorldController, và bây giờ chúng ta sẽ tạo các view template bằng cách sử dụng Razor View Egine để tạo ra các trang HTML phức tạp và có giao diện như mong muốn của bạn để trả về cho trình duyệt Razor là một view engine rất thông minh, giúp giảm thiểu số lượng mã lệnh mà bạn cần để tạo ra một mẫu view, và phối hợp nhuần nhuyễn giữa mã ngôn ngữ lập trình (ở đây là C#) và mã đánh dấu HTML.Đầu tiên bạn hãy điều chỉnh mã của action Index để phương thức này trả về một đối tượng kiểu View như sau:

public ActionResult Index()

Và sau đó hộp thoại Add View sẽ xuất hiện, hãy để mọi thứ như mặc định và nhấn vào

Và Visual Studio sẽ tạo cho bạn tập tin Index.cshtml bên trong thư mục

~/Views/HelloWorld, ở hình bên dưới bạn sẽ thấy nội dung của tập tin Index.cshtml phía

Và bây giờ bạn sẽ điều chỉnh một chút để có thể nhận ra View đó là của bạn khi trả kếtquả về cho trình duyệt Chúng ta sẽ điều hình Index.cshtml như sau:

Bạn thấy ngạc nhiên vì trên URL không bao gồm tên của action nhưng server vẫn hiểu

là action Index, tuy nhiên, với cấu hình hiện tại action có tên là Index là action mặc địnhcho các lợi gọi đến Controller mà không quy định action Chúng ta sẽ tìm hiểu về địnhtuyến (routing) trong các phần sau Dù sao, khởi đầu với View như vậy cũng là đủ tốt,mặc dù tới lúc này bạn chỉ gõ những chuỗi văn bản tĩnh mà thôi Một điều nữa là tiêu đềcủa trang web là My MVC Application là một cái tên mặc định, chúng ta sẽ thay đổi

Thay đổi Views và Layouts

Để thay đổi tiêu đề My MVC Application xuất hiện ở phần đầu của trnag web, chúng tacần phải thay đổi nội dung ở giao diện chung được áp dụng mặc định cho các view củaứng dụng Để làm được điều này, bạn hãy đến thư mục /Views/Shared ở cửa sổ SolutionExplorer và mở tập tin _Layout.cshtml Tập tin này được gọi là trang layout và nó sẽ chia

sẽ giao diện chung cho các trang khác sử dụng

Các mẫu giao diện cho phép bạn có thể quy định giao diện HTML chung chong cảwebsite của bạn tại một nơi và áp dụng nó ở nhiều trang khác nhau Bạn cũng cần lưu ýdòng @RenderBody() gần cuối của tập tin RenderBody là một nơi khi mà các nội dungcủa các view được tạo ra sẽ xuất hiện tại vị trí đó.

Bạn hãy thay đổi tiêu đề nằm trong thẻ <h1> từ “My MVC Application” thành “To doApp” Sau đó hãy vào trình duyệt và click thử vào link About, bạn sẽ thấy tiêu đề củatrang cũng đã thay đổi theo thay đổi ở trang Layout Như vậy nếu áp dụng layout, khibạn thay đổi trang layout, các trang áp dụng nó cũng sẽ thay đổi theo

Sau khi đổi xong, bạn hãy chử chạy lại ứng dụng và duyệt qua các link khác nhau thìđều thấy tiêu đề của các trang là “To do App”

Bây giờ chúng ta sẽ thay tiêu đề của trang HelloWorl/Index.

Hãy mở tập tin /Views/HelloWorld/Index.cshtml, bạn sẽ thay đổi nội dung củaViewBag.Title thành “To do list” Nếu bạn để ý một chút ở trang _Layout.cshtml màchúng ta vừa thay đổi trước đây, thì chúng ta sẽ thấy có nội dung

<title>@ViewBag.Title</title>, vì vậy khi bạn quy định nội dung của ViewBag.Title thìtiêu đề của cửa sổ trình duyệt cũng sẽ thay đổi theo Đồng thời bạn sẽ điều chỉnh thêmmột chút ở thẻ <h2> của /Views/HelloWorld/Index.cshtml như sau:

ViewBag là một đối tượng của NET, và nó được sử dụng bên trong view cùng với mãHTML, bạn sẽ thấy những ký tự như khối lệnh C# bắt @{ … }, hoặc @<tên biến>, đó lànhững điểm khác biệt do Razor View Engine mang lại, để giúp bạn có thể dễ dàng sửdụng ngôn ngữ C# một cách thông minh trong các view template.

Và bạn cũng thấy rằng, view template và layout template được kết hợp với nhau để tạo

ra một trang web, và do đó đối tượng ViewBag cũng được sử dụng ở _Layout.cshtml Kết

Như vậy, đến đây chúng ta đã thao tác với Views với Controller, nhưng chúng ta chưalàm gì với chữ M (Model) trong mô hình MVC, chúng ta sẽ học cách sử dụng Model trong

Truyền dữ liệu từ Controller đến View

Trước khi chúng ta thao tác với database (Cơ sở dữ liệu) thật sự, chúng ta cần phải họccách truyền dữ liệu cho View từ Controlller trước Controller là một lớp được xây dựngnhằm xử lý một số truy vấn nào đó từ phía trình duyệt, mỗi action thường dùng để xử lý

một truy vấn cụ thể nào đó Và tại mỗi action, chúng ta có thể chọn một view bất kỳ đểtrả kết quả về Vấn đề là, nếu view đó chỉ có nội dung tĩnh, thì có lẽ chúng ta không cầntới mô hình MVC Để hiển thị được dữ liệu động thì chúng ta cần truyền dữ liệu (Model)

và kết hợp với view template để tạo ra trang HTML để trả về cho trình duyệt

Như vậy, controller có vai trò sinh ra hoặc lấy dữ liệu cần thiết để áp dụng vào viewtemplate và tạo ra nội dung trả về cho trình duyệt View template (các tập tin *.cshtml)không nên có bất kỹ mã logic nào hoặc trực tiếp thao tác với trình duyệt Thay vào đó,chúng chỉ nên nhận dữ liệu được truyền đến từ controller Nếu bạn làm khác đi, bạn đã

vi phạm mô hình MVC Một trong những mục tiêu lớn mà các nhà lập trình áp dụng môhình MVC là để áp dụng nguyên lý SoC (Seperation of Concerns – tách biệt các mối quantâm) để giúp mã lệnh sạch sẽ và dễ dàng bảo trì hơn

Giả thử chúng ta muốn action HelloWorld/Index hiển thị danh sách các việc cần làm,chúng ta sẽ tạo ra một mảng các chuỗi là các việc cần làm, và hiển thị nó ở view nhưsau:

public ActionResult Index()

{

var tasks = new List<string>()

{

"Viết bài hướng dẫn lập trình MVC",

"Điều chỉnh chức năng comment của Jou Lập trình",

"Đọc truyện Don Kihote",

"Trả lời email của anbinhtrong"

Giờ bạn hãy mở view tương ứng của action HelloWorld/Index là

/Views/HelloWorld/Index.cshtml và cập nhật nó như sau:

Hãy biên dịch lại ứng dụng và duyệt địa chỉ /HelloWorld/Index, bạn sẽ thấy kết quả nhưsau:

Thật tuyệt vời, vì những dữ liệu bạn tạo ra ở Controller đã xuất hiện ở kết quả trả về chongười dùng Và bạn đã chạm nhẹ vào chữ M (model) trong mô hình MVC Chúng ta sẽthao tác nhiều hơn với Model và truy xuất vào database để lấy dữ liệu trong bài viết tiếptheo.

Thêm Model cho ứng dụng ASP.NET MVC

Bài viết được cập nhật từ 1:48:29 CH, 26 Tháng Tám 2012 bởi tumivn

Chú ý: Hãy đăng nhập để download tập tin đính kèm!

Đây là bài thứ năm trong chương 1 cho series bài học Căn bản lập trình ASP.NET MVC Với bài học này bạn sẽ học cách tạo một lớp model và cách kết nối với database bằng Entity Framework Code First để lấy dữ liệu, lập trình các action để lấy dữ liệu đưa vào đối tượng model và phối hợp với view để tạo ra kết quả trả về cho trình duyệt

Tạo các lớp model

Tại cửa sổ Solution Explorer, nhấp chuột phải tại thư mục Models, chọn Add và sau đó

Lúc đó sẽ xuất hiện hộp thoại, bạn hãy nhập tên class là Task (tác vụ), các trường củaTask gồm có Id (khóa chính), Content (nội dung công việc), CreateDate (ngày tạo),

public int Id { get; set; }

public string Content { get; set; }

public DateTime CreateDate { get; set; }

public DateTime DueDate { get; set; }

}

}

Chúng ta sẽ sử dụng lớp Task để đại diện cho dữ liệu về các tác vụ cần phải thực hiệnđược lưu ở database Và mỗi trường của lớp Task sẽ ánh xạ với một cột trong bảng

Tiếp theo chúng ta sẽ tạo một lớp cũng nằm ở thư mục Models có tên là TaskDbContext

using System.Data.Entity;

Tạo chuỗi kết nối và làm việc với database SQLCE

Lớp TaskDbContext là lớp bạn tạo ra để kết nối với database và ánh xạ lớp Task với dữliệu bên trong database Nhưng để kết nối với database, chúng ta luôn cần phải có mộtchuỗi kết nối, và bây giờ chúng ta sẽ thêm thông tin chuỗi kết nối vào tập tin

Có nhiều tập tin Web.config, nhưng tập tin web.config mà bạn cần mở là tập tin nằm ởthư mục gốc của ứng dụng, đó là tập tin chứa các cấu hình chính dành cho ứng dụng

Bây giờ bạn hãy thêm chuỗi kết nối sau vào trong thẻ <connectionStrings> ở trong tập

<add name= TaskDBContext"

connectionString= Data Source=|DataDirectory|Todo.sdf"

providerName= System.Data.SqlServerCe.4.0"/>

Điều bạn cần lưu ý về nội dung của chuỗi kết nối trên đó là chuỗi kết nối trỏ về tập tinTodo.sdf nằm ở thư mục App_Data của ứng dụng Tập tin Todo.sdf là một tập tindatabase theo định dạng của SQLCE (SQL Compact Edition – phiên bản thu gọn của SQLServer) Và quan trọng hơn cả là tên của chuỗi kết nối là TaskDbContext, nó trùng vớitên của lớp TaskDbContext, và như vậy, khi ứng dụng chạy, khi bạn không định nghĩacho TaskDbContext về chuỗi kết nối nó cần tìm để kết nối, nó sẽ tự động tìm chuỗi kếtnối có tên trùng với tên của nó và dựa vào đó để thiết lập kết nối với database

Đến đây thì bạn đã có những bước chuẩn bị để sẵn sàng viết controller quản lý các tác

vụ Bài viết tiếp theo chúng ta sẽ xây dựng TaskController nhằm quản lý các tác vụ vàcho phép người dùng tạo và hiển thị danh sách các việc cần làm

Truy xuất dữ liệu từ Controller

Bài viết được cập nhật từ 3:04:27 SA, 30 Tháng Tám 2012 bởi tumivn

Chú ý: Hãy đăng nhập để download tập tin đính kèm!

Đây là bài viết thứ bảy trong chương 1 của loạt bài hướng dẫn sơ nhập với ASP.NET MVC Trong phần này bạn sẽ tạo ra lớp TaskController và viết mã để lấy về dữ liệu và hiển thị chúng lên trình duyệt bằng cách sử dụng view template

Hãy mở dự án mà bạn đã làm hoặc mở dự án đính kèm của bài học trước, sau đó hãy nhấn chuộc phải vào thư mục Controllers Bạn chọn các tùy chọn như hình dưới đây:

Ở tùy chọn thứ 2, khi bạn chọn “Controller with read/write ”, thì Visual Studio sẽ tạo ra các CRUD actions cho controller để tạo, đọc, cập nhật xóa dữ liệu (CRUD ~ create, read,update, delete) với đối tượng model được xử lý ở đây là Task Visual Studio sẽ sử dụng Entity Framework và TaskDbContext để tạo mã lệnh truy xuất database.

Sau khi bạn nhấn Add ở cửa sổ trên, Visual Studio sẽ tạo ra các tập tin và thư mục (đượcbôi vàng) ở hình dưới đây:

Hãy chạy ứng dụng và chuyển đến địa chỉ /Task bằng cách điều hướng trên thành địa chỉ của trình duyệt, lúc đó request sẽ được chuyển đến action mặc định của

TaskController là Index Và kết quả là một danh sách rỗng các tác vụ, bởi vì bạn chưa thêm bất cứ tác vụ nào vào

Tạo một tác vụ

Bạn hãy chọn link Create New và được điều hướng đến /Task/Create và hãy điền thông

Hãy nhấp vào nút Create để dữ liệu trong form được gởi lên server, ở đó thông tin củatác vụ sẽ được lưu trong database Nếu bạn tạo thành công, trang web sẽ được điềuhướng đến /Task/Index, ở đó bạn sẽ thấy được danh sách các tác vụ cần thực hiện:

Tất nhiên, khi thực hiện đến đây, bạn sẽ thấy một điểm khá buồn cười, đó là tại sao lạiphải điền vào trường CreateDate, bởi ngày tạo có thể lấy được từ giờ của hệ thống, vàngày giờ hiển thị có vẻ không đẹp lắm Và bạn cũng sẽ có nhiều câu hỏi tại sao, ví dụnhư tại sao Visual Studio có thể tạo mọi thứ cho bạn như vậy? Hãy thử khám phá cácchức năng khác như Details (xem chi tiết), Edit (cập nhật), Delete (xóa), các chức năngnày đều hoạt động, và sau đó hãy cùng trải nghiệm mã lệnh được tạo ra bởi Visual

Trải nghiệm mã lệnh được sinh ra bởi Visual Studio

Mở tập tin Controllers/TaskController.cs và xem action Index, phương thức Index được

private TaskDbContext db = new TaskDbContext();

(một phương thức có sẵn của lớp Controller) và tham số truyền vào cho phương thứcchính là danh sách các tác vụ được lấy lên từ database bằng TaskDbContext.

Entity Framework là một cải tiến vượt bậc khi bạn chỉ cần gọi một thuộc tính và có thểlấy lên hết tất cả các dòng dữ liệu Tuy nhiên nếu bạn đã quen thuộc với lập trình thìbạn thấy mã lệnh được tạo ra như thế này thì thực sự không ổn, bởi không ai lấy lên hếttoàn bộ các dòng của một bảng dữ liệu như trên cả, nếu đó là một bảng có hơn 10.000dòng hoặc hơn 1 triệu dòng, thì thật tội nghiệm cho ứng dụng của bạn vì sẽ phải chờ đợi

ASP.NET MVC cũng cung cấp khả năng để truyền các đối tượng có kiểu rõ ràng choview Với cách thức như vậy, ứng dụng sẽ được kiểm tra kỹ càng trong thời gian biêndịch và đồng thời Visual Studio cũng sẽ kiểm tra tính đúng của model cho bạn bằng tínhnăng Intellisense Chúng ta đang sử dụng model có kiểu mạnh với TaskControlller và

@foreach (var item in Model) {

@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |

@Html.ActionLink("Details", "Details", new { id=item.Id }) |

@Html.ActionLink("Delete", "Delete", new { id=item.Id })

Làm việc với SQL Server Compact

Entity Framework Code First sẽ tự tìm chuỗi kết nối tương ứng trong tập tin Web.configngay bên trong thư mục gốc của ứng dụng, nếu database không tồn tại, EntityFramework sẽ tạo mới database Bạn có thể kiểm chứng bằng cách mở thư mụcApp_Data, bạn sẽ thấy tập tin Todo.sdf, đó là tập tin database của SQLCE

Hãy đưa tập tin thành một phần của dự án, bằng chọn biểu tượng “Show all files” và

“Refresh”, sau đó nhấp chuột phải lên tập tin Todo.sdf và chọn “Include in project”

Nhấp đôi chuột phải lên Todo.sdf để mở Server Explorer Sau đó mở rộng mục Tables để

Lưu ý: bạn nhớ đọc bài hướng dẫn cài đặt những thứ cần thiết để lập trình với ASP.NETMVC Nếu bạn chưa cài đặt SQL Server Compact 4.0 thì bạn sẽ bị báo lỗi khi nhấp đôi

Có hai table (bảng) được tạo ra, một là dành cho lớp Task, table thứ hai làEdmMetadata, table này dùng để lưu vết nhằm giúp Entity Framework biết rằngdatabase và các entities (các lớp ánh xạ dữ liệu) chưa được đồng bộ hóa với nhau (Ví

dụ như bạn thêm một trường là Description trong lớp Task)

Nhấp chuột phải vào table Tasks và chọn “Show Table Data” bạn sẽ thấy danh sách các

Nhấp chuột phải vào table Tasks và chọn “Edit Table Schema”:

Lúc này bạn sẽ thấy cửa số Edit Table sẽ xuất hiện, ở đó bạn có thể thay đổi cấu trúccủa table, tuy nhiên hãy cẩn trọng, bởi table Tasks là do Entity Framework tạo ra, nếubạn thay đổi table này, bạn cần phải cập nhật lại lớp Task để đảm bảo Entity Framework

Khi bạn đã xong các thao tác với database, bạn hãy đóng kết nối (close connection) Bởi

vì nếu không, khi bạn chạy ứng dụng, ứng dụng sẽ báo lỗi không kết nối được, lỗi đó là

do Visual Studio đang kết nối đến database mà ứng dụng mong muốn thao tác với nó

Như vậy bạn đã có database, và bạn đã biết cách để tạo ra controller có khả năng tươngtác với database nhờ một chút “ảo thuật” của Visual Studio và Entity Framework Trongbài tiếp theo chúng ta sẽ khám phá mã lệnh còn lại được sinh ra bởi Visual Studio trongcác thao tác tạo controller ở đầu bài.

Khám phá action Edit và lập trình chức năng tìm kiếm tác vụ

Bài viết được cập nhật từ 2:02:05 CH, 05 Tháng Chín 2012 bởi tumivn

Với bài thứ 8 trong loạt bài hướng dẫn nhập môn với ASP.NET MVC, chúng ta sẽ tham khảo action Edit của TaskController, đây là một action được sinh ra bởi Visual Studio Sau đó chúng ta sẽ lập trình thêm một trang hỗ trợ tìm kiếm tác vụ

Bạn hãy chạy ứng dụng và sau đó duyệt địa chỉ /Task/Index, tiếp đó tại danh sách các tác vụ, bạn hãy rê chuột đến link Edit của một tác vụ bất kỳ:

Bạn sẽ thấy ở phía bên dưới sẽ xuất hiện địa chỉ của link mà bạn rê chuột lên, ở trong hình là /Task/Edit/4, nghĩa là link sẽ được action Edit của TaskController xử lý và tham sốtruyền vào có tên là id với giá trị là 4.

Link Edit được sinh ra bởi phương thử Html.ActionLink được sử dụng bên trong tập tin Views/Task/Index.cshtml:

@Html.ActionLink("Edit", "Edit", new { id=item.Id })

Đối tượng Html là một thuộc tính của lớp WebViewPage, lớp này là lớp gốc mà các lớpquản lý view kế thừa Phương thức ActionLink của đối tượng Html giúp tạo ra các siêuliên kết một cách tự động dựa trên các action của Controller

Ví dụ, trong mã lệnh trên, tham số đầu tiên là chuỗi được hiển thị bên trong của siêuliên kết, tham số thứ hai là tên của action là Edit, tham số thứ 3 là danh sách các giá trịđược truyền lên cho action Controller ở đây được mặc định là TaskController, vì mã tạolink được sử dụng trên view Index.cshtml của action Index của TaskController, nên nó

Task task = db.Tasks.Find(id);

Phương thức thứ hai là phương thức có gắn thuộc tính [HttpPost], điều này có nghĩa là

nó chỉ nhận các request dạng POST, các request dạng khác (như DELETE, PUT, GET ) sẽkhông được điều hướng đến phương thức này Điều này cũng có nghĩa là đối với cácrequest dạng Get phương thức thứ nhất sẽ tiếp nhận, và phương thức thứ hai sẽ tiếp

Bạn cũng có thể áp dụng thuộc tính (attribute) [HttpGet] đối với các action mà bạn chỉmuốn nó xử lý các request dạng GET được gởi lên từ trình duyệt mà thôi

Phương thức thứ nhất, dùng để tiếp nhận các request dạng GET, sử dụng phương thứcFind của Entity Framework để trả về đối tượng Task cho view Khi sinh ra TaskController,Visual Studio đã sinh ra view Edit.cshtml, mã sinh ra của view này như sau:

Dòng lệnh nói trên cho biết rằng, view sẽ nhận Model là một đối tượng thuộc lớp Task.

Visual Studio đã sử dụng các phương thức của thuộc tính Html như Html.LabelFor(),Html.EditorFor() để sinh ra các mã HTML nhằm hiển thị các tiêu đề cũng như các thẻ

<input> cho phép người dùng nhập nội dung liên quan đến đối tượng Task

Ở trong mã bạn cũng có thể thấy các phương thức Html.ValidationMessageFor() hoặcHtml.ValidationSummary() để hiển thị các lỗi khi kiểm tra tính hợp lệ của dữ liệu đượcnhập vào Trong trường hợp dữ liệu được nhập vào không hợp lệ, sẽ có các thông báo lỗi

xuất hiện tại các vị trí tương ứng.

Để xem mã HTML được sinh ra như thế nào, bạn có thể nhấp chuột phải vào trang/Task/Edit/4 đang xem và chọn xem mã nguồn HTML Mã HTML được sinh ra khi áp dụng

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Edit</title>

<link href="/Content/Site.css" rel="stylesheet" type="text/css" />

<li><a href="/">Home</a></li>

<li><a href="/Home/About">About</a></li>

<form action="/Task/Edit/4" method="post"> <fieldset>

<legend>Task</legend>

<input data-val="true" data-val-number="The field Id must be a

number." data-val-required="The Id field is required." id="Id" name="Id"

type="hidden" value="4" />

<div class="editor-label">

<label for="Content">Content</label>

</div>

<div class="editor-field">

<input class="text-box single-line" id="Content" name="Content"

type="text" value="Creating a blog engine using PHP Code Ignitor" />

<span class="field-validation-valid" data-valmsg-for="Content"

data-valmsg-replace="true"></span>

</div>

<div class="editor-label">

<label for="CreateDate">CreateDate</label>

</div>

<div class="editor-field">

<input class="text-box single-line" data-val="true" required="The CreateDate field is required." id="CreateDate" name="CreateDate"

data-val-type="text" value="9/3/2012 12:00:00 AM" />

<span class="field-validation-valid" data-valmsg-for="CreateDate"

data-valmsg-replace="true"></span>

</div>

<div class="editor-label">

<label for="DueDate">DueDate</label>

</div>

<div class="editor-field">

<input class="text-box single-line" data-val="true" required="The DueDate field is required." id="DueDate" name="DueDate"

data-val-type="text" value="9/12/2012 12:00:00 AM" />

<span class="field-validation-valid" data-valmsg-for="DueDate"