ASP.NET - MVC - Tùy chỉnh Index.cshtml

Tùy chỉnh trang Index.cshtml 

Trong bài trước chúng ta dùng Visual 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.NET MVC.

Trong bài hôm nay chúng ta sẽ tìm hiểu trang Index.cshtml và mã nguồn của nó. Sau khi tạo xong BookController, bạn chạy dự án web với đường dẫn http://localhost:xxxx/Book/ để mở giao diện quản lý bảng Book mặ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:


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 Category

Bạn có thể thấy thêm đoạn private 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.

Tiếp theo, nội dung tập tin Index.cshtml như sau.

@model IEnumerable<BookStoreManager.Models.Book>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Images)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Published)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ViewCount)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Author.AuthorName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Category.CategoryName)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Images)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Published)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ViewCount)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Author.AuthorName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Category.CategoryName)
        </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>

Trong Index.cshtml có một số điều lưu ý sau:

Model của view này có kiểu là @model IEnumerable<BookMan.Mvc.Models.Book>. Để ý rằng view model mà Index trả cho view có kiểu Book[] – mảng này thực thi IEnumerable<Book>.

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.


Tùy chỉnh một số chi tiết :

  1. Index ->  Danh sách sách
  2. Create New -> Thêm sách mới
  3. Delete -> Xóa
  4. Details -> Xem
  5. Edit -> Sửa
  6. Xóa các cột: Mô tả, Số lần xem.
  7. 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 trong project:

Tùy chỉnh thẻ sau:

@Html.DisplayFor(modelItem => item.Images)

Thành thẻ sau:

<img src="~/bookimages/@item.Images" />

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<BookStoreManager.Models.Book>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Danh sách sách</h2>

<p>
    @Html.ActionLink("Thêm sách mới", "Create",null, new { @class = "btn btn-warning" })
</p>
<table class="table">
    <tr>
        <th style="width:200px">
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Images)
        </th>
       
        <th>
            @Html.DisplayNameFor(model => model.Published)
        </th>
        
        <th>
            @Html.DisplayNameFor(model => model.Author.AuthorName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Category.CategoryName)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            <img src="~/bookimages/@item.Images" />           
        </td>
        
        <td>
            @Html.DisplayFor(modelItem => item.Published)
        </td>
        
        <td>
            @Html.DisplayFor(modelItem => item.Author.AuthorName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Category.CategoryName)
        </td>
        <td>
            @Html.ActionLink("Sửa", "Edit", new { id=item.BookID }) |
            @Html.ActionLink("Xem", "Details", new { id=item.BookID }) |
            @Html.ActionLink("Xóa", "Delete", new { id=item.BookID })
        </td>
    </tr>
}

</table>

Chạy chương trình sẽ cho kết quả sau: