在Kendo Scheduler自定义模板中绑定DropDownList(ASP.NET MVC包装器版本) [英] Binding a DropDownList in Kendo Scheduler Custom Template (ASP.NET MVC Wrapper version)
问题描述
我正在为Kendo UI使用ASP.NET MVC包装器，并且试图将多个下拉列表绑定到自定义模板(x-kendo-template)中.我无法弄清楚如何使用ASP.NET MVC包装器执行此操作(这类似于以下问题:
I'm using the ASP.NET MVC wrapper for Kendo UI and I'm trying to bind several dropdownlists within a custom template (x-kendo-template). I can't figure out how to do this using the ASP.NET MVC Wrapper (this is similar to this question: How do I bind a DropDownList to a DataSource within an editor template using the scheduler?).
有一些使用Kendo Web版本的示例，但没有完整的示例显示使用带有调度程序的自定义弹出式编辑器，该调度程序包含一个从URL提取数据的下拉列表(json数据).
There are some examples on using the Kendo Web version, but no complete examples out there that show using a custom pop-up editor with the scheduler that contains a dropdownlist pulling data from a URL (json data).
是否有一个端到端的示例?我可以向调度程序加载数据.问题出在自定义模板和下拉列表绑定.
Is there an end-to-end example? I can load the scheduler with data. The issue is with the custom template and dropdownlist binding.
广泛搜索之后，我偶然发现了Telerik在ASP.NET MVC中使用Kendo UI Scheduler的入门"页面.他们(Telerik)确实需要做得更好，在演示到API文档与示例之间的交叉链接(
After searching extensively, I stumbled upon a "getting started" page from Telerik on using the Kendo UI Scheduler in ASP.NET MVC. They (Telerik) really need to do a better job cross-linking between Demos to Documentation to APIs and Examples (Here is the example)
我还创建了一篇博客文章，其中包含了调度程序的所有内容(从数据库表到视图)，您可以在此处看到.
I've also created a blog post that wraps everything for a Scheduler (from the database table to the Views), you can see that here.Kendo UI Scheduler with ASP.NET MVC and Peta Poco
该示例揭示了演示和文档所不具备的一些功能，例如，在线示例中使用的ViewModel:
The example shed some light which the demo and documentation do not do, like for instance, the ViewModel they use in their example online:
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; }
}
您用于Scheduler的ViewModel必须继承 ISchedulerEvent 类，否则它将无法正常工作.
Your ViewModel that you use for the Scheduler must inherit from the ISchedulerEvent class or it will not work correctly.
剃刀视图
Razor View非常简单，尽管您运行的大多数演示都将显示数据通过服务器端(从控制器)传递.在这里，我是通过Ajax方法(创建，读取，更新，销毁)来实现的.
The Razor View is pretty straight-forward, although most of the demos you run across will show data getting passed via the server-side (from the controller). Here, I'm doing this via Ajax methods (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", "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调用一起使用的主要要点是，它允许我们将方法放在单独的控制器中，以便我们可以保持显示视图的控制器的整洁.
The main point with using the datasource with ajax calls like above is that it allows us to put the methods in a separate controller so that we can keep the controller that is displaying the view clean.
剃刀视图-Kendo模板(用于事件的弹出式编辑器)
Razor View - Kendo Template (for the pop-up editor of events)
这是x-kendo-template的脚本块，在Kendo Scheduler中创建和编辑事件时，它将覆盖默认弹出窗口.该脚本几乎是荒野的西部，您可以在其中执行任何操作，并且默认情况下，它与Kendo MVVM模型绑定.不过，要花一点时间，因为没有一种记录的方法可以扩展" ViewModel来正确地将数据源从Scheduler的ASP.NET MVC包装器(版本)中的自定义下拉列表中放入. (这也使用Twitter Bootstrap)
This is the script block for the x-kendo-template that overwrites the default pop-up window when creating and editing events in the Kendo Scheduler. This script is pretty much the wild west and you can do whatever you want in it, and it is bound by default with the Kendo MVVM model. Take that with a grain of salt though because there is not a documented way to "extend" that ViewModel to properly put your datasources from custom drop down lists in the ASP.NET MVC wrapper (version) of the Scheduler. (This uses Twitter Bootstrap as well)
<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(在Controller中)
这是CRUD Json结果.对于该示例，已修剪了创建，更新和销毁JsonResults.
Here are the CRUD Json Results. The Create, Update and Destroy JsonResults have been trimmed for the example.
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，与我的Scheduler添加"事件相对应.我没有显示编辑"事件，因为它几乎是相同的想法，您应该可以弄清楚.
Here is the JavaScript contained within a stand alone JS file that corresponds to my "Add" event for the Scheduler. I didn't show the "Edit" event as it is pretty much the same idea and you should be able to figure it out.
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，它将无法正常工作.
One of the keys in this JavaScript function is that we are turning our field into a Kendo DropDownList and wiring our datasource up at the same time that we are receiving as a JsonResult (not shown, but it's a simple Json object). Another key is how we wire up the datasource as we are creating a new kendo.data.DataSource. If you try to simply wire up the JsonResult, it won't work.
结论
使用Kendo UI的ASP.NET MVC包装器版本时，可以在调度程序模板中填充下拉列表(弹出窗口).我对更好的方法持开放态度，我想它将把Json列表数据添加到Kendo Scheduler使用的内部MVVM中，但是没有ASP.NET MVC的文档或如何实现它的示例，这是一种可行的方式.
This is a work around to fill dropdownlists in a Scheduler Template (pop-up) when using the ASP.NET MVC Wrapper version of the Kendo UI. I am open for a better way, in which I imagine it will be adding the Json list data to the Internal MVVM that the Kendo Scheduler uses, but without the documentation for ASP.NET MVC or examples of how to pull it off, this is a way it can work.
编辑#2-Telerik ASP.NET MVC示例
我终于从Telerik支持小组收到有关此问题的回音，并被定向到此链接:
I finally heard back from Telerik Support on this issue and was directed to this link: http://www.telerik.com/support/code-library/custom-editor-9fd60fca3c02 There is a sample MVC project there that shows how to use a Custom Editor, Drop Down Lists with datasources, all within ASP.NET MVC. Why on Earth there is no link from the documentation to such projects that can obviously help is a mystery to me.
推荐答案
您是否设法解决了这个问题?我正在尝试类似的工作，并且设法使其中的一些工作可行，并且我有一个可能会有所帮助的演示.我的不是现在100％，但我要到达那里.我有一个链接到资源的自定义模板.我的问题是，有时模型无法验证，因此我无法在控制器中回传Jason方法.您是否看到过示例?
Did you manage to figure this out? I'm working on something similar and have managed to get some of this to work and I have a demo that might help. Mine is not 100% right now but I am getting there. I have a custom template linked to a resource. My issue is sometimes the model doesn't validate so I don't get a post back to the Jason method in the controller. Have you seen this example?
这篇关于在Kendo Scheduler自定义模板中绑定DropDownList(ASP.NET MVC包装器版本)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
