Select Tag Helper in ASP.NET Core MVC

min read

Sử dụng Select Tag Helper in ASP.NET Core MVC. Tôi lên mạng và thấy nhiều người cũng hỏi về cách dùng sử dụng cái này, nay minh chia sẻ với mọi người cách dùng nó nhé.
Trong các dự án của chung ta thường có các tính năng chọn Category , nay mình dùng Select Tag Helper để giải quyết vấn đề này
VD: Bạn đã có một table Categories đã có dữ liệu sẵn, và đã có một class Category.cs trong thư mục Models, bạn có thể xem bài viết trước tại đây
Create Database using Code First in ASP.NET CORE 2.1 để tạo Category và Connect database

Đầu tiên bạn cần using Microsoft.AspNetCore.Mvc.Rendering trong file Controller của bạn
Vào thư mục Controllers, add new->Controllers-> ProductController.cs và thêm using Microsoft.AspNetCore.Mvc.Rendering;
Tạo hàm CategoriesList() như sau trong file ProductController.cs

public ActionResult Create()
        {
            CategoriesList();
            CategoriesList2();
            return View();
        }

 private void CategoriesList(object selectCategory=null)
        {
            ViewBag.categories = new SelectList(_db.Categories.ToList(), "idCategory", "Name",selectCategory);
        }

private void CategoriesList2()
        {
            var data = _db.Categories.ToList();
            List<Category> list = new List<Category>();
            foreach(var item in data)
            {
                list.Add(new Category
                {
                    idCategory = item.idCategory,
                    Name = item.Name
                });
            }
            ViewBag.Categories2 = list;
        }

Đoạn code trên mình tạo 2 hàm, bạn có thể sử dụng hàm nào cũng được !
_db.Categories.ToList(): dùng lấy danh sách dữ liệu của bảng table Categories trong database
SelectList(): như đã nói ở đầu bài, để dùng được SelectList(), bạn cần phải có sự hổ trợ của (using Microsoft.AspNetCore.Mvc.Rendering)

Ok, giờ ta cần hiển thị nó ra khung nhìn thôi, trong Create.cshtml bạn dùng nó như sau

<div class="form-group">
                    <label>Select Category</label>
                    <select asp-for="idCategory" asp-items="@ViewBag.Categories" class="form-control">
                        <option>Select one</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Select Category</label>
                    <select asp-for="idCategory" asp-items="@(new SelectList(ViewBag.Categories2,"idCategory","Name"))" class="form-control">
                        <option>Select one</option>
                    </select>
                </div>

Nếu bạn muốn dùng nó cho Edit.cshtml, cũng tương tự như Create.cshtml nhé:

public ActionResult Edit(int id)
{
      CategoriesList();
      CategoriesList2();
      return View(_db.Products.Find(id));
}

Khi bạn bấm Edit để sửa một mẫu tin, thì nó tự động nhận dạng được idCategory và show ra cái Name của Category đó cho bạn, bạn không cần viết thêm hàm tìm kiếm category nửa nhé, nó hay ở chổ đó
 

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)