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

Question

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

这是控制器。显示记录控制器.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>

显示.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; }

    }
}

标签： c#jqueryasp.net-mvc