Lab01: M V C Lưu ý: Để thực hành, các bạn phải cài Visual Studio 2013 trở lên mới hỗ trợ MVC5. 1 Mục đích Giới thiệu mô hình MVC Model, Controller, View Phân biệt ViewData, ViewBag, TempData 2 Khởi động Tạo mới project, chọn Visual C# Web Template. Sau khi tạo mới Web Application MVC5, cửa sổ tiếp theo hiện lên chọn MVC Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 1
Sau khi chọn xong các bước trên, bạn có được ứng dụng mẫu MVC Application với cấu trúc như hình: Cấu trúc của một MVC Web Application Thư mục /Controllers /Models /Views /Scripts /fonts /Contents /App_Data /App_Start Tập tin Global.asax Tập tin Web.Config Mô tả Thư mục chứa các lớp xử lý Controller của dự án Thư mục chứa các lớp đối tượng Model của dự án Thư mục đặt các View giao diện Thư mục chứa các bộ thư viện javascript được tích hợp vào sẵn của MVC hoặc là nơi bạn tổ chức và đặt các thư viện Javascript mà mình tự phát triển Chứa các mẫu font của thư viện Bootstrap Chứa nội dung tĩnh như CSS, hình ảnh hoặc các file javascript Chứa CSDL nội bộ nếu có Các lớp cấu hình của ứng dụng như Routing, Bundling (hỗ trợ nén CSS, javascript để giảm kích thước). Các lớp này được gọi trong Application_Start của Global.asax Định nghĩa các sự kiện quản lý vòng đời ứng dụng Chứa thông tin cấu hình ứng dụng 3 Ví dụ Model, View, Controller quản lý sách 3.1 Tạo mới Model namespace MVC_Day01.Models public class Book public int BookID get; set; Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 2
public string BookName get; set; public string Author get; set; public string ImageCover get; set; 3.2 Tạo Controller Tạo mới controller đặt tên là BookController dùng Template Empty Thử viết một số method. namespace MVC_Day01.Controllers public class BookController : Controller public string LayGio() return DateTime.Now.ToString(); public int SoMayMan() Random rd = new Random(); Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 3
return rd.next(10000, 99999); public string Chao(string HoTen) return "Xin chào " + HoTen; 3.3 Kiểm tra từ địa chỉ trình duyệt Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 4
3.4 Tạo Action BookList 3.5 Tạo View Tạo mới View để hiển thị danh sách Book ra giao diện: Nhấn chuột phải vào hàm BookList chọn Add -- > New view, cửa sổ mới hiện lên chọn tham số như hình Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 5
Chọn đường dẫn tới tập tin _Layout.cshtml. Code tự sinh ra: @model IEnumerable<MVC_Day01.Models.Book> @ ViewBag.Title = "BookList"; Layout = "~/Views/Shared/_Layout.cshtml"; <h2>booklist</h2> <p> @Html.ActionLink("Create New", "Create") </p> <table class="table"> <tr> <th> @Html.DisplayNameFor(model => model.bookname) </th> <th> @Html.DisplayNameFor(model => model.author) </th> <th> @Html.DisplayNameFor(model => model.imagecover) </th> <th></th> </tr> @foreach (var item in Model) <tr> <td> @Html.DisplayFor(modelItem => item.bookname) </td> <td> @Html.DisplayFor(modelItem => item.author) Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 6
</td> <td> @Html.DisplayFor(modelItem => item.imagecover) </td> <td> @Html.ActionLink("Edit", "Edit", new id=item.bookid ) @Html.ActionLink("Details", "Details", new id=item.bookid ) @Html.ActionLink("Delete", "Delete", new id=item.bookid ) </td> </tr> </table> Thử hiển thị View: Copy các hình vào thư mục Sach nằm trong thư mục Content và chỉnh sửa để hiển thị hình: Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 7
4 ViewBag, ViewData, TempData Để truyền dữ liệu giữa Controller và View ta có 3 cách sau: ViewBag, ViewData, TempData. ViewBag, ViewData: chỉ có tác dụng trong request hiện tại (chuyển View không có tác dụng) o ViewData[<key>] = <value>; o ViewBag.<Property> = <value>; TempData: cho phép truyền từ request hiện tại sang subrequest o TempData[<Key>] = <value>; 4.1 Ví dụ ViewData Thêm nội dung cho Action Index() public class TestController : Controller // GET: Test public ActionResult Index() ViewData["Message"] = "Message from ViewData"; ViewData["CurrentTime"] = DateTime.Now; return View(); Tạo View tương ứng: Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 8
4.2 Ví dụ ViewBag Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 9
4.3 TempData Thử demo: http://host:port/test/demo thì cũng chuyển sang http://host:port/test/hienthi Ths. Lương Trần Hy Hiến, KHOA CNTT TRƯỜNG ĐH SƯ PHẠM TP. HCM 10