Question

我对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。我也在使用infragistics网格库。当我渲染页面时似乎没有发生任何事情，并且在监视firefox中的javascript时我没有输出。我不知道从哪里开始调试这个问题，因为我的javascript知识非常有限。我也在运行asp.net mvc 4。

Answer 1

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

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

Answer 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>

在Javascript </model>中使用IQueryable <model>数据

2 个答案: