Trong bàitrước chúng ta dùngVisual Studio sẽ tự động tạo các phương thức CRUD (create, read, update, và delete) và kèm theo giao diện (views) vì vậy với ASP.NETMVC.
Bạn đang xem: Cshtml là gì
Trong bài hôm nay chúng ta sẽ tìm hiểu trangIndex.cshtmlvà mã nguồn của nó. Sau khi tạo xongBookController, bạn chạy dự án web với đường dẫnhttp://localhost:xxxx/Book/để mở giao diện quản lý bảngBookmặc định.
Bạn có thể tiếp tục sử dụng view Index.cshtml do ASP.NET Core tự động sinh ra.
Tuy nhiên để theo dõi và hoàn thành bài học này, bạn hãy điều chỉnh code của Index.cshtml như sau:
Tóm Tắt
Kiểm tra mã nguồn
Đến đây, bạn mở xem nội dung tập tin Controllers\BookController.cs, phương thức Index được gieo ra với đoạn mã như sau.
public class BookController : Controller { private BookStoreEntity db = new BookStoreEntity(); / public ActionResult Index() { var books = db.Books.Include(b => b.Author).Include(b => b.Category); return View(books.ToList()); }…..}Trong phương thức Index, bạn có thể thấy phương thức Index có giá trị trả về làView(db.Links.ToList()), tức là danh sách các sách trong bảng Book ở cơ sở dữ liệu. Trong đó, db là 1 biến DbContext, db.Books là bảng Book, db.Books.ToList() là trả bảng Link về một danh sách kiểu List. Ta cũng thấy cóphương thức Include (db.Books.Include) để lấy tên tác giả và danh mục sách trong 2 bảng Author và Category
Bạn có thể thấy thêm đoạnprivate BookStoreEntitydb = new BookStoreEntity();chính là khai báo biến db kiểu DbContext (như đã giải thích) dùng để tương tác (thêm, xóa, sửa, cập nhật) trong cơ sở dữ liệu.
Xem thêm: Danh Sách Các Nước Được Miễn Hợp Pháp Hóa Lãnh Sự Và Loại Giấy Tờ Được Miễn
Tiếp theo, nội dung tập tin Index.cshtmlnhư sau.
model IEnumerable
{ ViewBag.Title = “Index”; Layout = “~/Views/Shared/_Layout.cshtml”;}
Index
Html.ActionLink(“Create New”, “Create”)
Html.DisplayNameFor(model => model.Title)
Html.DisplayNameFor(model => model.Price)
Html.DisplayNameFor(model => model.Images)
Html.DisplayNameFor(model => model.Description)
Html.DisplayNameFor(model => model.Published)
Html.DisplayNameFor(model => model.ViewCount)
Html.DisplayNameFor(model => model.Author.AuthorName)
Html.DisplayNameFor(model => model.Category.CategoryName)
foreach (var item in Model) {
Html.DisplayFor(modelItem => item.Title)
Html.DisplayFor(modelItem => item.Price)
Html.DisplayFor(modelItem => item.Images)
Html.DisplayFor(modelItem => item.Description)
Html.DisplayFor(modelItem => item.Published)
Html.DisplayFor(modelItem => item.ViewCount)
Html.DisplayFor(modelItem => item.Author.AuthorName)
Html.DisplayFor(modelItem => item.Category.CategoryName)
Html.ActionLink(“Edit”, “Edit”, new { id=item.BookID }) |
Html.ActionLink(“Details”, “Details”, new { id=item.BookID }) |
Html.ActionLink(“Delete”, “Delete”, new { id=item.BookID }) }
Html.ActionLink(“Create New”, “Create”)
Trong Index.cshtml có một số điều lưu ý sau:
Model của view này có kiểu là
model IEnumerable. Để ý rằng view model mà Index trả cho view có kiểu Book<> – mảng này thực thi IEnumerable.
Các biểu thức có dạng
Html.DisplayNameFor(model => model.Name) được gọi là Html helper. Html helper là những phương thức C# hỗ trợ sinh HTML. Đây là sản phẩm từ thời ASP.NET MVC.
Xem thêm: Đặc Sản Quảng Bình Mua Về Làm Quà Nhất Định Phải Tìm Mua, Đặc Sản Quảng Bình Mua Về Làm Quà Khi Đi Du Lịch
Tùy chỉnh một số chi tiết :
Index -> Danh sách sáchCreate New -> Thêm sách mớiDelete -> XóaDetails -> XemEdit -> SửaXóa các cột: Mô tả, Số lần xem.Chỉnh lại cột hình ảnh
Index -> Danh sách sáchCreate New -> Thêm sách mớiDelete -> XóaDetails -> XemEdit -> SửaXóa các cột: Mô tả, Số lần xem.Chỉnh lại cột hình ảnh
Tùy chỉnh cột hình: Trước tiên copy thư mục bookimages vào trongproject:
Tùy chỉnh thẻsau:
Html.DisplayFor(modelItem => item.Images)Thànhthẻ sau:
Mở tập tin Book.cs chèn thêm chú thich sau vào cột ngày
DisplayFormat(DataFormatString = “{0:dd/MM/yyyy}”, ApplyFormatInEditMode = true)Thêm CSS cho các HTML sau:
Html.ActionLink(“Thêm sách mới”, “Create”,null, new {
class = “btn btn-warning” })Nội dung tập tin Index.cshtml sau khi chỉnh sửa.
model IEnumerable
{ ViewBag.Title = “Index”; Layout = “~/Views/Shared/_Layout.cshtml”;}
Danh sách sách
Html.ActionLink(“Thêm sách mới”, “Create”,null, new {
class = “btn btn-warning” })
Html.ActionLink(“Thêm sách mới”, “Create”,null, new {class = “btn btn-warning” })
