用Ajax在MVC4中重新加载Webgrid

Question

我有一个启用分页和排序的Web网格。 现在，一切正常。 我试图在网格上方添加一个搜索文本框和一个链接“ 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);
    }

网页HTML

<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: " );
     });

  });