在 Kendo Scheduler 中使用局部视图答案

【问题标题】：Use partial View in Kendo Scheduler在 Kendo Scheduler 中使用局部视图
【发布时间】：2014-12-11 07:06:45
【问题描述】：

我想使用局部视图作为 Kendo Scheduler 的自定义编辑器。

我知道我们可以使用 HTML 代码作为自定义编辑器模板的字符串。

为了将局部视图用作自定义编辑器模板，我正在尝试类似的方法：：

.Editable(x=>x.Template(@Html.Partial('PartialViewEditor')))

但这是不可接受的。如何使用我的局部视图作为剑道编辑器模板？提前致谢。

【问题讨论】：

标签： asp.net-mvc kendo-ui kendo-scheduler

【解决方案1】：

我找到了一种在 Kendo Scheduler 中使用局部视图的替代方法。您可以使用.Editable(x=>x.Template("#= getCustomTemplate() #")，但这将使用 Kendo Scheduler Editor 的默认绑定模板。

但我想对所有绑定使用我自己的局部视图。所以我决定通过以下步骤来实现它：\

步骤 1) 使用 Kendo 调度器的 Edit Event as::

 .Events(e =>
              {
                   e.Edit("EventScheduler_edit");
              })

步骤 2) 您可以使用 Javascript 的 e.preventDefault(); 限制调度程序事件编辑的默认功能然后您可以发出自己的ajax请求以从服务器端获取强类型部分视图：：

 function EventScheduler_edit(e) {
        //Prevent to Popup scheduler Editor 
        e.preventDefault();
        //And open custom editor instead
        kendo.ui.progress($("#loading1"), true);
        $.ajax({
            type: 'POST',
            url: rootUrl("Calendar/GetPartialViewForEventEditor"),
            data: {EventID:e.event.EventID},
            success: function (response) {
                $("#EventEditorWindow").empty();
                $("#EventEditorWindow").html(response);

                $popup1 = $("#EventEditorWindow");
                var wnd1 = $popup1.kendoWindow({
                    actions: ["Close"],
                    modal: true,
                    resizable: false,
                    animation: false
                }).data('kendoWindow').center().open();

                var tmp = $popup1.data("kendoWindow");
                tmp.title("Event window");
                //EventScheduler_edit
                $("#EventEditorWindow").find("#Start").data('kendoDateTimePicker').value(e.event.start);
                $("#EventEditorWindow").find("#End").data('kendoDateTimePicker').value(e.event.end);
                kendo.ui.progress($("#loading1"), false);
            }
        });
    };

就是这样！！！

【讨论】：

【解决方案2】：

试试这个：

.Editable(x=>x.Template("#= getCustomTemplate() #")


<script> 
function getCustomTemplate() 
{
    var html = ''; //design your HTML here and treat this script like your partial view

    return html;
} 
</script>

【讨论】：

通过使用它，我可以通过从服务器端渲染来提供部分视图。但在这种情况下，编辑器弹出窗口也应仅在 AJAX 发布成功后打开。