Question

嗨，我正在开发一个简单的在线购物MVC应用程序。我有一个包含3个类别的表：笔记本电脑，手机，控制台。我有一个局部视图，可以将这些类别（来自类别表）返回到列表中，并将每个值放入按钮内。

部分视图：_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

我想要做的是当我从“类别”视图中获得3个类别时（笔记本电脑，手机，控制台），我希望如果我单击笔记本电脑按钮，它将带我进入笔记本电脑局部视图，它将显示具有相同categoryID的所有产品（例如，如果我在控制台上单击，我会得到Xbox和PS，因为它们具有Smaecategory ID作为ConsoleID），移动到移动的部分视图以及与控制台按钮相同的东西。

我希望我足够清楚。谢谢。

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);

foreach元素值可用于不同墨水

1 个答案: