CODEWITHSUNDEEP
c#jqueryasp.netasp.net-mvcjqgrid
haydnD
haydnD

Reputation: 2293

How to populate jqgrid using asp.net mvc 3

I'm trying to populate a jqgrid using data from my [HttPost] controller method.

my controllers look like this

Public ActionResult Index()
{
   SearchModel sm = new SearchModel();
   // gets specific data from sm here
   return View(sm);
}

[HttpPost]
Public ActionResult Index(SearchModel sm)
{
   // does some stuff with the entered data from the form to return search results
   // not sure what exactly to do here....

}

My form looks like this:

@model SearchModel

@{
   //layout stuff and other script links are here
}

{Html.EnableClientValidation();}
@using (Html.BeginForm("Index", "Page",
                 FormMethod.Post, new { id = "search-form" }))
{

   //I have the form and post data here

}

@if (Model.SearchRecords != null)
{
    Html.RenderPartial("SearchRecordsPartial");
}

My Partial where the jqgrid is looks like this:

@model SearchModel

<div>

    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>

</div>

The jquery:

$(function () {
    $("#list").jqGrid({
        url: '/Page/Index/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Id', 'Votes', 'Title'],
        colModel: [
                  { name: 'Id', index: 'Id', width: 40, align: 'left' },
                  { name: 'Votes', index: 'Votes', width: 40, align: 'left' },
                  { name: 'Title', index: 'Title', width: 400, align: 'left'}],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: '/content/themes/ui-lightness/images',
        caption: 'Appeal Case Records'
    });
});

Any help or links to how to do this would be awesome. I've tried searching online for helps and there is a lot of different articles but I can't seem to find one that uses asp.net mvc with populating a jqgrid from form data.

Thanks,

Upvotes: 3

Views: 7990

Answers (3)

Mervin
Mervin

Reputation: 1

You should pass the sorting and paging parameters in that controller action 

[HttpPost]
public ActionResult ListCustomer(string sidx, string sord, int page, int rows)
{
  // return the json data
}

Upvotes: 0

Keith
Keith

Reputation: 706

Here's a good link:

Using jQuery Grid With ASP.NET MVC

I'm putting together an MVC4 jqGrid, and this helped me out quite a bit.

EDIT: Just to add a bit more color, I don't think you want to return your grid results in your Index action. jQgrid is going to call the url you specify whenever it needs to load new data - as a result of sorting, searching, refreshing, etc... If you take a look at the article I linked, it goes into this in some more detail.

Upvotes: 2

Dnyaneshwar Supe
Dnyaneshwar Supe

Reputation: 141

If you just want to show data in grid, you can use below code, but if you want to use the functionality like add, edit, delete, filter, sort,etc this code is not enough, please specify the requirments in details.

[HttpPost]
Public ActionResult Index(SearchModel sm)
{
        List<Object> returnData = new List<Object>();
        returnData.Add(new { id = 1, cell = new string[] {"Id1","Votes1","Title1"} });
        returnData.Add(new { id = 2, cell = new string[] {"Id2","Votes2","Title2"} });
        returnData.Add(new { id = 3, cell = new string[] {"Id3","Votes3","Title3"} });
        var result = new { total = 1, page = 1, records = 3, rows = returnData };
        return Json(result, JsonRequestBehavior.AllowGet);
}

Upvotes: 0

Related Questions