在Kendo调度程序自定义模板中绑定DropDownList（ASP.NET MVC包装版本）

Question

我正在使用ASP。NET MVC剑道UI包装器，我正在尝试在一个自定义模板（x-Kendo-template）中绑定几个下拉列表。我不知道如何使用ASP。NET MVC包装器（这类似于这个问题：如何使用调度程序将DropDownList绑定到编辑器模板内的数据源？）。

有一些使用Kendo Web版本的例子，但没有完整的例子显示使用自定义弹出编辑器和包含从URL（json数据）提取数据的下拉列表的调度程序。

是否有一个端到端的示例？我可以用数据加载调度程序。问题在于自定义模板和dropdownlist绑定。

编辑：

经过广泛的搜索，我偶然发现了一个“入门”页面，来自Telerik，关于在ASP. NET MVC中使用Kendo UI调度器。他们（Telerik）真的需要在Demos到Documsion到API和示例之间做更好的交叉链接（下面是示例）

我还创建了一篇博客文章，它为调度器包装了所有内容（从数据库表到视图），您可以在这里看到。剑道用户界面调度与ASP。NET MVC和Peta Poco

该示例说明了演示和文档没有说明的一些内容，例如，他们在其联机示例中使用的ViewModel：

C#查看模型

public class Projection : ISchedulerEvent
{
    public string Title { get; set; }
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
    public string Description { get; set; }
    public bool IsAllDay { get; set; }
    public string Recurrence { get; set; }
    public string RecurrenceRule { get; set; }
    public string RecurrenceException { get; set; }

    // Custom Field
    public int EventId { get; set; }
    public int CustomerId { get; set; }
}

用于计划程序的ViewModel必须从IsSchedulerEvent类继承，否则将无法正常工作。

剃刀视图

Razor视图非常直观，尽管您遇到的大多数演示都会显示通过服务器端（从控制器）传递的数据。在这里，我通过Ajax方法（创建、读取、更新、销毁）来实现这一点。

@(Html.Kendo().Scheduler<KendoUISchedulerDemo.Models.Projection>()
    .Name("scheduler")
    .Date(DateTime.Today)
    .Height(600)
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.EventId);
            m.Field(f => f.Title);
            m.Field(f => f.CustomerId);
            m.Field(f => f.Description);
            m.RecurrenceId(f => f.Recurrence);
        })
        .Read("Read", "Shared", new { Area = "Events" })
        .Create("Create", "Shared", new { Area = "Events" })
        .Destroy("Destroy", "Shared", new { Area = "Events" })
        .Update("Update", "Shared", new { Area = "Events" })
)
.Events( events =>
    {
        events.Add("ABC.events.SchedulerAdd");
    })
.Editable(edit =>
{
    edit.TemplateId("schedulerTemplate");
})
)

将数据源与上面的ajax调用结合使用的要点是，它允许我们将方法放在一个单独的控制器中，这样我们就可以保持显示视图的控制器干净。

Razor视图-剑道模板（用于事件的弹出编辑器）

这是x-kendo-template的脚本块，在kendo Scheduler中创建和编辑事件时，该脚本块将覆盖默认弹出窗口。这个脚本几乎是狂野的西部，你可以在其中做任何你想做的事情，它默认与剑道MVVM模型绑定。尽管如此，还是有点保留，因为没有一种文档化的方法“扩展”ViewModel，以正确地从ASP中的自定义下拉列表中放置数据源。NET MVC计划程序的包装（版本）。（这也使用了Twitter引导）

<script type="text/x-kendo-template" id="schedulerTemplate">
<div class="form-group">
    <div class="col-md-5">
        @Html.Label("title", "Title", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <input class="k-textbox" data-bind="value: title" />
        </div>
    </div>
</div>
<div class="form-group mTop10">
    @Html.Label("CustomerId", "Customer", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <input id="CustomerId" class="w450" />
    </div>
</div>
<div class="form-group mTop10">
    <div class="left col-md-5">
        @Html.Label("start", "Start", new { @class = "col-md-2 control-label left" })
        <div class="col-md-10">
            <input name="start" type="text" required  data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" />
            <input name="start" type="text" required  data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" /> 
        </div>
    </div>
    <div class="left col-md-5">
        @Html.Label("end", "End", new { @class = "col-md-2 control-label left" })
        <div class="col-md-10">
            <input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end ,invisible:isAllDay" />    
            <input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end ,visible:isAllDay" />
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="form-group mTop10">
    @Html.Label("isAllDay", "All Day", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
    </div>
</div>
</script>

JsonResults（在控制器中）

下面是CRUDJSON结果。本例中的Create、Update和Destroy JsonResults已被修剪。

public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request)
    {
        var data = new List<Projection>();
        data.Add(new Projection()
        {
            EventId = 1,
            Start = DateTime.Now.AddDays(-2),
            End = DateTime.Now.AddDays(-2).AddHours(2),
            IsAllDay = false,
            CustomerId = 1,
            Description = "Booked for plumbing",
            Title = "Manchester Residence"
        });

        return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

public virtual JsonResult Create([DataSourceRequest] DataSourceRequest request, Projection evt)
    {
        if (ModelState.IsValid)
        {
            // Other code here
        }

        return Json(new[] { evt }.ToDataSourceResult(request, ModelState));
    }

public virtual JsonResult Update([DataSourceRequest] DataSourceRequest request, Projection evt)
    {
        if (ModelState.IsValid)
        {
            // Other code here
        }

        return Json(new[] { evt }.ToDataSourceResult(request, ModelState));
    }

public virtual JsonResult Destroy([DataSourceRequest] DataSourceRequest request, Projection evt)
    {
        if (ModelState.IsValid)
        {
            // Other code here
        }

        return Json(new[] { evt }.ToDataSourceResult(request, ModelState));
    }

JavaScript

下面是包含在独立JS文件中的JavaScript，该文件对应于我的计划程序“添加”事件。我没有显示“编辑”事件，因为它几乎是相同的想法，你应该能够弄清楚。

ABC.Events.SchedulerAdd = function (e) {

    function GetCustomers(value) {
        var url = "/Events/Shared/GetCustomers"
        var success = function (result) {
            if (result != null) {
                $("#CustomerId").kendoDropDownList({
                    dataTextField: "FullName",
                    dataValueField: "CustomerId",
                    dataSource: new kendo.data.DataSource({ data: result })
                });
            }
        };

        $.ajax({ url: url, success: success });
    }

    GetCustomers();
};

这个JavaScript函数中的一个关键点是，我们将字段转换为Kendo DropDownList，并在接收JsonResult的同时连接数据源（未显示，但它是一个简单的Json对象）。另一个关键是在创建新剑道时如何连接数据源。数据数据源。如果您试图简单地连接JsonResult，它将无法工作。

结论

这是在使用ASP时在调度程序模板（弹出窗口）中填充下拉列表的一种解决方法。NET MVC剑道UI的包装器版本。我对一种更好的方式持开放态度，在这种方式中，我设想将Json列表数据添加到Kendo调度器使用的内部MVVM中，但没有ASP的文档。NETMVC或如何实现它的示例，这是一种工作方式。

编辑#2-Telerik ASP。NETMVC示例

我最终收到了Telerik Support关于此问题的回复，并被定向到以下链接：http://www.telerik.com/support/code-library/custom-editor-9fd60fca3c02 这里有一个示例MVC项目，展示了如何在ASP中使用自定义编辑器、包含数据源的下拉列表。NET MVC。对于我来说，究竟为什么文档与这些项目之间没有明显的联系，这显然是一个谜。

Answer 1

你找到答案了吗？我正在做一些类似的事情，并且已经设法让其中一些工作，我有一个可能会有所帮助的演示。我的不是100%现在，但我正在到达那里。我有一个链接到资源的自定义模板。我的问题是，有时模型无法验证，因此我无法在控制器中获得返回Jason方法的帖子。你见过这个例子吗？