Xây dựng Web App ASP.NET Core và MongoDB (Phần 3)

bởi Canh Pham Duy

Sau phần 2, tôi tiếp tục giới thiệu series xây dựng Web App ASP.NET Core và MongoDB (Phần 3).

Phương thức Index và View

Thay đổi phương thức Index trong CarsController.cs như sau:

        // GET: Cars
        public ActionResult Index()
        {
            return View(carService.Get());
        }

Sau đó click chuột phải trên phương thức Index, và chọn Add View…

Thư mục CarsIndex.cshtml được tạo trong thư mục Views sau thao tác này:

Mở Index.cshml và thực hiện các thay đổi sau:

  • Xóa các trường Id
  • Thay đổi tiêu đề Index thành Car Gallery
  • Thay đổi Create New thành Add New Car
  • Di chuyển trường ImageUrl lên và thay đổi nó thành:
@if (item.ImageUrl != null)
{
    <img src="@Url.Content(item.ImageUrl)" alt="Image" />
}

Cập nhật các liên kết hành động ở phía dưới như dưới đây:

<td>
    @Html.ActionLink(“Edit”, “Edit”, new { id=item.Id }) |
    @Html.ActionLink(“Details”, “Details”, new { id=item.Id }) |
    @Html.ActionLink(“Delete”, “Delete”, new { id=item.Id })
</td>

Index.cshtml nên như sau ở cuối:

@model IEnumerable<CarGalleryApp.Models.Car>

@{
    ViewData["Title"] = "Car Gallery";
}

<h1>Car Gallery</h1>

<p>
    <a asp-action="Create">Add New Car</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ImageUrl)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Brand)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Model)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Year)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @if (item.ImageUrl != null)
                {
                    <img src="@Url.Content(item.ImageUrl)" alt="Image" />
                }
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Brand)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Model)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Year)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
}
    </tbody>
</table>

Chạy ứng dụng và nhấp vào Car Gallery App trong Trang chủ. Bạn sẽ nhận được kết quả sau:

Tạo Phương thức và View

Click chuột phải trên phương thức Create trên CarsController và chọn Add View…

Sau đó, chọn mẫu và lớp model như bên dưới trong hộp màu đỏ và nhấp vào Add.

Chuyển đến Create.cshtml và xóa nhóm liên quan đến trường Id:

<div class="form-group">
    <label asp-for="Id" class="control-label"></label>
    <input asp-for="Id" class="form-control" />
    <span asp-validation-for="Id" class="text-danger"></span>
</div>

Thay đổi Tạo phương thức POST trong CarsController.cs bằng mã sau:

        // POST: Cars/Create/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Create(Car car)
        {
            if (ModelState.IsValid)
            {
                carService.Create(car);
                return RedirectToAction(nameof(Index));
            }
            return View(car);
        }

Bây giờ, chúng ta có thể tạo bản ghi đầu tiên của chúng tôi.
Chạy ứng dụng, nhấn vào Car Gallery App và nhấn vào Add New Car.

(Bạn cần tạo thư mục hình ảnh trong thư mục wwwroot của dự án và thêm hình ảnh vào đó)

Sau khi nhấp vào Create, dòng đầu tiên của chúng tôi được hiển thị trong view Index như bên dưới:

Khi chúng tôi nhấp vào nút Create, phương thức Create POST trong CarsController chạy.

Chúng ta có thể kiểm tra bản ghi từ cơ sở dữ liệu bằng lệnh sau:

db.Cars.find().pretty()

Mời bạn theo dõi tiếp phần 4 tại đây.

Related Posts

Leave a Reply

avatar
  Subscribe  
Notify of