剑道和MVC风格的模板

时间:2014-11-20 09:26:47

标签: c# asp.net asp.net-mvc templates kendo-ui

我试图弄清楚如何让kendo UI像MVC那样行事。 当我渲染模板时,我想用模型传递元数据,然后为给定模型生成正确的输出。

例如在MVC中,我会这样做......

//define a custom object.cshtml in editortemplates within views
@if (ViewData.TemplateInfo.TemplateDepth < 2)
{
    foreach (var prop in ViewData.ModelMetadata.Properties
        .Where(metadata => metadata.ShowForEdit && !metadata.IsComplexType && !ViewData.TemplateInfo.Visited(metadata)))
    { 
        <li>
            @Html.Label(prop.PropertyName)
            <div class="value">
                @Html.Editor(prop.PropertyName, prop.TemplateHint, new { @class = "k-input" })
            </div>
        </li>
    }
}

//In any view after defining the above
<ul>
   @html.EditorFor(m => m)
</ul>

这会吐出一个控件列表,这些控件在编辑并发回服务器映射回到对象时可以保存。 这些控件将具有所有正确的属性来处理挂钩验证并被定义为正确的类型,因此布尔值将是一个复选框,字符串是文本框或文本区域,具体取决于元数据。

在剑道中我想产生相同的结果...... 这就是我到目前为止所拥有的:

我定义了这样的模板,用于渲染任意对象的编辑器......

<script id="editor" type="text/x-kendo-template">
    # var meta = getType(data.type) #
    <h2><span class="k-sprite edit"></span> #: meta.DisplayName #: <span data-bind="text:ID">#: data.ID #</span> <img src="@Url.Content("~/Content/close.png")" /></h2>
    <ul class="fieldList">
    # for(i in data) { #
        # var prop = meta.getProperty(i) #
        # if(prop != null && getTemplate(prop.Template) != null) { #
        <li>
            <label class="fieldLabel">#: prop.DisplayName  #</label>
            #= renderTemplate('editable' + prop.Template, data[prop.PropertyName]) #
        </li>
    # }} #
    </ul>
    <hr />
    <button class="k-button">Save</button>
</script>

然后我根据prop.Template中找到的值定义了各个模板,这是.Net类型名称或mvc的uihint属性值(服务器计算此值)。

所有擅长根编辑器级别模板但是然后在每个字段中我有一个模型但不知道如何获得这里定义的变量prop,它表示该类型对象上该属性的元数据,因此我可以确定如何正确渲染控件。

Telerik支持建议让服务器使用MVC为每种类型生成一个编辑器模板,但这感觉不对,并且在这里击败了我的目标,即让应用程序在初始加载(大多数情况下)之后就像在MVC上那样请求数据服务器。 有什么想法吗?

1 个答案:

答案 0 :(得分:0)

这将永远不会奏效,原因是:

Javascript和kendo没有类型概念,因此元数据如何在该环境中成为可行的概念。

这里要学习的课程: js中的模板不是MVC允许我们做的一半,也不会因为语言的限制。

我通过在服务器上模板化对象然后将整个对象绑定到由MVC中的razor生成的kendo模板来解决这个问题。