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

这是一个很好的示例/教程如何在ASP.NET MVC中使用Ajax

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

您可以在输入元素上侦听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/Index action方法。当action方法返回响应时，我们更新DOM

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

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

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

return View(SearchList);

Answer 3

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

实时搜索MVC

3 个答案: