如何将 SignalR 连接脚本移动到 Kendo UI MVC 网格上的页面底部

Question

我在视图上有一个 kendo 网格，信号器连接到后端。它目前工作正常，但是，我想用剃刀 @section 块将脚本标记移动到生成页面的底部。

<script>

var dataCollectionHub;
var hubStart;
$(function () {
    dataCollectionHub = $.connection.dataCollectionHub;
    hubStart = $.connection.hub.start();
});

</script>



 @(Html.Kendo().Grid<ViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                 columns.Bound(p => p.Name);
            })
            .DataSource(
                dataSource => dataSource
                .SignalR()
                .AutoSync(true)
                .Transport(tr => tr
                    .Promise("hubStart")
                    .Hub("dataCollectionHub")
                    .Client(c => c
                        .Read("read")
                        .Create("create")
                        .Update("update")
                        .Destroy("destroy")
                        )
                    .Server(s => s.Read("read")))
                .Schema(schema => schema
                    .Model(model =>
                    {
                        model.Id("Id");
                        model.Field("Id", typeof(int)).Editable(false);
                        model.Field("Name", typeof(string)).Editable(false); 
                    })
                )
            )
)

问题是网格要求在其自身之前定义变量，因为我收到以下错误：

Uncaught Error: The "promise" option must be set.
at new init (http://localhost:61683/Scripts/kendo/kendo.all.min.js:31:9317)
at Object.oe.create (http://localhost:61683/Scripts/kendo/kendo.all.min.js:28:13869)
at new init (http://localhost:61683/Scripts/kendo/kendo.all.min.js:27:22769)
at Function.ie.create (http://localhost:61683/Scripts/kendo/kendo.all.min.js:28:14660)
at init._dataSource (http://localhost:61683/Scripts/kendo/kendo.all.min.js:53:11752)
at new init (http://localhost:61683/Scripts/kendo/kendo.all.min.js:51:10176)
at HTMLDivElement.<anonymous> (http://localhost:61683/Scripts/kendo/kendo.all.min.js:26:4691)
at Function.each (http://localhost:61683/Scripts/jquery-1.12.3.js:370:19)
at jQuery.fn.init.each (http://localhost:61683/Scripts/jquery-1.12.3.js:137:17)
at jQuery.fn.init.e.fn.(anonymous function) [as kendoGrid] (http://localhost:61683/Scripts/kendo/kendo.all.min.js:26:4668)

有什么方法可以将脚本标签移动到网格底部而不破坏它吗？

Answer 1

您可能正在寻找 Kendo UI 的 Deferring-特征。通常，脚本会立即生成，所有变量和 JavaScript 方法必须在初始化期间存在。

更新您的脚本：

@(Html.Kendo().Grid<ViewModel>()
    .Name("grid")
    .Deferred() // Add this to your script
    .....

然后将您的脚本移动到页面底部，紧接着，输入以下行：

@Html.Kendo().DeferredScripts();

请注意延迟初始化可能有一些缺点。当您访问 JavaScript 中的小部件时，您可能运行遇到一些计时问题，它们现在将稍后初始化，您可能还会注意到一些 FOUC 效果。

如何将 SignalR 连接脚本移动到 Kendo UI MVC 网格上的页面底部

How to move SignalR connection scripts to the bottom of the page on Kendo UI MVC grid

asp.net-mvc

kendo-ui

signalr

kendo-ui-grid