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

Question

我开始使用 MVC 创建我的项目，使用 mvc 创建不同的项目真的很有趣。所以我前段时间创建了一个数据表，当您在单个下拉列表中选择值时过滤数据但我仍然对在单个视图中使用多个下拉列表和两个模型过滤数据感到好奇我做了什么......首先，我创建了一个类，可用于使用两个模型显示我的两个数据表这是我在 mvc 中的课程 public class MyData  {    public IEnumerable<pmTA_ProjectCategory> ProjectCategory { get; set; }    public IEnumerable<pmTA_FundCategory> FundCategory { get; set; }  }创建我的类后，我为两个数据表创建了一个代码，使用一个索引视图和局部视图视图来调用两个数据表这是索引视图和局部视图视图的代码，名称为“MyPartialView”查看索引：  @using myProject.Models;  @model MyData  <div id="myPartialView">   @Html.Partial("MyPartialView",Model)  </div>  @if (Model.ProjectCategory != null) {  <table class="table table-bordered table-hover "><thead>    <tr>        <th>id</th>        <th>title </th>        <th>            description        </th>    </tr></thead><tbody>    @foreach (var item in Model.ProjectCategory)    {        <tr>            <td>                @Html.DisplayFor(modelItem => item.id)            </td>            <td>                @Html.DisplayFor(modelItem => item.title)            </td>            <td>                @Html.DisplayFor(modelItem => item.description)            </td>        </tr>    }</tbody> </table>}

Answer 1

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

1）在主视图中添加两个下拉菜单，例如

<div class="dropdown">

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

</div>

<div class="dropdown">

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

</div>

2) 添加两个局部视图 1st with name_GetProjectCategory.cshtml和 2nd with name_GetFundCategory.cshtml

确保

第一个局部视图@model将是类型@model IEnumerable<WebApplicationMVC1.Controllers.ProjectCategory>

第二部分视图@model将是类型@model IEnumerable<WebApplicationMVC1.Controllers.FundCategory>

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

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

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

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

<div id="myPartialView1">

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

</div>

<div id="myPartialView2">

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

</div>

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

public class ProjectFundViewModel

{

    public List<ProjectCategory> ProjectCategories { get; set; }

    public List<FundCategory> FundCategories { get; set; }

}

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

public ActionResult Index()

{

    //The below query replace by yours

    var projects = db.ProjectCategories.ToList();

    List<SelectListItem> 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<SelectListItem> 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 调用添加到您的主视图中，当您在相应的下拉列表中更改任何选项时调用该调用

<script>

    function CallChangefunc1(id) {

         $.ajax({

             url: "@Url.Action("GetProjectCategory", "Default")",

             data: { id: id },

            type: "Get",

            dataType: "html",    

             success: function (data) {

                 console.log(data);

                //Whatever result you have got from your controller with html partial view replace with a specific html.

                $("#myPartialView1").html( data ); // HTML DOM replace

            }

        });

    }

    function CallChangefunc2(id) {

         $.ajax({

             url: "@Url.Action("GetFundCategory", "Default")",

             data: { id: id },

            type: "Get",

            dataType: "html",    

             success: function (data) {

                 console.log(data);

                //Whatever result you have got from your controller with html partial view replace with a specific html.

                $("#myPartialView2").html( data ); // HTML DOM replace

            }

        });

    }

</script>

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 的下拉列表

<div class="dropdown">

    @Html.DropDownList("id", (List<SelectListItem>)ViewBag.ids, "--Select id--", new { @onchange = "CallChangefunc1(this.value)", @id = "dropdown1" })

</div>

<div class="dropdown">

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

</div>

2）添加名称GetFilteredData.cshtml为模型的局部视图@model IEnumerable<WebApplicationMVC1.Controllers.ProjectCategory>。

确保您的部分视图包含。

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

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

<div id="myPartialView">

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

</div>

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

public ActionResult Index()

{

    var projects = db.ProjectCategories.ToList();

    List<SelectListItem> dropDownItems1 = projects.Select(c => new SelectListItem { Text = c.id.ToString(), Value = c.id.ToString() }).ToList();

    ViewBag.ids = dropDownItems1;

    List<SelectListItem> 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调用，如

<script>

    function CallChangefunc1(id) {

        var title = $("#dropdown2").val();

         $.ajax({

             url: "@Url.Action("GetFilteredData", "Default2")",

             data: { id: id, title: title },

            type: "Get",

            dataType: "html",

             success: function (data) {

                 console.log(data);

                //Whatever result you have got from your controller with html partial view replace with a specific html.

                 $("#myPartialView").html( data ); // HTML DOM replace

            }

        });

    }

    function CallChangefunc2(title) {

        var id = $("#dropdown1").val();

         $.ajax({

             url: "@Url.Action("GetFilteredData", "Default2")",

             data: { id: id, title: title },

            type: "Get",

            dataType: "html",

             success: function (data) {

                 console.log(data);

                //Whatever result you have got from your controller with html partial view replace with a specific html.

                 $("#myPartialView").html( data ); // HTML DOM replace

            }

        });

    }

</script>

6) 最后你的 ajax 调用命中了带有 2 个参数的 action 方法。

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

}