ASP.NET MVC 3 jqGrid : grid renders json data in browser - json

Question

I have problem with rendering jqGrid in ASP.net MVC 3.
Responsibility of ProductInfo action is to display list of product along with other latest product information (in ProductInfo view). When user click on any product link, ProductModelList action fetch all modellist of selected product & pass it to ProductModelList view where all jqGrid codes is written. But It renders row json data in browser as given bellow
{"total":null,"page":null,"records":9,"rows":[{"id":4,"cell":["3","Hyundai Accent"]},{"id":5,"cell":["3","Hyundai Santro"]},{"id":6,"cell":["3","Hyundai Santa Fe"]},{"id":7,"cell":["3","Hyundai i10"]},{"id":8,"cell":["3","Hyundai i20"]},{"id":9,"cell":["3","Hyundai Tucson"]},{"id":10,"cell":["3","Hyundai Verna Fluidic"]},{"id":11,"cell":["3","Hyundai EON"]},{"id":12,"cell":["3","New Hyundai Sonata"]}]}
following are controller and view:
public class Product : Controller
{
**//used to view product list**
public ActionResult ProductInfo()
{
ViewBag.ModelNameList = ModelRepository.GetModelName();
ViewBag.ModelVersionNameList = ModelVersionRepository.GetModelVersionName();
return View(new NewCarSearchContainer());
}
**//used to view modellist using jgGrid**
public JsonResult ProductModelList(int brandId, string sidx, string sord, int? page, int? rows)
{
var result = new
{
total = (ModelRepository.GetModelByBrandId(brandId).Count() + rows - 1) / rows,
page = page,
records = ModelRepository.GetModelByBrandId(brandId).Count(),
rows = (from model in ModelRepository.GetModelByBrandId(brandId)
select new
{
id = model.ModelId,
cell = new string[] { model.BrandId.ToString(), model.ModelName }
}).ToList()
};
return Json(result, JsonRequestBehavior.AllowGet);
}
}
ProductModelList View:
=====================
<table id="jqgProducts">
</table>
<div id="jqgpProducts">
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#jqgProducts').jqGrid({
//url from wich data should be requested
url: '/Product/ProductModelList',
//type of data
datatype: 'json',
//url access method type
mtype: 'GET',
//columns names
colNames: ['id', 'ModelId', 'BrandName'],
//columns model
colModel: [
{ name: 'id', index: 'id', width: 40, align: 'left' },
{ name: 'ModelId', index: 'ModelId', width: 40, align: 'left' },
{ name: 'BrandName', index: 'BrandName', width: 40, align: 'left' },
],
//pager for grid
pager: $('#jqgpProducts'),
//number of rows per page
rowNum: 10,
//initial sorting column
sortname: 'ModelId',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: '100%'
});
});
</script>
Please guide me?
Thanks,
Paul

Answer 1

The 'id' from the JSON data will be used to assign id attribute of the rows of the grid (id of <tr> elements). The ids must be unique on the page. All your current data contains the same id (id=3).
I would recommend you to download some working example (see the answer or this one) and modify it corresponds to your requirements.