实时搜索 MVC

Question

我正在寻找 ASP.NET 和 entity framework 的实时搜索。我对它有点陌生。我读到它需要使用 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

这很好 example/tutorial 如何使用 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 将其发送到服务器。 Return 结果并在 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);
            });

    });

});

代码基本上监听两个输入文本框上的按键事件并读取值并使用 jquery 获取方法 asynchronously.When 操作方法发送到 /Home/Index 操作方法returns 响应，我们更新 DOM。

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

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

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

return View(SearchList);

实时搜索 MVC

Live search MVC

asp.net-mvc

entity-framework

asp.net-ajax

razor