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

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

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

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.

edited May 23 '17 at 10:34

Community

1
1

answered Apr 23 '12 at 18:30

Oleg

220,925
34
403
798

Oleg, thanks for your reply. I could find out the problem. I have [product] controller and two actions [productlist] and [models] within the product controller. [ProductList] Action displays list of product in ProductListView. In ProductListView when any product link is being clicked it call [models] action of [product] controller. In [modelsview] load all jqGrid code is written. I think as i am redirecting it show row json data in browser. if i do whole the thing in one view it work fine? Please guide me while redirecting from one view to another how in 2nd we can populate a jqGrid? – Paul Apr 24 '12 at 18:47
@Paul: If I understand you correct you should open the View which you posted in the text of your question. The vies should contains empty `` and the pager `
`. Additionally on the view should be loaded JavaScript which convert the `
` and the `
` to grid and fill it with JSON data returned by '@Url.Action("Models")'. I am not sure, but probably it would be better to have *one* page with two grids: one with products and another with product details. To tell the truth I don't understand exactly what you want to do, but all it sounds not like the main question which you asked
– Oleg Apr 24 '12 at 19:10

Oleg, suppose i have two View(ProductInfo,ProductModelList) and both are belonged to one controller Product. ProductInfo view contains product list along with other latest news of product. If user click any product(hyperlink) i want to redirect user to ProductModelList view to show all the model of that product. I cannot club these two view in one because both view contain other valuable information apart from listing(some of them are static). I have written all codes to fetch modellist as per productid in ProductModelList action of product controller. I have used RAZOR as view engine. – Paul Apr 25 '12 at 02:29

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

1 Answers1