mvc4 中的 Webgrid 使用 ajax 重新加载

Question

我有一个启用了分页和排序的 Web Grid。现在一切正常。我试图在网格上方添加一个搜索文本框和一个链接“GO”。我的目标是根据该文本框中的文本过滤网格。我需要申请的最佳方法是什么？如果我使用 ajax，那么我该如何加载网格。我得到的返回值为'html'

下面是代码

脚本

$("#btnGO").click(function () {

    var controlAction = '@Url.Action("Search", "User")';
    var request = $.ajax({
        url: controlAction,
        type: "POST",
        data: { SearchKeyword: $("#txtSearch").val() },
        dataType: "html"
    });

    request.done(function (msg) {
        alert(msg);
        $("#gridContent").html(msg);
    });

    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

});

控制器

[HttpPost]

    public ActionResult Search(string SearchKeyword)
    {


        Dictionary<string, string> Columns = new Dictionary<string, string>();
        Columns.Add("EMPNO", "Employee No");
        Columns.Add("FIRST_NAME", "Name");
        Columns.Add("EMAIL", "Email");
        Columns.Add("MOBILE", "Mobile");
        Columns.Add("CUR_ADDRESS", "Address");
        // Columns.Add("NATIONALITY", "Nationality");
        Common.Helper Helper = new Common.Helper();
        ViewBag.Columns = Helper.CreateGridColumn(Columns, "KEY");
        USERLIST objList = new USERLIST();
        if (SearchKeyword != null)
            objList = Bll.User.getList(SearchKeyword, 1);



        ViewBag.TotalCount = objList.TotalRecord;
        return PartialView("_Grid", objList);
    }

CSHTML

<div class="row">
    <div class="col-sm-12">
        <div class="box">
            <div class="box-title">
                <h3>
                    <i class="fa fa-table"></i>
                </h3>
                <div class="pull-left" style="padding-right:10px !important;">
                    @Html.TextBox("txtSearch","", new { Class = "form-control valid" }) @*new Dictionary<string, object>{ { "class", "form-control valid" }, { "id", "textEmpno" },{ "data-rule-required", "true" },{"type","2"}}*@

                </div>
                <div class="pull-left" style="padding-right:10px !important;"><a href="#" id="btnGO"  class="btn" rel="tooltip" title="Add">GO</a></div>
                 <div class="pull-right" style="padding-right:10px !important;"><a href="Create" onclick="edit(0);"  class="btn" rel="tooltip" title="Add"><i class="glyphicon-table"></i>Create New User</a></div>
            </div>

            @Html.Partial("_Grid", Model.UserList)
        </div>
    </div>
</div>

谢谢 线轴

Answer 1

尝试如下：

 $("#go").click(function(){

        var request = $.ajax({
           url: "url",
           type: "POST",
           data: { id : $("#txtSearch").val() },
           dataType: "html"
        });

     request.done(function( msg ) {
         $("#grid").html( msg );
     });

      request.fail(function( jqXHR ) {
         alert( "Request failed: " );
     });

  });