ASP.NET MVC 3 jqGrid：网格在浏览器中呈现 json 数据

Question

我在 ASP.net MVC 3 中渲染 jqGrid 时遇到问题。 ProductInfo 操作的职责是显示产品列表以及其他最新产品信息（在 ProductInfo 视图中）。当用户单击任何产品链接时，ProductModelList 操作会获取所选产品的所有模型列表并将其传递给写入所有 jqGrid 代码的 ProductModelList 视图。但它在浏览器中呈现行 json 数据，如下所示

{"total":null,"page":null,"records":9,"rows":[{"id":4,"cell":["3","Hyundai Accent"]}, {"id":5,"cell":["3","现代 Santro"]},{"id":6,"cell":["3","现代圣达菲"]},{"id ":7,"cell":["3","现代 i10"]},{"id":8,"cell":["3","现代 i20"]},{"id":9, "cell":["3","现代途胜"]},{"id":10,"cell":["3","现代 Verna Fluidic"]},{"id":11,"cell" :["3","现代 EON"]},{"id":12,"cell":["3","新现代奏鸣曲"]}]}

以下是控制器和视图：

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>

请指导我？

谢谢，

保罗

Answer 1

来自 JSON 数据的 'id' 将用于分配网格行的 id 属性（<tr> 元素的 id）。页面上的 ID必须是唯一的。您当前的所有数据都包含相同的 id (id=3)。

我建议您下载一些工作示例（参见the answer 或this one）并根据您的要求进行修改。