Tạo ứng dụng ASP mvc

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 Forms View 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. Khởi chạy ứng dụng Đến đây bạn hãy nhấn phím F5 hoặc Ctrl-F5 để khởi chạy ứng dụng Web, bạn sẽ thấy trang web được chạy trên trình duyệt mặc định như dưới đây: Bạn cần lưu ý rằng, website được chạy trên ASP.NET Development Server và có cổng là 39797. Khi chạy được ứng dụng này, bạn có thể thử đăng ký tài khoản và đăng nhập bằng cách click chuột vào link Log On. Lúc này ứng dụng chỉ là một ứng dụng căn bản với chức năng đăng nhập. Bạn hãy theo dõi bài tập tiếp theo để có thể hiểu cách lập trình ứng dụng và tìm hiểu cách hoạt động của ASP.NET MVC. 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à Welcome như 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. using System.Web.Mvc; namespace ToDoApp.Controllers { public class HelloWorldController : Controller { // // GET: /HelloWorld/ public string Index() { return "Đây là Action <b>Mặc định</b>!"; } public string Welcome() { return "Đây là action Wellcome!"; } } } 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à: /[Controller]/[Action]/[Parameters] Tuy nhiên nếu bạn muốn có cách định tuyến khác theo ý của bạn, bạn cũng có thể tự định nghĩa cho ứng dụng của bạn, nhưng nó không nằm trong phạm vi của bài viết này. Giả sử bạn muốn điều chỉnh action Wellcome của HelloWorldController để tiếp nhận các tham số được gởi lên từ trình duyệt như sau: public string Welcome(string name, string city) { return "Xin chào " + name + " đến từ " + city + "!"; } Với việc phương thức Welcom nhận hai tham số name và city như vậy, chúng ta có thể truy vấn từ trình duyệt và truyền hai tham số có tên là name và city (http://localhost:39797/HelloWorld/Welcome?name=Tumi&city=Vietnam), lúc đó hệ thống sẽ tự động chuyển các tham số được truyển bởi URL hoặc từ Form trong mã HTML thành các biến để truyền vào lời gọi của action. Đế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 để trả về cho trình duyệt. Bài hướng dẫn tiếp theo sẽ giúp bạn thao tác với View và cú pháp Razor! Happy Coding! Tạo View trong ứng dụng ASP.NET MVC 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() { return View(); } Để tạo ra view template bạn có thể dùng cách như sau, nhấp chuột phải lên tên của action (ở đây là Index, và chọn Add View như hình dưới đây: 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 nút Add: [...]... ViewData, tuy nhiên có một vấn đề khi sử dụng hai đối tượng này (tuy hai mà một) là ứng dụng sẽ không biết được các đối tượng có chứa những gì, và mã lệnh có đúng hay không cho đến khi ứng dụng chạy Nếu lập trình sơ sót, khả năng sinh lỗi là rất cao ASP. NET MVC cũng cung cấp khả năng để truyền các đối tượng có kiểu rõ ràng cho view Với cách thức như vậy, ứng dụng sẽ được kiểm tra kỹ càng trong thời... 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ếp theo 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á g Tá 2012 bởi tumivn n m 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... đã 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ương tác với database nhờ một chút “ảo thuật” của Visual Studio và Entity... sẽ hỗ trợ hiển thị các thuộc tính của đối tượng khi bạn sử dụng code editor (trình soạn thảo mã lệnh) 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.config ngay bên trong thư mục gốc của ứng dụng, nếu database không tồn tại, Entity Framework sẽ tạo mới database Bạn có thể kiểm chứng bằng cách mở thư mục App_Data, bạn sẽ thấy tập tin Todo.sdf,... 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 quan tâ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 trình", mảng các chuỗi là các việc cần làm,... 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 trong bước tiếp theo 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 ta cầ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... (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 (được bô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... 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 dung củ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ẻ từ “My MVC Application” thành “To... DbContext nằm trong namespace 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ột chuỗ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 Web.config của ứng dụng Có nhiều tập tin Web.config, nhưng tập... ta sẽ thêm thông tin chuỗi kết nối vào tập tin Web.config của ứng dụng 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 web mà bạn đang lập trình Bây giờ bạn hãy thêm chuỗi kết nối sau vào trong thẻ ở trong tập tin Web.config . 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. ứng dụng căn bản với chức năng đăng nhập. Bạn hãy theo dõi bài tập tiếp theo để có thể hiểu cách lập trình ứng dụng và tìm hiểu cách hoạt động của ASP. NET MVC. Tạo Controller cho ứng dụng ASP. NET. 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ó