如何在ASP.NET MVC中按类别列出产品？

如何解决如何在ASP.NET MVC中按类别列出产品？

我正在尝试按类别值列出产品列表。类别的值是产品的描述，如果产品是苹果，则类别将是水果。因此，我希望用户能够选择类别，单击按钮，然后列出具有相同类别的所有产品。我正在尝试执行此操作，选择类别并在同一视图上按类别列出。

模型：

public partial class product
{
    int id {get; set}
    string name {get; set}
    string category {get; set;}
}

控制器：

[HttpGet]
public ActionResult ListByCat()
{
    List<SelectListItem> lst = new List<SelectListItem>();
        lst.Add(new SelectListItem() { Text = "Fruits",Value = "fruits" });
        lst.Add(new SelectListItem() { Text = "Hardware",Value = "hardware"});
        lst.Add(new SelectListItem() { Text = "vegetables",Value = "vegetables"});

        ViewBag.category = lst;

        return View();
 }

 [HttpPost]
 public ActionResult listByCat(product prod)
    {
        using (inventarioEntitiesDBA dc = new inventarioEntitiesDBA())
        {
            return View(dc.product.Where(a => a.category == prod.category).ToList());
        }
            
    }

视图：

@model regMVC.Models.product

@{
      ViewBag.Title = "listByCat";
 }

  <h2>listByCat</h2>

  @using (Html.BeginForm())
  {
      <div class="form-group">
             @Html.LabelFor(model => model.category,htmlAttributes: new { @class = "control- label col-md-2" })

    <div class="col-md-10">
        @Html.DropDownList("category",null,htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.category,"",new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="List by Category" class="btn btn-default" />
    </div>
</div>

解决方法

ViewModel

public class ListByCatViewModel
    {
        //This hold the selected value in post action
        public string SelectedCategory { get; set; }
        public List<SelectListItem> Categories { get; set; } = new List<SelectListItem>();
        public List<Product> SearchResults { get; set; } = new List<Product>();
    }

listByCat（）GET操作，这里我们将ViewModel传递给视图

public ActionResult listByCat()
 {
   ListByCatViewModel listByCatViewModel = new ListByCatViewModel();
   listByCatViewModel.Categories = buildCategories();
            
   return View(listByCatViewModel);
 }

现在执行POST操作，从数据库中找到结果，我正在从列表中模拟结果

 [HttpPost]
 public ActionResult listByCat(ListByCatViewModel listByCatViewModel)
        {
            if (ModelState.IsValid)
            {
                if (listByCatViewModel.SelectedCategory != null)
                {
                    //Binding dropdown again
                    listByCatViewModel.Categories = buildCategories(listByCatViewModel.SelectedCategory);

                    var products = mockProductCollection();
                    var results = products.FindAll(x => x.category.ToLower() == 
                                       listByCatViewModel.SelectedCategory.ToLower());
                    listByCatViewModel.SearchResults = results;
                }
            }
            return View(listByCatViewModel);
        }

我的助手方法来填充下拉列表和产品列表

 private List<SelectListItem> buildCategories(string selectedItem = "")
        {
            List<SelectListItem> lst = new List<SelectListItem>();

            lst.Add(new SelectListItem() { Text = "Fruits",Value = "fruits" });
            lst.Add(new SelectListItem() { Text = "Hardware",Value = "hardware" });
            lst.Add(new SelectListItem() { Text = "Vegetables",Value = "vegetables" });

            if (!string.IsNullOrEmpty(selectedItem))
            {
                lst.Find(x => x.Value.ToLower() == selectedItem.ToLower()).Selected = true;
            }
            return lst;
        }
        private List<Product> mockProductCollection()
        {
            List<Product> products = new List<Product>() { 
                new Product(){id=1,category="fruits",name="Apple"},new Product(){id=2,name="Banana"},new Product(){id=3,category="hardware",name="Screws"},new Product(){id=4,name="Bolt"},new Product(){id=5,category="vegetables",name="Carrot"},new Product(){id=6,name="Cucumber"}
            };
            return products;
        }

最后是视图

@model NETMVC.ViewModel.ListByCatViewModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@using (Html.BeginForm())
{
    <div class="form-group">
        @Html.LabelFor(model => model.Categories,htmlAttributes: new { @class = "control- label col-md-2" })

        <div class="col-md-10">
            @Html.DropDownListFor(model => model.SelectedCategory,Model.Categories,htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Categories,"",new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="List by Category" class="btn btn-default" />
        </div>
    </div>
}

@if (Model.SearchResults != null && Model.SearchResults.Count > 0)
{

<ul>
    <li>Search Results</li>
    @foreach (var product in Model.SearchResults)
    {
        <li>@product.name</li>
    }
</ul>
}