如何在 MVC 中绑定 Jqgrid

Question

我正在尝试使用 JqGrid，有些示例很抱歉在这里发布，因为 sof 中有几个示例，但我没有遇到异常并且无法绑定网格。

我尝试了以下方式。

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

查看

@{
    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>

控制器

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

试试这个

因为动作参数需要默认值

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