如何JSON数据加载到SlickGrid剃刀MVC-4 [英] How to load JSON data into SlickGrid with Razor MVC-4

问题描述

我是新来的jQuery，华而不实的网格和剃刀。我已经通过SlickGrid例子走了，我能够静态数据加载到SlickGrid。现在我想从MSSQL JSON数据加载到我SlickGrid。我见过几个例子在网上，但是我相信我缺少这些例子后话不提。

I am new to jquery, slick grid and razor. I have gone through SlickGrid examples and am able to load static data into a SlickGrid. Now I am trying to load JSON data from MSSQL into my SlickGrid. I have seen a few examples online, but I believe I am missing something not mentioned in those examples.

下面是我的代码。

SlickGridProducts.js
变种网格;

SlickGridProducts.js var grid;

var columns = [
    { id: "ProductID", name: "ProductID", field: "ProductID", width: 50 },
    { id: "ItemDesc", name: "ItemDesc", field: "ItemDesc", width: 200 },
    { id: "DivName", name: "DivName", field: "DivName", width: 50 },
    { id: "DeptDesc", name: "DeptDesc", field: "DeptDesc", width: 75 },
    { id: "ClassDesc", name: "ClassDesc", field: "ClassDesc", width: 100 },
    { id: "SubClassDesc", name: "SubClassDesc", field: "SubClassDesc", width: 100 }
];
var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: false
};

$(function () {

    var slickdata = [];
    $.getJSON("/Products/GetSlickGridData", function (items) {
        for (var i = 0; i < items.length; i++) {
            slickdata[i] = {
                ProductID: items[i].ProductID,
                ItemDesc: items[i].ItemDesc,
                DivName: items[i].DivName,
                DeptDesc: items[i].DeptDesc,
                ClassDesc: items[i].ClassDesc,
                SubClassDesc: items[i].SubClassDesc
            };
        }
    });

    grid = new Slick.Grid("#myGrid", slickdata, columns, options);
    grid.setSelectionModel(new Slick.RowSelectionModel());

    grid.setActiveCell(0, 0);
})

产品/ Index.cshtml

Products/Index.cshtml

@model IEnumerable<JQGrid.Models.Product>

@{
    ViewBag.Title = "Index";
}

<link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.event.drag.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGrid/slick.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGrid/slick.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGridProducts.js")" type="text/javascript"></script>

<h2>Index</h2>

<div id="myGrid" style="width:800px;height:300px;"></div>

ProductsController.cs

ProductsController.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JQGrid.Models;

namespace JQGrid.Controllers
{
    public class ProductsController : Controller
    {
        private ProductPickerEntities db = new ProductPickerEntities();

        //
        // GET: /Products/

        public ActionResult Index()
        {
            return View(db.Products.ToList());
        }

...

        public JsonResult GetSlickGridData()
        {
            var slickGridData = db.Products.ToList();
            return Json(slickGridData, JsonRequestBehavior.AllowGet);
        }
    }
}

如果我加的断点JsonResult GetSlickGridData（），并观看slickGridData，我看到它填充了所有我想在我的slickgrid的项目。

If I add a breakpoint in JsonResult GetSlickGridData() and watch slickGridData, I see that it is populated with all the items I want in my slickgrid.

通过这一切我得到的是一个空白框我光滑的网格。我想这个问题是在我的js我在哪里灌装slickdata，但不知道要解决什么。

With this all I get is a blank white box for my slick grid. I figure the problem is in my js where I am filling slickdata, but not sure what to fix.

的 的** * 的* 修订 * 的****

**** Revision *****

我发现之一我的问题，但slickgrid仍是空白。我的问题是JSON结果返回太大。所以，我修改了ProductsController.cs代码现在说

I found one of my issues, but the slickgrid is still blank. My issue was the json result being returned was too large. So I modified my ProductsController.cs code for right now to say

public JsonResult GetSlickGridData()
{
    var slickGridData = db.Products.ToList();
    var jsonResult = Json(slickGridData, JsonRequestBehavior.AllowGet);
    jsonResult.MaxJsonLength = int.MaxValue;
    return jsonResult;
}

这解决了最大长度错误，虽然我还以为这是在MVC-4解析

This resolves the maxlength error although I had thought this was resolved in MVC-4.

推荐答案

你检查错误的浏览器控制台？

Did you check the browser console for errors?

这篇关于如何JSON数据加载到SlickGrid剃刀MVC-4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！