7

在阅读了 JQGrid 控件之后,我决定在我的一个 ASP.Net MVC 3 Web 应用程序中使用它会很好。

首先,我遵循了 Phil Haacks 教程http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx这一切都很好。然后我尝试在我的应用程序中实现类似的东西,唯一的区别是,我使用 Linq To Entities。

我的视图页面导入了所有 css 和 Jquery 类,然后我有我的 JavaScript 函数和保存数据的表

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '/Home/LinqGridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['equipmentID', 'categoryTitle', 'title'],
        colModel: [
      { name: 'equipmentID', index: 'equipmentID', width: 40, align: 'left' },
      { name: 'categoryTitle', index: 'categoryTitle', width: 40, align: 'left' },
      { name: 'title', index: 'title', width: 200, align: 'left'}],
        pager: jQuery('#pager'),
        width: 660,
        height: 'auto',
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        imgpath: '/scripts/themes/coffee/images',
        caption: 'My first grid'
    });
}); 

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

然后在我的控制器中,我有以下方法,假设返回 Json 数据

public ActionResult LinqGridData(string sidx, string sord, int page, int rows)
    {
        AssetEntities context = new AssetEntities();

        var query = from e in context.Equipments
                    select e;

        var count = query.Count();

        var result = new
        {
            total = 1,
            page = page,
            records = count,
            rows = (from e in query
                    select new
                    {
                        id = e.equipmentID,
                        cell = new string[]
                        {
                        e.equipmentID.ToString(),
                        e.Category.categoryTitle,
                        e.Department.title
                        }

                    }).ToArray()
        };

        return Json(result, JsonRequestBehavior.AllowGet);

    }

当我运行它时,代码会出现以下错误

LINQ to Entities does not recognize the method 'System.String ToString()' method

有谁知道如何解决这个错误?而且,我这样做是正确的方式,还是应该以不同于 Phil Haack 的解释的方式来做,因为他使用的是 Linq to SQL?

任何反馈将不胜感激。

谢谢各位。

4

4 回答 4

14

EF 不支持 ToString 方法,你必须检索没有 ToString 和格式的数据

这应该工作

public ActionResult LinqGridData(string sidx, string sord, int page, int rows)
{
    AssetEntities context = new AssetEntities();

    var query = from e in context.Equipments
                select e;

    var count = query.Count();

    var result = new
    {
        total = 1,
        page = page,
        records = count,
        rows = query.Select(x => new { x.equipamentID, x.Category.categoryTitle,x.Department.title })
                    .ToList() // .AsEnumerable() whatever
                    .Select(x => new { 
                        id = x.equipamentID,
                        cell = new string[] {
                            x.equipamentID.ToString(),
                            x.categoryTitle,
                            x.title
                        }})
                    .ToArray(),
    };

    return Json(result, JsonRequestBehavior.AllowGet);

}
于 2011-02-23T16:22:29.047 回答
3

查看另一个答案中的代码示例。我希望它会有所帮助。

小备注:

  1. sortname: 'Id'是错误的参数,因为您没有名为“Id”的列。可能你的意思是sortname:'equipmentID'
  2. 您应该删除已贬值imgpath: '/scripts/themes/coffee/images'的 jqGrid 参数。
  3. 您应该从 HTML 代码中删除除 id 之外的所有属性:<table id="list"></table><div id="pager"></div>
于 2011-02-23T16:09:52.667 回答
0

啊,我找到了问题。.ToString 在 LINQ to Entity 中不起作用。是的,这很奇怪,而且 IMO 非常愚蠢。但这是核心问题。至于变通方法……当 JSON 序列化事物时,无论如何,当 jQuery 开始阅读它们时,它们最终看起来非常像一个字符串。因此,本质上,您应该能够完全省略 .ToString() 并且它应该可以工作。

于 2011-02-23T15:53:12.340 回答
0

我将解决内联编辑问题并向 jqGrid 添加新行,因为它适用于 ASP.NET MVC 3 和 Razor C#。我还将包含 C# 控制器代码来填充网格并将数据保存到网格中。首先让我们看看如何使用 NuGet 包管理器在 MVC3 Web 应用程序中安装 jqGrid 4.4.1。

  1. 安装 jQuery 1.7.2 或更高版本。
  2. 安装 jQuery.UI.Combined。
  3. 安装 jqGrid 4.4.1

您可以从单独下载 jqGrid

http://www.trirand.com/blog/?page_id=6

jqGrid 文档可以在以下位置找到

http://www.trirand.com/jqgridwiki/doku.php

我不打算测试这篇文章中的代码,但它是基于可以工作的代码。我将采用蛮力方法来解决从操作方法填充 jqGrid、编辑单行或添加新的可编辑行,然后将行保存到操作方法的困难和复杂问题。我确信可以找到更优化的方法,但这是一个很好的起点。我不会向您展示如何调整 jqGrid 的外观,我将把它留给您。我将使用 JSON 作为 jqGrid 和 ASP.NET MVC 3 之间的数据交换格式。我不打算解决删除网格中一行的问题。

