不同油墨的元素值

Question

嗨，我正在做一个简单的网上购物MVC应用程序。我有一张桌子，里面有三大类:笔记本电脑，手机，控制台。我有一个部分视图，将这些类别(从类别表)返回到列表中，并将每个值放入一个按钮中。

部分视图：_Categories

@model OnlineShopping.MyViewModel

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">

        @foreach (Category item in Model.CategoriesV)
        {
            <button type="button" class="btn btn-secondary"> 
                @item.CategoriesName 
            </button>
        }
    </div>
</div>

我像这样调用索引中的部分视图

Index.cshtml

<div class="catmenu" style="display: none;">
    @Html.Partial("_Categories", Model)
</div><br />

我有另一个名为Products的表，它包含每个类别的产品名称和类别表中的类别ID。

示例：

类别表包含：

categoryId =1

CategoriesName =移动电话

产品表包含：

ProductID=1

ProductName=Apple

Category_ID=1

我想要做的是，当我从类别视图(笔记本电脑、手机、控制台)中得到三个类别时，我希望如果我单击膝上型计算机按钮，它将带我到膝上型计算机部分视图，它将显示所有具有相同categoryID的产品(就像我在控制台上单击控制台，我将得到Xbox和PS，因为它们有ConsoleID的Smaecategory ID )，移动到移动部分视图，以及控制台按钮的相同功能。

希望我说得够清楚..。谢谢。

Answer 1

做一件事，用第一个循环中的按钮绑定一些唯一的id，我更喜欢Id列，所以它将是这样的：-

@model OnlineShopping.MyViewModel

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">

        @foreach (Category item in Model.CategoriesV)
        {
            <button type="button" class="btn btn-secondary catclick" id="item.Category_Id"> 
                @item.CategoriesName 
            </button>
        }
    </div>
</div>

在控制器中，我将创建一个方法，它将根据类别返回所有项。

public ActionResult GetCatItems(int id){
  // method to return data here
  return View("_mypartialview",partialdata)

}

这将为视图返回带有填充数据的普通html，现在只需将返回的html粘贴到正确的位置即可。

$.ajax({
// ajax get data method
success(data){
  //on success clear the parent container of your partial view
   $('.catmenu').html('');


 //this will load your html into view
  $('.catmenu').html(data);
}

})

因为在控制器中，我们返回了视图并使用ajax调用捕获了它，所以使用填充的数据可以获得该部分视图的html。

return View("_partial",data);

成功后，ajax获取部分视图将呈现在容器中。

//on success clear the parent container of your partial view
   $('.catmenu').html('');


 //this will load your html into view
  $('.catmenu').html(data);