实时搜索 MVC

Question

我正在寻找 ASP.NET 和实体框架的实时搜索。我对它有点不满。我读到它需要使用 ajax，但我以前从未使用过它，也无法获得好的示例。这是一段代码，cshtml（文本框的一部分）

    <div class="form-horizontal">
        <hr />
        <h4>Search for a client: </h4>

        <div class="input-group">
            <span class="input-group-addon" id="Name">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </span>
            @Html.TextBox("Name", "", new { @class = "form-control", placeholder = "Name" })
        </div>
        <div><h6></h6></div>
        <div class="input-group">
            <span class="input-group-addon" id="Surname">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </span>
            @Html.TextBox("Surname", "", new { @class = "form-control", placeholder = "Surname" })
        </div>
        <div><h6></h6></div>
        <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#infoModal">Search</button>
    </div>

这是控制器的一部分：

    public ActionResult Index(string Name, string Surname)
    {
        var SearchList = from m in db.Klienci
                         select m;
        if (!String.IsNullOrEmpty(Name))
        {
            SearchList = SearchList.Where(s => s.Name.Contains(Name));
        }
        if (!String.IsNullOrEmpty(Surname))
        {
            SearchList = SearchList.Where(s => s.Nazwisko.Contains(Surname));
        }
        return View(SearchList);
    }

所以它会按姓名和姓氏搜索我的客户，但是当它失去焦点或单击按钮后会刷新整个页面。如何解决它，以获得实时搜索？每次击键搜索数据库后？我有点绿，你能帮帮我吗？

Answer 1

这里是一个很好的例子/教程如何使用 Ajax 和 ASP.NET MVC

http://www.itorian.com/2013/02/jquery-ajax-get-and-post-calls-to.html

编辑：2016-07-20

例子：

 $(function () {
        $("searchField").keyup(function () {
            $.ajax({
                type: "POST",
                url: "/Controller/Action",
                data: data,
                datatype: "html",
                success: function (data) {
                    $('#result').html(data);
                }
            });
        });

Answer 2

你必须访问服务器才能从服务器获取数据，没有 ajax 是不可能的。现在的问题是如何进行 ajax 调用，您可以使用 jQuery js lib 来做，但我建议您尝试使用 angular，因为 angular 中的数据绑定将满足您的需求。 看看下面的链接 Angular Ajax Service - jQuery Ajax

Answer 3

您可以在输入元素上监听keyup 事件，读取值并使用ajax 将其发送到服务器。返回结果并在 ajax 调用的成功回调中，用结果更新 ui。

$(function() {

    $("#Name,#SurName").keyup(function(e) {
            var n = $("#Name").val();
            var sn = $("#SurName").val();
            $.get("/Home/Index?Name="+n+"&SurName="+sn,function(r){
               //update ui with results
               $("#resultsTable").html(r);
            });

    });

});

代码基本上是监听两个输入文本框的key up事件并读取值并使用jquery get方法异步发送到/Home/Indexaction方法。当action方法返回响应时，我们更新DOM。

假设resultsTable 是我们列出结果的表的 ID。

另外，由于您返回的是部分视图结果（没有布局标题），您应该使用return PartialView() 而不是return View()

if(Request.IsAjaxRequest())
    return PartialView(SearchList);

return View(SearchList);