การออกแบบ view model นั้น
เราต้องกำหนดสิ่งที่ต้องการส่งให้
view ในที่นี้คือ
- Products
- Search คำค้น
- ชื่อ Category
- สตริง ชื่อCatagory(จำนวน Items) เก็บ เป็น List
- SelectListItem เก็บ เป็น List ใช้เพื่อ - สร้างค่า categoryName เพื่อใช้เป็น value
- สร้างค่า text display จาก "ชื่อCatagory(จำนวน Items)"
ดังนั้นเราจึงสร้าง class ได้ดังนี้
using SuaSilverShop_V2.Models;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace SuaSilverShop_V2.ViewModel
{
public class ProductIndexViewModel
{
public IQueryable<Product> Products { get; set; }
public string Search { get; set; }
public IEnumerable<CategoryWithCount> CatsWithCount { get; set; }
public string Category { get; set; }
public IEnumerable<SelectListItem> CatFilterItems
{
get
{
var allCats = CatsWithCount.Select(cc => new SelectListItem
{
Value = cc.CategoryName,
Text = cc.CatNameWithCount
});
return allCats;
}
}
}
public class CategoryWithCount
{
public int ProductCount { get; set; }
public string CategoryName { get; set; }
public string CatNameWithCount
{
get
{
return CategoryName + " (" + ProductCount.ToString() + ")";
}
}
}
}
วิธีใช้ก็ง่ายแสนง่าย Update code ใน ProductsController เป็น
// GET: Products
public ActionResult Index(string category , string search)
{
ProductIndexViewModel viewModel = new ProductIndexViewModel();
var products = db.Products.Include(p => p.Category);
if( !String.IsNullOrEmpty(category) )
{
products = products.Where( p => p.Category.Name == category) ;
}
if( !String.IsNullOrEmpty(search) )
{
products = products.Where(p => p.Name.Contains(search) ||
p.Description.Contains(search) ||
p.Category.Name.Contains(search));
viewModel.Search = search;
}
//group search results into categories and count how many items in each category
viewModel.CatsWithCount = from matchingProducts in products
where
matchingProducts.CategoryID != null
group matchingProducts by
matchingProducts.Category.Name into
catGroup
select new CategoryWithCount()
{
CategoryName = catGroup.Key,
ProductCount = catGroup.Count()
};
if (!String.IsNullOrEmpty(category))
{
products = products.Where(p => p.Category.Name == category);
}
viewModel.Products = products;
return View(viewModel);
}
ไปที่ Views\Products\Index.cshtml แล้วโมดิฟาย ซะ
@model SuaSilverShop_V2.ViewModels.ProductIndexViewModel
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
@using (Html.BeginForm("Index", "Products", FormMethod.Get))
{
<label>Filter by category:</label> @Html.DropDownListFor( vm => vm.Category, Model.CatFilterItems , "All")
<input type="submit" value="Filter" />
<input type="hidden" name="Search" id="Search" value="@Model.Search" />
}
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Category)
</th>
<th>
@Html.DisplayNameFor(model => model.Products.First().Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Products.First().Description )
</th>
<th>
@Html.DisplayNameFor(model => model.Products.First().Price )
</th>
<th></th>
</tr>
@foreach (var item in Model.Products) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Category.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</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>
}
</table>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น