让我们从控制器中的 GET 操作方法开始

public JsonResult GetProduct(int productId = 0)
{
    var productsQuery = dbContext.FirstOrDefault(p => p.ProductId == productId);
    var productsList = new List<Products>();

    // SQL does not understand ToString() so we have to do this or something like it
    foreach(var p in productsQuery)
    {
        var product = new Product{
           ProductId = p.ProductId,
           Product.Name = p.Name,
           Product.Date = p.Date.ToShortDateString()
           // and so on...
        };
        productsList.Add(product);
    }

    // You must build an anonymous object that can then be converted into a 2-dimensional 
    // array formatted for jqGrid, convert it to a 2d array then Json.  Note that all grid 
    // data must be in string format.
    var jsonData = new {
        total = 1,
        page = 1,
        records = productsQuery.Count(),
        rows = productsList.Select(p => new {
            id = p.id.ToString(),
            cell = new string[] {
                p.Name,
                p.Date.ToShortDateString(),
                // and so on...
               }
            }).ToArray();
        };

       return Json(jsonData, JsonRequestBehavior.AllowGet);
}

和视图...

<script type="text/javascript">
    $(document).ready(function () {

        var lastSelectedId;
        var grid = $('#grid');
        grid.jqGrid({
            url: "@Url.Action("GetProducts", "Products")",
            datatype: 'json',
            mtype: 'post',
            colNames: ['ProductId', 'Name', 'Date',
                // and so on...
                ],
            colModel: [
                { name: 'ProductId', index: 'ProductId', editable: false },
                { name: 'Name', index: 'Name', editable: true, edittype: 'text' },
                { name: 'Date', index: 'Date', editable: true, edittype: 'text' }
                // and so on...
                ],
            onSelectRow: function(rowid) {
                if (rowid && rowid !== lastSelectedId) {
                    grid.jqGrid('resotreRow', lastSelectedId);
                    lastSelectedId = rowid;
                }
                grid.jqGrid('editRow', rowid, { keys: true });
            },
            editurl: "@Url.Action("SaveProducts", "Products");
            rownum: [10],
            rowList: [5,10,20,50],
            pager: '#grid_pager',
            sortName: 'Name',
            viewrecords: true,
            gridview: true,
            caption: 'Sample Grid'
    });
    grid.jqGrid('navGrid', '#pager', { edit: false, add: false: del: false,
         refresh: false });
    grid.jqGrid('inlineNav', '#pager', {
        addParams: {
            position: 'first',
            addRowParams: {
                keys: true,
                oneditfunc: onInlineEdit
            }
            add: true,
            edit: false,
            save: false,
            cancel: true
    });
    function onInlineEdit(rowid) {
        // add inline editing functionality here
    }             
</script>
@using (Html.BeginForm("","", FormMethod.Post, new { id = "ProductsForm" }))
{
    <table id="grid">
    </table>
    <div id="pager">
    </div>
}

然后是 POST 方法

[HttpPost]
public JsonResult SaveProduct(FormCollection frm)
{
    Product product;

    if (frm["oper"] == "add")
    {
        product = new Product();
    }
    else
    {
        int productId = Int32.Parse(frm["id"]);
        product = dbContext.Products.FirstOrDefault(p => p.ProductId == productId);
    }

    foreach (var key in frmAllKeys)
    {
        switch(key)
        {
            case "Name":
                product.Name = frm[key];
                break;
            case "Date":
                product.Date = DateTime.Parse(frm[key]);
                break;
            // and so on...
        }
    }

    try
    {
        if (frm["oper"] == "add")
        {
            dbContext.AddObject(product);
        }
        dbContext.SaveChanges();
    }
    catch (Exception ex)
    {
        Debug.WriteLine(exception.StackTrace);
        return Json(false);
    }
    return Json(true);
}

有更好的方法可以做到这一点,但这是一个好的开始。我不是在解决动态网格问题。我不确定如何做到这一点。可以说动态 jqGrid 需要更多的 JavaScript 和/或 C# 代码。我将看一下 jqGrid 中的“网格中的网格”功能,用于将静态网格与动态网格相结合。

我确实尝试构建可以接受对象类型、记录列表并为网格生成 jqGrid 数组和 Json 数据的功能,而无需执行上面显示的所有额外工作。我认为这可以通过反思来完成,但我现在没有时间去做。

最后,我还尝试构建从 FormCollection 中提取数据并仅在给定对象类型和 FormCollection 的情况下填充对象的功能。同样,我认为这可以使用反射来完成,但我现在没有时间去做。如果有人想尝试构建 MVC3 C# jqGrid Json 生成器和提取器,我建议您将 Entity Framework Code First 方法与 POCO 类一起用于您的模型。对于此类任务,POCO 类比实体对象更容易使用。

我希望这有帮助 :)

于 2012-10-31T20:11:04.627 回答