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

Question

自从我开始学习 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>

但我的数据表中的数据没有响应且无法正常工作，当我在下拉列表中选择数据时，数据表无法过滤。

Answer 1

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

Answer 2

当前状态：

• 您已创建下拉列表id='projectcat'
• 数据表 $("#table1") 未响应更改事件

解决方案：

• 您的代码看起来正确，没有任何问题。
• 在下面运行相同类型的示例工作正常
• 确保没有其他 javascript 错误阻止此代码
• 在$("#projectcat").change(function () { debugger; }); 中应用debugger 以调试开发人员工具栏中的代码

检查下面的例子，改变下拉值它也过滤数据表：

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

    $("#projectcat").change(function () {
        console.log('Groing for folter : ' + this.value);
        table.search(this.value).draw();
    });

});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />


<p>Change datatable filter value : </p>
<select id="projectcat">
    <option>Rhona</option>
    <option>Colleen</option>
    <option>Jena</option>
    <option>Tiger</option>
</select>

<hr />
<table id="table1" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>Tiger Kennedy</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>Rhona Kennedy</td>
            <td>$12,900</td>
        </tr>
    </tbody>
</table>