Country  china

MVC6 TagHelpers整合到了MVC版本

MVC6 TagHelpers 随着ComponentOne Studio 2015 V2版本一起发布了,所以您现在就可以使用它的新功能了。

TagHelpers和web指令很相似,例如JavaScript脚本里的Angular扩展了HTML属性,这和ASPNET5很相似。现在可以使用HTML帮助器来简化扩展语义标记。例如,参考下面的情景:

在ASPNET MVC中使用FlexGrid ,当前我们使用的razor 语法如下:

@(Html.C1().FlexGrid()
 
.AutoGenerateColumns(false)
 
.CssClass("grid")
 
.IsReadOnly(true)
 
.Columns(columns =>
 
{
 
columns.Add(column => column.Binding("Start").Width("80").MaxWidth(160).MinWidth(40));
 
columns.Add(column => column.Binding("Product").Width("2*").AllowResizing(false));
 
columns.Add(column => column.Binding("Amount").Format("c"));
 
columns.Add(column => column.Binding("Amount2").Format("c"));
 
})
 
.Bind(Model)
 
)

现在来看下使用Taghelpers 后的句法:

<c1-flex-grid class="grid" auto-generate-columns="false" is-read-only="true"> 
 
<c1-flex-grid-column binding="Start" width="80" max-width="160" min-width="40"></c1-flex-grid-column> 
 
<c1-flex-grid-column binding="Product" width="2*" allow-resizing="false"></c1-flex-grid-column> 
 
<c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column> 
 
<c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column> 
 
<c1-items-source read-action-url="@Url.Action("StarSizing_Bind")"></c1-items-source> 
 
</c1-flex-grid> 

上面的代码看起来像使用了标记语言。这就是TagHelpers 优秀之处:简洁且便于理解。加上它对完整的IntelliSense的支持,编写razor代码就变得十分轻松愉快。我们来看看使用了模板的其他例子。假如我们需要显示下拉框自定义项目,可以编写如下razor代码:

@(Html.C1().ComboBox()
 
.Bind(Model)
 
.DisplayMemberPath("Name")
 
.SelectedValuePath("Value")
 
.ItemTemplateId("template1")

 

在“template1”分别定义为:

<script id="template1" type="text/template">// <![CDATA[
 
<span>
 
<span class="palette" style="background-color: {{Value}}"></span>
 
<span class="label">{{Name}}</span>
 
</span>
 
// ]]></script>

同样的代码使用Taghelpers后将会如下所示:

<c1-combo-box display-member-path="Name" selected-value-path="Value"> 
 
<c1-input-item-template> 
 
<span> 
 
<span class="palette" style="background-color: {{Name}}"></span> 
 
<span class="label">{{Name}}</span> 
 
</span> 
 
</c1-input-item-template> 
 
<c1-items-source source-collection="@Model"></c1-items-source> 
 
</c1-combo-box> 

正如我们看到的那样,只需几行代码,模板定义就内联且自然。从2015 V2版本开始我们的所有MVC版控件都支持TagHelper。ASPNET5中的控件的核心是CLR,因此,控件能够跨平台工作。

2015 v2发布后,MVC版本控件兼容了MVC6和TagHelpers Beta版。微软发布ASPNET5 RC\RTM后,我们很快也会让这些控件和ASPNET5 RTM兼容。

敬请期待更多喜讯

2015 v2发布后,MVC版FlexChart 中的TrendLines, RangeSelector 以及新版本的Web API您就可以开始使用了。

 

 

GCDNhttp://gcdn.gcpowertools.com.cn/

官方网站http://www.gcpowertools.com.cn/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/taghelper.aspx

不允许评论