在 Javascript 中使用 IQueryable<Model> 数据答案

【问题标题】：Using IQueryable<Model> data in Javascript在 Javascript 中使用 IQueryable<Model> 数据
【发布时间】：2013-12-26 15:35:43
【问题描述】：

我对 Javascript 非常陌生，几乎只是插播和玩这个例子，但这里是高水平的。

在我的控制器中，我将一个 Iqueryable 返回到我的视图中，然后我想从中构建一个网格。

我的 javascript 看起来像这样：

$.ig.loader({
    ready: function () {
        $("#grid1").igGrid({
            dataSource: Model,
            primaryKey: "BatchNumber",
            autoGenerateColumns: false,
            height: "350px",
            width: "800px",
            columns: [
                { headerText: "Batch Number", key: "BatchNumber", dataType: "number" },
                { headerText: "Batch Group Item Date", key: "BatchGroupItemDate", dataType: "string" },
                { headerText: "Batch Comment", key: "BatchComment", dataType: "number" },
                { headerText: "Number Of Documents", key: "NumberOfDocuments", dataType: "number" },
                { headerText: "Total Transfered", key: "TotalTransfered", dataType: "date" },
                { headerText: "Not Transfered", key: "NotTransfered", dataType: "date" },
                { headerText: "CoId", key: "CoId", dataType: "date" }
            ],

    });
    }
});

模型是 IQueryable。我也在使用基础设施网格库。当我渲染页面时，似乎什么都没有发生，并且在 Firefox 中监视 javascript 时我没有得到任何输出。我不确定从哪里开始调试这个问题，因为我的 javascript 知识非常有限。我也在运行 asp.net mvc 4。

【问题讨论】：

查看从服务器发送的源代码。包含dataSource: 的行是什么样的？
不知道为什么这被否决了。

标签： jquery asp.net-mvc iqueryable

【解决方案1】：

您需要对模型进行转义和 JSON 编码：

dataSource: @Html.Raw(Json.Encode(Model)),

【讨论】：

尝试以这种方式实现时出现语法错误。我使用以下@{ var bleh = @Html.Raw(Json.Encode(Model)); } <p>@bleh</p> 做了一个简单的打印到屏幕，它似乎打印了正确编码的 JSON
如果你在谈论你认为的 JavaScript 语法错误，请忽略它，Razor 有时是愚蠢的，这使得它出于某种原因吓坏了，至少在第 2 版中，我没有'在 Razor 3 中还没有注意到任何问题。

【解决方案2】：

似乎在模型中您有一组对象，并希望将这些对象在您的视图中呈现为 javascript。将此代码添加到您的视图中：

<script text="text/javascript">
var data = @Html.Raw(JsonConvert.SerializeObject(Model)); // converts an object to javascript object

$.ig.loader({
    ready: function () {
        $("#grid1").igGrid({
            dataSource: data, // your data
            primaryKey: "BatchNumber",
            autoGenerateColumns: false,
            height: "350px",
            width: "800px",
            columns: [
                { headerText: "Batch Number", key: "BatchNumber", dataType: "number" },
                { headerText: "Batch Group Item Date", key: "BatchGroupItemDate", dataType: "string" },
                { headerText: "Batch Comment", key: "BatchComment", dataType: "number" },
                { headerText: "Number Of Documents", key: "NumberOfDocuments", dataType: "number" },
                { headerText: "Total Transfered", key: "TotalTransfered", dataType: "date" },
                { headerText: "Not Transfered", key: "NotTransfered", dataType: "date" },
                { headerText: "CoId", key: "CoId", dataType: "date" }
            ],

    });
    }
});
</script>

确保使用 PM 控制台添加对 NewtonSoft.Json 的引用：

PM> install-package NewtonSoft.Json

如果您的 javascript 在单独的文件中，您可能希望将 js 代码包装到函数中。像这样：

（Scripts.js 文件）

function load_data(data)
{

$.ig.loader({
    ready: function () {
        $("#grid1").igGrid({
            dataSource: data, // your data
            primaryKey: "BatchNumber",
            autoGenerateColumns: false,
            height: "350px",
            width: "800px",
            columns: [
                { headerText: "Batch Number", key: "BatchNumber", dataType: "number" },
                { headerText: "Batch Group Item Date", key: "BatchGroupItemDate", dataType: "string" },
                { headerText: "Batch Comment", key: "BatchComment", dataType: "number" },
                { headerText: "Number Of Documents", key: "NumberOfDocuments", dataType: "number" },
                { headerText: "Total Transfered", key: "TotalTransfered", dataType: "date" },
                { headerText: "Not Transfered", key: "NotTransfered", dataType: "date" },
                { headerText: "CoId", key: "CoId", dataType: "date" }
            ],

    });
    }
});

}

你的 cshtml 文件：

...other html code...
<script type="text/javascript">
    var data = @Html.Raw(JsonConvert.SerializeObject(Model)); // converts an object to javascript object
    load_data(data);
</script>
</body>
</html>

【讨论】：