如何使用 asp.net mvc 3 填充 jqgrid答案

【问题标题】：How to populate jqgrid using asp.net mvc 3如何使用 asp.net mvc 3 填充 jqgrid
【发布时间】：2013-10-10 14:42:03
【问题描述】：

我正在尝试使用来自我的 [HttPost] 控制器方法的数据填充 jqgrid。

我的控制器看起来像这样

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

}

我的表单如下所示：

@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");
}

jqgrid 所在的 Partial 如下所示：

@model SearchModel

<div>

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

</div>

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'
    });
});

任何有关如何执行此操作的帮助或链接都很棒。我试过在线搜索帮助，有很多不同的文章，但我似乎找不到使用 asp.net mvc 从表单数据填充 jqgrid 的文章。

谢谢，

【问题讨论】：

标签： c# jquery asp.net asp.net-mvc jqgrid

【解决方案1】：

如果你只是想在网格中显示数据，你可以使用下面的代码，但是如果你想使用添加，编辑，删除，过滤，排序等功能，这个代码是不够的，请在详情。

[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);
}

【讨论】：

【解决方案2】：

这是一个很好的链接：

Using jQuery Grid With ASP.NET MVC

我正在整理一个 MVC4 jqGrid，这对我有很大帮助。

编辑：只是为了添加更多颜色，我认为您不想在索引操作中返回网格结果。 jQgrid 将在需要加载新数据时调用您指定的 url——作为排序、搜索、刷新等的结果......如果你看一下我链接的文章，它会更详细地介绍这个.

【讨论】：

【解决方案3】：

您应该在该控制器操作中传递排序和分页参数

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

【讨论】：