我正在使用用于Kendo UI的ASP.NET MVC包装器,我正在尝试在自定义模板(x-kendo-template)中绑定多个下拉列表.我无法弄清楚如何使用ASP.NET MVC Wrapper(这类似于这个问题:如何使用调度程序将DropDownList绑定到编辑器模板中的DataSource？).
有一些关于使用Kendo Web版本的示例,但没有完整的示例显示使用自定义弹出编辑器,调度程序包含从URL(json数据)中提取数据的下拉列表.
有端到端的例子吗？我可以用数据加载调度程序.问题在于自定义模板和下拉列表绑定.
编辑:
在广泛搜索之后,我偶然发现了Telerik使用ASP.NET MVC中的Kendo UI Scheduler的"入门"页面.他们(Telerik)确实需要更好地将Demos与文档之间的交叉连接到API和示例(以下是示例)
我还创建了一个博客文章,它包含了调度程序的所有内容(从数据库表到视图),你可以在这里看到.带有ASP.NET MVC和Peta Poco的Kendo UI Scheduler
这个例子揭示了演示和文档没有做到的一些亮点,比如他们在网上示例中使用的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", "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调用的数据源的要点是它允许我们将方法放在一个单独的控制器中,这样我们就可以保持显示视图的控制器干净.
剃刀视图 - 剑道模板(用于弹出的事件编辑器)
这是x-kendo-template的脚本块,在创建和编辑Kendo Scheduler中的事件时会覆盖默认弹出窗口.这个脚本几乎是狂野的西部,你可以在它里面做任何你想做的事情,它默认绑定了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结果.为示例修改了创建,更新和销毁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,它对应于我的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中.为什么在地球上没有从文档到这样的项目的链接,这显然对我来说是一个谜.
| 归档时间： |
|
| 查看次数： |
6537 次 |
| 最近记录： |