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

Question

我开始学习 MVC 编程已经好几天了，老实说，我还在适应 MVC 的新环境。

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

这是我在 View 和 Controller 中的代码。这部分运行得很好。

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

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

这是我在 View 和 Controller 中的代码，用于显示下拉列表和下拉列表中的数据。

 <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) 你的 View 应该是 IEnumerable<ProjectCategory> 的强类型

2) 添加下拉到你的 View

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

3) 添加IEnumerable<ProjectCategory>的部分 View 在你看来。添加局部 View 时，将其检查为 Create as a partial view .

您的局部 View 的名称是 _GetItem.cshtml

部分 View 的内容

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

并在您之前添加的下拉列表下方的 View 中调用此局部 View 。

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

4) 你在 Controller 中的 Action 方法是

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 调用添加到 View 中，当您更改下拉列表中的任何选项时调用该 View

<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 调用命中了只能呈现部分 View 的操作方法

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