kendo-asp.net-mvc – 在Kendo Scheduler自定义模板中绑定DropDo

我正在使用用于Kendo UI的ASP.NET MVC包装器,我正在尝试在自定义模板(x-kendo-template)中绑定多个下拉列表.我无法弄清楚如何使用ASP.NET MVC Wrapper(这类似于这个问题： How do I bind a DropDownList to a DataSource within an editor template using the scheduler?).

有一些关于使用Kendo Web版本的示例,但没有完整的示例显示使用自定义弹出编辑器,调度程序包含从URL(json数据)中提取数据的下拉列表.

有端到端的例子吗？我可以用数据加载调度程序.问题在于自定义模板和下拉列表绑定.

编辑：

在广泛搜索之后,我偶然发现Telerik使用ASP.NET MVC中的Kendo UI Scheduler的“入门”页面.他们(Telerik)确实需要更好地将Demos与文档之间的交叉连接到API和示例(Here就是示例)

我还创建了一个包含调度程序(从数据库表到视图)的所有内容的博客文章,你可以看到这里.Kendo UI Scheduler with ASP.NET MVC and Peta Poco

这个例子揭示了演示和文档没有做到的一些亮点,比如他们在网上示例中使用的ViewModel：

C#ViewModel

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必须从ISchedulerEvent类继承,否则它将无法正常工作.

剃刀视图

Razor View非常简单,尽管您遇到的大多数演示都会显示数据通过服务器端(来自控制器)传递.在这里,我通过Ajax方法(Create,Read,Update,Destroy)来做这件事.

@(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",new { Area = "Events" })
        .Destroy("Destroy",new { Area = "Events" })
        .Update("Update",new { Area = "Events" })
)
.Events( events =>
    {
        events.Add("ABC.events.SchedulerAdd");
    })
.Editable(edit =>
{
    edit.TemplateId("schedulerTemplate");
})
)

使用带有上述ajax调用的数据源的要点是它允许我们将方法放在一个单独的控制器中,这样我们就可以保持显示视图的控制器干净.

剃刀视图 – 剑道模板(用于弹出的事件编辑器)

这是x-kendo-template的脚本块,在创建和编辑Kendo Scheduler中的事件时会覆盖默认弹出窗口.这个脚本几乎是狂野的西部,你可以在它里面做任何你想做的事情,它默认绑定了Kendo MVVM模型.尽管如此,因为没有记录的方法来“扩展”ViewModel以正确地将自定义下拉列表中的数据源放在Scheduler的ASP.NET MVC包装器(版本)中. (这也使用Twitter Bootstrap)

<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(在控制器中)

这是CRUD Json结果.为示例修改了JsonResults的Create,Update和Destroy.

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,ModelState));
    }

public virtual JsonResult Destroy([DataSourceRequest] DataSourceRequest request,ModelState));
    }

JavaScript的

这是一个独立的JS文件中包含的JavaScript,它对应于我的Scheduler的“Add”事件.我没有展示“编辑”事件,因为它几乎是相同的想法,你应该能够弄明白.

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对象).另一个关键是我们在创建新的kendo.data.DataSource时如何连接数据源.如果您尝试简单地连接JsonResult,它将无法工作.

结论

在使用Kendo UI的ASP.NET MVC Wrapper版本时,这是一个填充调度程序模板(弹出窗口)中的下拉列表的工作.我是开放的更好的方式,我想它会将Json列表数据添加到Kendo Scheduler使用的内部MVVM,但是没有ASP.NET MVC的文档或如何将其拉出的示例,这是它可以工作的方式.

编辑#2 – Telerik ASP.NET MVC示例

我终于在这个问题上回复了Telerik支持,并被引导到这个链接：http://www.telerik.com/support/code-library/custom-editor-9fd60fca3c02那里有一个示例MVC项目,它展示了如何在ASP.NET MVC中使用自定义编辑器,下拉列表和数据源.为什么在地球上没有从文档到这些项目的链接,这显然对我来说是一个谜.