使用多个下拉列表在单个视图中使用两个模型过滤数据表

我开始使用MVC创建我的项目，并且非常喜欢使用mvc创建不同的项目。

所以我之前创建了一个数据表，当您在单个下拉列表中选择值时，该数据表会过滤数据

但我仍然对在单个视图中使用多个下拉列表和两个模型过滤数据感到好奇

我做了什么……首先，我创建了一个类，我可以使用两个模型来显示我的两个数据表

这是我在mvc的课程

public class MyData { public IEnumerable ProjectCategory { get; set; } public IEnumerable FundCategory { get; set; } } 

创建我的类后，我使用一个视图为索引创建了两个数据表的代码，为部分视图创建视图以调用两个数据表

这是索引视图和部分视图视图的代码，名称为“MyPartialView”

查看索引：

  @using myProject.Models; @model MyData 
 @Html.Partial("MyPartialView",Model) 
 @if (Model.ProjectCategory != null) {  @foreach (var item in Model.ProjectCategory) {  } 
 
 
 
id
 
title 
 
 description 
 
 
 
 
 @Html.DisplayFor(modelItem => item.id) 
 
 @Html.DisplayFor(modelItem => item.title) 
 
 @Html.DisplayFor(modelItem => item.description) 
 
 
 } 

用于查看部分视图

   @foreach (var item in Model.FundCategory) { string selectedRow = ""; if (item.id == ViewBag.fund) { selectedRow = "success"; }  } 
 
 
 
id
 
code
 
 title 
 
 description 
 
--
 
--
 
 
 
 
 @Html.DisplayFor(modelItem => item.id) 
 
 @Html.DisplayFor(modelItem => item.code) 
 
 @Html.DisplayFor(modelItem => item.title) 
 
 @Html.DisplayFor(modelItem => item.description) 
 
 @Html.ActionLink("Edit", "FundCategoryEdit", new { id = item.id }, new { @class = "btn btn-primary" }) 
 
 @Html.ActionLink("Select", "Index", new { fund_category_id = item.id }, null) 
 
  

为了function我的视图我在控制器中创建了代码以显示两个数据表，我在控制器中声明了我的类的名称

这是我的控制器中的代码，第一个代码用于部分视图数据表，第二个代码用于视图索引

部分：

  var viewModel = new MyData(); viewModel.FundCategory = (from p in db.pmTA_FundCategory select new { id = p.id, code = p.code, title = p.title, description = p.description, status = p.status }).ToList() .Select(x => new pmTA_FundCategory() { id = x.id, code = x.code, title = x.title, description = x.description, status = x.status }); 

---

索引观点

  if (fund_category_id != null) { ViewBag.fund = fund_category_id.Value; viewModel.ProjectCategory = (from p in db.pmTA_ProjectCategory join g in db.pmTA_FundCategory on p.fund_category_id equals g.id where p.fund_category_id == fund_category_id select new { id = p.id, title = p.title, description = p.description, title1 = g.title, status = p.status }).ToList() .Select(x => new pmTA_ProjectCategory() { id = x.id, title = x.title, description = x.description, title1 = x.title1, status = x.status }); } return View(viewModel); 

它们在Index控制器中，但我将它分开以便您理解我的代码

if条件的目的是显示我的View Index Data表，当根据ID点击部分数据表的“Select”按钮时，您可以使用上面的代码作为参考，用于显示另一个数据表使用其他数据表…

要显示我的多个下拉列表，我总是使用此代码

索引视图代码显示下拉列表

  
 @Html.DropDownList("id", ViewBag.funds as SelectList, "Select...", new { @class = "form-control" }) 
 
 @Html.DropDownList("projectcat", ViewBag.proj as SelectList, "Select...", new { @class = "form-control" })  

控制器中的下拉代码，用于根据数据库数据显示其内部的数据

第一次和第二次下拉

  var data1 = from p in db.pmTA_FundCategory select new { id = p.id, code = p.code, title = p.title, description = p.description }; SelectList list = new SelectList(data1, "id", "title"); ViewBag.funds = list; 

---

  var data2 = from p in db.pmTA_ProjectCategory select new { id = p.id, title = p.title, description = p.description }; SelectList list1 = new SelectList(data2, "id", "title"); ViewBag.proj = list1; 

问题是…我如何使用多个下拉过滤我的部分数据表而不使用任何插件，但借助于javascript或任何方法来过滤数据表的数据？

