在 Kendo Scheduler 自定义模板中绑定 DropDownList（ASP.NET MVC Wrapper 版本）

Posted 2023-05-07

【中文标题】在 Kendo Scheduler 自定义模板中绑定 DropDownList（ASP.NET MVC Wrapper 版本）

【英文标题】：Binding a DropDownList in Kendo Scheduler Custom Template (ASP.NET MVC Wrapper version)

【发布时间】：2014-04-09 18:12:46

【问题描述】：

我正在为 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 调度程序的“入门”页面。他们（Telerik）确实需要更好地在演示、文档、API 和示例之间进行交叉链接（Here 就是示例）

我还创建了一篇博客文章，其中包含调度程序的所有内容（从数据库表到视图），您可以在此处查看。Kendo UI Scheduler with ASP.NET MVC and 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 必须继承自 ISchedulerEvent 类，否则它将无法正常工作。

剃刀视图

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 View - Kendo 模板（用于事件的弹出式编辑器）

这是 x-kendo-template 的脚本块，它在 Kendo 调度程序中创建和编辑事件时覆盖默认弹出窗口。这个脚本几乎是狂野的西部，你可以在其中做任何你想做的事情，并且默认情况下它与 Kendo MVVM 模型绑定。但是，请谨慎对待，因为没有记录的方法可以“扩展” ViewModel 以将数据源从自定义下拉列表中正确放置在调度程序的 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 结果。该示例的 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 对象）的同时连接我们的数据源。另一个关键是我们在创建新的 kendo.data.DataSource 时如何连接数据源。如果您尝试简单地连接 JsonResult，它将无法正常工作。

结论

当使用 Kendo UI 的 ASP.NET MVC Wrapper 版本时，这是一种在调度程序模板（弹出）中填充下拉列表的解决方法。我对更好的方法持开放态度，我想它会将 Json 列表数据添加到 Kendo 调度程序使用的内部 MVVM 中，但没有 ASP.NET MVC 的文档或如何将其关闭的示例，这是一种可行的方式。

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

我终于收到 Telerik 支持部门关于此问题的回复，并被定向到此链接：http://www.telerik.com/support/code-library/custom-editor-9fd60fca3c02 那里有一个示例 MVC 项目，展示了如何在 ASP.NET 中使用自定义编辑器、带有数据源的下拉列表MVC。为什么在地球上没有从文档到明显可以帮助的项目的链接，这对我来说是个谜。

【问题讨论】：

+1 来自我。我费了很大劲才弄清楚这一点。像我这样的初学者没有适当的支持和文档。

【参考方案1】：

你解决了吗？我正在做类似的事情，并设法让其中一些工作，我有一个可能会有所帮助的演示。我的现在不是 100%，但我正在到达那里。我有一个链接到资源的自定义模板。我的问题是有时模型无法验证，所以我没有收到控制器中 Jason 方法的回复。你见过这个example吗？

【讨论】：

是的，这就是我在上面的编辑#2 中提到的示例。他们的示例中有趣的是，他们使用 .Resources 来定义 Razor 代码中的附加下拉列表值，这似乎可以使用或不使用自定义编辑器模板。另一个区别是他们使用 MVC 编辑器模板 (/Views/Editor Templates/...) 作为他们的编辑器弹出窗口，而我在视图中只有