如何将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的延期特征。通常，脚本是立即生成的，所有变量和JavaScript方法必须在初始化期间存在。

更新您的脚本：

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

然后将您的脚本移至页面底部，然后将行放置为：

@Html.Kendo().DeferredScripts();

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