一旦我选择了我的多个下拉列表的值，我的部分数据表将显示与所选多个下拉列表对应的数据…

Answer 1

具有多个下拉列表的多个表

1）在主视图中添加两个下拉列表

 
 @Html.DropDownList("id", (List)ViewBag.proj, "--Select id--", new { @onchange = "CallChangefunc1(this.value)" }) 
 
 @Html.DropDownList("id", (List)ViewBag.funds, "--Select id--", new { @onchange = "CallChangefunc2(this.value)" })  

2）添加两个部分视图1st，名称为_GetProjectCategory.cshtml ，第二个名称为_GetFundCategory.cshtml

确保这一点

第一个部分视图@model的类型为@model IEnumerable

第二个部分视图@model的类型为@model IEnumerable

只需在相应的局部视图中添加您的内容。

确保您的部分视图都包含。

 @foreach (var item in Model) { //You table contents } 

3）在主视图中调用两个局部视图

 
 @{Html.RenderPartial("_GetProjectCategory", Model.ProjectCategories);} 
 
 @{Html.RenderPartial("_GetFundCategory", Model.FundCategories);}  

4）然后创建一个视图模型

 public class ProjectFundViewModel { public List ProjectCategories { get; set; } public List FundCategories { get; set; } } 

5）您的操作方法将是（其示例代码并由您的代码替换）。

 public ActionResult Index() { //The below query replace by yours var projects = db.ProjectCategories.ToList(); List dropDownItems1 = projects.Select(c => new SelectListItem { Text = c.title, Value = c.id.ToString() }).ToList(); ViewBag.proj = dropDownItems1; //The below query replace by yours var funds = db.FundCategories.ToList(); List dropDownItems2 = funds.Select(c => new SelectListItem { Text = c.title, Value = c.id.ToString() }).ToList(); ViewBag.funds = dropDownItems2; ProjectFundViewModel viewModel = new ProjectFundViewModel { ProjectCategories = projects, FundCategories = funds }; return View(viewModel); } 

6）在主视图中添加ajax调用，当您在相应的下拉列表中更改任何选项时调用该调用

7）最后你的ajax调用击中了可以呈现相应局部视图的动作方法。

 public PartialViewResult GetProjectCategory(int id) { var projects = db.ProjectCategories.ToList(); var model = projects.Where(x => x.id == id).ToList(); return PartialView("_GetProjectCategory", model); } public PartialViewResult GetFundCategory(int id) { var funds = db.FundCategories.ToList(); var model = funds.Where(x => x.id == id).ToList(); return PartialView("_GetFundCategory", model); } 

8）确保你的主视图@model是@model WebApplicationMVC1.Controllers.ProjectFundViewModel而不是IEnumerable 。

单表有多个下拉

1）在主视图中添加两个下拉列表，其中包含id

 
 @Html.DropDownList("id", (List)ViewBag.ids, "--Select id--", new { @onchange = "CallChangefunc1(this.value)", @id = "dropdown1" }) 
 
 @Html.DropDownList("title", (List)ViewBag.titles, "--Select title--", new { @onchange = "CallChangefunc2(this.value)", @id = "dropdown2" })  

2）使用模型@model IEnumerable添加名称为GetFilteredData.cshtml部分视图。

确保您的部分视图包含。

 @foreach (var item in Model) { //You table contents } 

3）在主视图中调用您的局部视图

 
 @{Html.RenderPartial("GetFilteredData", Model.ProjectCategories);}  

4）现在，您的第一个下拉列表包含ids ，第二个下拉列表包含项目类别的titles 。

 public ActionResult Index() { var projects = db.ProjectCategories.ToList(); List dropDownItems1 = projects.Select(c => new SelectListItem { Text = c.id.ToString(), Value = c.id.ToString() }).ToList(); ViewBag.ids = dropDownItems1; List dropDownItems2 = projects.Select(c => new SelectListItem { Text = c.title, Value = c.title }).ToList(); ViewBag.titles = dropDownItems2; ProjectFundViewModel viewModel = new ProjectFundViewModel { ProjectCategories = projects, }; return View(viewModel); } 

5）从主视图添加ajax调用

6）最后你的ajax调用命中了2个参数的动作方法。

 public PartialViewResult GetFilteredData(int? id, string title) { var query = db.ProjectCategories.ToList(); if (id != null) query = query.Where(x => x.id == id).ToList(); if (!string.IsNullOrEmpty(title)) query = query.Where(x => x.title == title).ToList(); return PartialView("GetFilteredData", query); }