如何在MVC中绑定Jqgrid

Question

我正在尝试使用JqGrid，有一些样本很抱歉在这里发布，因为几个例子都在软件中，但我没有得到异常，无法绑定网格。

我尝试了如下方法

JS文件

$(function () {
    $("#grid").jqGrid({
        url: "/ToDoListTest/GridData",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['Id', 'Task Name', 'Task Description', 'Severity', 'Task Status'],
        colModel: [
            { key: true, hidden: true, name: 'Id', index: 'Id', editable: true },
            { key: false, name: 'TaskName', index: 'TaskName', editable: true },
            { key: false, name: 'TaskDescription', index: 'TaskDescription', editable: true },
           // { key: false, name: 'TargetDate', index: 'TargetDate', editable: true, formatter: 'date', formatoptions: { newformat: 'd/m/Y' } },
            { key: false, name: 'Severity', index: 'Severity', editable: true, edittype: 'select', editoptions: { value: { 'L': 'Low', 'M': 'Medium', 'H': 'High' } } },
            { key: false, name: 'TaskStatus', index: 'TaskStatus', editable: true, edittype: 'select', editoptions: { value: { 'A': 'Active', 'I': 'InActive' } } }],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Todo List',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
       multiselect: false
    });
});

<<p> 视图/strong>

@{
    ViewBag.Title = "Todo List";
}
    <h2>Todo List</h2>
    <div>
        <table id="grid"></table>
        <div id="pager"></div>
    </div>    
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.0.min.js"></script>
    <script src="~/Scripts/i18n/grid.locale-en.js"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js"></script>
    <script src="~/Scripts/TodoList.js"></script>

Controlelr

using JQGridSampleTest.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace JQGridSampleTest.Controllers
{
    public class ToDoListTestController : Controller
    {
          List<TodoList> lstBond = new List<TodoList> { new TodoList{ Id=1,TaskName="987654321",TaskDescription="155 The Terrace,Weelington 6011,Newzeland",Severity="NZD,1000",TaskStatus="open"},
                                              new TodoList{ Id=1,TaskName="987654321",TaskDescription="155 The Terrace,Weelington 6011,Newzeland",Severity="NZD,1000",TaskStatus="open"},
                };
        // GET: ToDoListTest
        public JsonResult Index()
        {

            return Json(lstBond, JsonRequestBehavior.AllowGet);

        }
public ActionResult GridData(string sidx, string sord, int page, int rows) {
  var jsonData = new {
    total = 1, // we'll implement later 
    page = page,
    records = 3, // implement later 
    rows = new[]{
      lstBond
    }
  };
  return Json(jsonData, JsonRequestBehavior.AllowGet);
}

当我执行应用程序时，我得到的输出像下面这样，而不是网格。

[{"Id":1,"TaskName":"987654321","TaskDescription":"155 The Terrace,Weelington 6011,Newzeland","Severity":"NZD,1000","TaskStatus":"open"},{"Id":1,"TaskName":"987654321","TaskDescription":"155 The Terrace,Weelington 6011,Newzeland","Severity":"NZD,1000","TaskStatus":"open"}]

我怀疑可能是GridData控制器中的方法未触发，是否可以对此提供任何帮助以纠正此问题。提前感谢

Answer 1

try this

因为操作参数

需要默认值

public ActionResult GridData(string sidx="", string sord ="", int page=0, int rows = 0) {
  var jsonData = new {
    total = 1, // we'll implement later 
    page = page,
    records = 3, // implement later 
    rows = new[]{
      lstBond
    }
  };
  return Json(jsonData, JsonRequestBehavior.AllowGet);
}