[OPEN] [#1862] how to mix old views with new tag helpers?

[mehdy]

Hi
I have views with html helpers and I want to migrate to 7.2
how can we mix html helpers with tag helpers
this code raises error:

Ext.Net.Core.Exceptions.LayoutException: Unexpected element 'TextFieldHtmlHelper' nested into 'ComponentRawContentPropertyTagHelper'.

@model ExtSample.Models.HomeModel
@{
    ViewData["Title"] = "Home page";
    var X = Html.X();
}
<ext-section target="Main">
        <ext-container flex="1">
            <content>
                @(X.TextField().FieldLabel("Item 1"))
            </content>
        </ext-container>
</ext-section>

[fabricio.murta]

Hello @mehdy!

I am afraid mixing up the two syntaxes is not supported. One reason is that a container's HTML is a javascript escaped string, and not really a full raw HTML code; in which some additional processing would be necessary to take place in order to convert the HTML from html helpers into a string to compose the tag helper's content, and a cyclic dependency could just happen.

You can instead, use the RenderTo() property to declare the HTML Helper somewhere else and point it to the HTML Helper's container.

For instance:

<script type="text/javascript">
    Ext.onReady(function () {
        App.Panel1.updateLayout();
    })
</script>
<ext-panel flex="1" id="Panel1" title="My Panel">
    <items>
        <ext-textField fieldLabel="Item from Tag Helpers" />
    </items>
</ext-panel>
@(Html.X().TextField().FieldLabel("Item from HTML Helpers").RenderTo("Panel1-innerCt"))

Notice another layout run is necessary in the container after the page is ready, as the RenderTo() is not recommended to be used against Ext.Container components because of the layout lifecycle.

So although it may be possible to craftily mix up the two syntaxes in the same page, limitations apply and they can't really be nested with each other interchangeably.

Hope this helps!

[mehdy]

can we have layouts with html helpers
that also will do the job
thanks

[fabricio.murta]

Hello @mehdy!

Can you elaborate a bit on your follow-up question? I'm not quite sure I get what you want to know.

[mehdy]

<ext-viewport layout="Border">
        <items>
            <ext-partial name="_Header" />

            <ext-partial name="_Sidebar" />

            <ext-section name="Main" />

        </items>
    </ext-viewport>

This is part of the code from _layout.cshtm in the ext sample.
is there any way we can omit the tag helpers
and use just html helpers. I mean having a layout with section (Main) and Partials, all without tag helpers
if this is possible we can have all kind of layouts and embed existing views inside layouts to render pages.

[fabricio.murta]

Hello again @mehdy!

Thanks for clarifying the question. The short answer is no, there's no ext-partial or ext-section components in the HtmlHelpers space.

By one hand, HtmlHelpers could benefit directly of RenderSection() (like Ext.NET 5 MVC Examples explorer do), but in the other hand it wouldn't nicely merge the component logic which is in most cases essential to a good component layout integration between Ext components.

Ext.NET 5 had ItemsFromSection (example, example with nesting) and ItemsFromPage (example).

For this missing bit of functionality, we've logged issue #1862 in GitHub to track the implementation and support. This may get mixed up with the also desired Partial Views feature, but if that's the case, we'll update the issue accordingly.

We'll post a follow up here as soon as we get the feature implemented.

[mehdy]

Hi again fabricio
That's great news. At the end of the day we need a way to put our views (lots of views with html helpers) in some kind of layout system, so we can upgrade to new version.
Thanks again