时间戳

首页 > 解决方案 > 如何通过更改asp.net mvc下拉菜单中的选项来过滤html表中的数据？

javascript - 如何通过更改asp.net mvc下拉菜单中的选项来过滤html表中的数据？

问题描述

自从我开始学习 MVC 编程已经有好几天了，老实说，我仍在应对 MVC 的新环境。

在我的项目中，我开始创建一个数据表，使用这些代码显示我的数据库中的数据。

这是我在视图和控制器中的代码。这部分运行得很好。

 <table id="table1" >
<thead>
    <tr>
        <th>id</th>
        <th>title </th>
        <th>
            description
        </th>

    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {

        <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>
     }

   var charts = (from p in db.pmTA_ProjectCategory

                      select new
                      {
                          id = p.id,
                          title = p.title,
                          description = p.description,

                      }).ToList()
                 .Select(x => new pmTA_ProjectCategory()
                 {
                     id = x.id,
                     title = x.title,
                     description = x.description,

                 });

        return View(charts.ToList());

但我注意到我需要使用下拉菜单过滤我的数据，所以我再次将下拉菜单添加到我的视图中。

这是我在视图和控制器中的代码，用于显示下拉列表和下拉列表中的数据。

 <div>
 @Html.DropDownList("projectcat", ViewBag.proj as SelectList, "Select...", new { 
 @class = "form-control" })
 </div>

         var data1 = from p in db.pmTA_ProjectCategory
                    select new
                    {
                        id = p.id,
                        title = p.title,
                        description = p.description
                    };

         SelectList list = new SelectList(data1, "id", "title");
         ViewBag.proj = list;

在下拉菜单中显示数据时，它会再次平稳运行。

我的问题是，我需要自动使用下拉列表过滤数据表的数据。我的意思是，当我选择下拉列表的值时，数据表必须显示数据对应于下拉列表中的选定值

我在 javascript 中创建了代码来使用下拉列表过滤数据表的数据。

这是代码：

 <script>
    $(document).ready(function () {
        var table = $("#table1").DataTable();

        $("#projectcat").change(function () {
            table.search(this.value).draw();
        });

    });
   </script>

但是我的数据表中的数据没有响应并且不起作用，当我在下拉列表中选择数据时，数据表无法过滤。

标签： javascriptc#jquerysqlasp.net-mvc

解决方案

1）你的观点应该是强类型的IEnumerable<ProjectCategory>

2) 将下拉菜单添加到您的视图中

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

3）在您的视图中添加部分IEnumerable<ProjectCategory>视图。当您添加部分视图时，将其检查为Create as a partial view.

您的部分视图的名称是_GetItem.cshtml

部分视图的内容 

<table id="table1" >
<thead>
    <tr>
        <th>id</th>
        <th>title </th>
        <th>
            description
        </th>

    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {

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

并在您的视图中将这个局部视图调用到您之前添加的下拉列表中。

<div id="myPartialView">
    @{Html.RenderPartial("_GetItem", Model);}
</div>

4）您在控制器中的操作方法是

public ActionResult Index()
{
    var charts = db.ProjectCategories.ToList();

    List<SelectListItem> dropDownItems = charts.Select(c => new SelectListItem { Text = c.title, Value = c.id.ToString() }).ToList();
    ViewBag.proj = dropDownItems;

    return View(charts);
}

5）将ajax调用添加到您更改下拉列表中的任何选项时调用的视图

<script>

    function CallChangefunc(id) {
         $.ajax({
             url: "@Url.Action("GetItem", "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.
                $("#myPartialView").html( data ); // HTML DOM replace
            }
        });
    }

</script>

6）最后，您的 ajax 调用命中了只能呈现部分视图的操作方法 

public PartialViewResult GetItem(int id)
{
    var charts = db.ProjectCategories.ToList();
    var model = charts.Where(x => x.id == id).ToList();
    return PartialView("_GetItem", model);
}

推荐阅读