Webgrid in mvc4 reload with ajax

Question

I have a Web Grid with paging and sorting enabled. Right now all are working fine. I tried to add a search text box and a link "GO" just above the grid. My aim is to filter the grid according to the text in that Textbox. What is the best method i need to apply for this? If i go for an ajax, then how can i load the grid. I'm getting the return value as 'html'

Below is the code

Script

$("#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);
    });

});

Controller

[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>

Thanks Bobbin

Show some code of what you have tried. – tokyovariable Apr 29 '14 at 08:01 — tokyovariable, Apr 29 '14 at 08:01

HarisJayadev · Answer 1 · 2014-04-29T09:06:38.990

0

Try like below :

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

  });

edited Apr 29 '14 at 09:06

answered Apr 29 '14 at 07:57

HarisJayadev

92
12

Hi i tried your code, but i'm getting this error "Request failed : Error" – Bobbin Paulose Apr 29 '14 at 08:15
I checked the URL [url: '@Url.Action("Search", "User")'], Its triggering the correct action. I checked with a break-point. And I'm getting the "SearchKeyword" in that action. And also my DAL is passing the correct dataset to model. – Bobbin Paulose Apr 29 '14 at 09:57

Webgrid in mvc4 reload with ajax

1 Answers1