MVC6 TagHelpers Coming Soon to MVC Edition

July 02 2015

Update since original post: Studio 2015 v2 released on July 16, 2015 and MVC TagHelpers are now available, we will release support for latest beta in coming weeks. See the TagHelpers in action In a couple of weeks we will be releasing 2015 V2. Along with other great new features across ComponentOne Studio Editions, we will be releasing MVC6 TagHelpers for MVC Edition controls. TagHelpers are similar to web directives. For example, in the JavaScript world, Angular lets us extend HTML attributes, similarly in ASPNET5. It's now possible to use HTML helpers in views by simply extending the semantics of tags in markup. For example, let's consider this scenario: To use FlexGrid in ASPNET MVC we currently use razor syntax as noted below:


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

Now let's see how the same could be written using 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>

The above code looks like we're using mark-up. That is the beauty of TagHelpers: it's clean and easy to understand. Now add full IntelliSense support to it, and this suddenly makes writing razor code delightful. Let's see another example with some templates. If we need to show customised items in a combobox, we write the following code in razor:

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

Where the "template1" is defined separately as:

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

If we need to write the same using Taghelpers, it would look like the below:

<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>

As we can see, this has taken fewer lines to code, the template definition is inline and is natural. We'll have TagHelper support for all our MVC Edition controls beginning 2015 V2. With ASPNET5 these controls would work core CLR and thus, will work across platforms. With 2015 v2, MVC Edition controls will have MVC6 compatibility & TagHelpers in Beta. We'll make these controls compatible with ASPNET5 RTM soon after Microsoft announces ASPNET5 RC\RTM.

Stay tuned for more exciting news

TrendLines, RangeSelector in FlexChart for MVC and new Web API Edition will be available with 2015 v2. If you're already an account member, you'll see the announcement soon. If not, create an account today to keep apprised of our 2015 releases!

Download Now!

Prabhakar Mishra

Product Manager