C# 如何使用jquery ASP.NET在MVC中应用搜索过滤器

我想在Display.cshtml中有一个搜索过滤器，为此我使用了jquery，但它不能正常工作。可能出了什么问题？我是MVC新手。谢谢你的帮助！ 如果有任何其他方法可以应用搜索过滤器，请推荐

这是控制器。 DisplayRecordsController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using System.Configuration;
using CollectionsApp.Models;

namespace CollectionsApp.Controllers
{
    public class DisplayRecordsController : Controller
    {

        public ActionResult Display(DisplayRecords dr)
        {
        string con = ConfigurationManager.ConnectionStrings["myCon"].ConnectionString;
        SqlConnection connection = new SqlConnection(con);
        string query = "select * from collect";
        SqlCommand cmd = new SqlCommand(query);
        cmd.Connection = connection;
        connection.Open();
        SqlDataReader read = cmd.ExecuteReader();
        List<DisplayRecords> objModel = new List<DisplayRecords>();
        if(read.HasRows)
        {
            while(read.Read())
            {
                var details = new DisplayRecords();
                details.id = Convert.ToInt32(read["id"]);
                details.chNumb = read["chNumb"].ToString();
                details.name = read["name"].ToString();
                details.address = read["addres"].ToString();
                details.accNumb = read["accNumb"].ToString();
                details.amount = Convert.ToInt32(read["amount"]);
                objModel.Add(details);
            }
            dr.dataCollect = objModel;
            connection.Close();
        }
        return View("Display",dr);
    }
}
}

JQuery函数

<script>
    $(document).ready(function () {
        $("#myInput").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>

Display.cshtml

<div class="container">
    <input class="form-control" id="myInput" type="text" placeholder="Search..">
    <div style="border:groove;">
        <center>
            <div class="container" style="width:40%;border-left:groove;border-right:groove;border-bottom:groove;"><h1>Challan Records</h1></div>
            @if (Model != null)
        {
            if (Model.dataCollect.Count > 0)
            {
                    <table class="table" id="myTable">
                        <thead>
                            <tr>

                                <th>ID</th>
                                <th>Challan Number</th>
                                <th>Customer Name</th>
                                <th>Address</th>
                                <th>Account Number</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.dataCollect)
                            {

                                <tr>
                                    <td>@Html.DisplayFor(m => item.id)</td>
                                    <td>@Html.DisplayFor(m => item.chNumb)</td>
                                    <td>@Html.DisplayFor(m => item.name)</td>
                                    <td>@Html.DisplayFor(m => item.address)</td>
                                    <td>@Html.DisplayFor(m => item.accNumb)</td>
                                    <td>@Html.DisplayFor(m => item.amount)</td>
                                </tr>

                            }
                        </tbody>
                    </table>
                }
            }
        </center>
    </div>
</div>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-1.9.1.js"></script>

DisplayRecordsModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CollectionsApp.Models
{
    public class DisplayRecords
    {
        public int id { get; set; }
        public string chNumb { get; set; }
        public string name { get; set; }
        public string address { get; set; }
        public string accNumb { get; set; }
        public int amount { get; set; }

        public List<DisplayRecords> dataCollect { get; set; }

    }
}

---

您共享的代码没有进行过滤的内容。您需要查询数据并更新表。有关使用ajax的一些示例代码，请参阅本文，因为您的元素不包含文本。您需要过滤每个元素中的文本