Ext.NET Classic 7.1 with new Partial and Section components 😍

Posted on by Geoffrey McGill in News

It's been only two weeks since the launch of Ext.NET Classic 7.0 and the new features continue to roll in. Today we're excited to announce the release of Classic 7.1 and several shiny new features.

For those new to Ext.NET...

Ext.NET is a wicked fast suite of 140+ ASP.NET UI components for building data intensive cross-platform web applications. We've got a component for that!

Want to jump right in and give Ext.NET a try? check out the Getting Started guide and have your new app running within seconds.

Key items within this announcement include:

New <ext-partial> component

In ASP.NET Core apps, the <partial> component is used to inject one partial View into another. Using this technique, a developer can easily break apart their apps into smaller modular chunks which helps reduce duplication, improve reusability, and strengthens the separation of concerns.

For example, let's demonstrate with the following super-simplified sample where Parent.cshtml includes a _Child.cshtml partial. The child partial contains just a simple <ext-button> component.

Parent.cshtml


<partial name="_Child" />

_Child.cshtml


<ext-button text="Child" />

The above sample compiles and renders perfectly. This scenario is supported.

The issue occurs if we want to add an <ext-panel> to the parent and have the child <ext-button> properly participate in the layout engine of the parent <ext-panel>. Let's demonstrate with code where we add the child <ext-button> into the parents <items> collection.

Here's what we want for the final result. 👉

If we were configuring without using partials, we would use the following:


<ext-panel title="Parent">
    <items>
        <ext-button text="Child" />
    </items>
</ext-panel>

Although the goal is to move the <ext-button> into _Child.cshtml, so our initial attempt would be nesting the <partial> inside the <items>.

There is a specialized relationship between an Ext.NET child component and the component collection properties of a parent, such as <items>. In this scenario, the <partial> is not supported.

Using the native <partial> does not provide the necessary hooks required for the Ext.NET components to correctly configure and leads to orphaned components not participating in the layout. 👎 That's not good and we needed a solution.

With Ext.NET, we needed a little more agility in the parent/child component rendering lifecycle and the ability for the Child to elegantly combine its initialization config to the Parents initial config.

The new <ext-partial> component has been introduced to support the sophisticated layout requirements of Ext.NET components and intelligently adjusts to render Ext.NET components into their correct parent initialization config.

We can now update Parent.cshtml to use the <ext-partial> instead of <partial>.

Parent.cshtml


<ext-panel title="Parent">
    <items>
        <ext-partial name="_Child" />
    </items>
</ext-panel>

_Child.cshtml


<ext-button text="Child" />

Everything now works as expected and we get a clean separation of partial views from the parent. 🙌

The <ext-partial> can also be passed a Model, which enables the following scenario and renders the same Panel + Button as above.

Parent.cshtml


<ext-panel title="Parent">
    <items>
        <ext-partial name="_Child" model="new MyModels.MyButtonModel()" />
    </items>
</ext-panel>

_Child.cshtml


@model MyModels.MyButtonModel

<ext-button model="Model.MyButton" />

MyButtonModel.cs


using Ext.Net;

namespace MyModels
{
    public class MyButtonModel
    {
        public Button MyButton;

        public MyButtonModel()
        {
            MyButton = new Button
            {
                Text = "Child"
            };
        }
    }
}

New <ext-section> component

Sections are similar to Partials in that with Ext.NET we require special handling to properly render the section into the component collection hierarchy.

Sections are typically used within the _Layout.cshtml view to create regions or placeholders into which the main View can render components. Many Views can use the same _Layout and the _Layout is basically just a template which the View uses to render elements into.

For example, the following demonstrate a basic _Layout.cshtml with a <ext-viewport> and an <ext-section> defined within.

_Layout.cshtml


<html>
<head>
    <title>@ViewData["Title"]</title>
</head>
<body>
    <ext-viewport layout="Border">
        <items>
            <ext-section name="Main" />
        </items>
    </ext-viewport>
    @RenderBody()
</body>
</html>

The goal here is that we want to create the _Layout, then have the Views use the _Layout and configure their content to be added to the Main section.

The view is configured to use the _Layout and a <ext-section target="Main"> is used to target the section into which the View components should render.

Index.cshtml


@page
@{
    Layout = "_Layout";
}
<ext-section target="Main">
    <ext-panel region="Center" title="Dashboard" />
</ext-section>

The end result of the above sample is not very exciting, but it does work exceptionally well and allows for excellent separation of the Layout and View components, especially when combined with <ext-partial> components.

Our Viewport in the _Layout can now be extended to define a Section and include separate Partial views for a Header and Sidebar. 


<html>
<head>
    <title>@ViewData["Title"]</title>
</head>
<body>
    <ext-viewport layout="Border">
        <items>
            <ext-partial name="_Header" />

            <ext-partial name="_Sidebar" />

            <ext-section name="Main" />
        </items>
    </ext-viewport>
    @RenderBody()
</body>
</html>

Cool. Now let's put this all to good use...

New Ext.NET Templates

The Ext.NET Templates have been completely overhauled and feature brand new sample apps for both Razor Pages and MVC.

The quickest way to get started is by using the dotnet command line tools.

NOTE: The .NET Core 3.1 SDK is required to be installed first.

Run the following sequence of commands to get your first app up and running in less than one minute.


dotnet new -i Ext.NET.Templates  # Install dotnet templates
mkdir ExtDemo1                   # Make a new folder
cd ExtDemo1                      # Move into that new folder
dotnet new extnet                # Create a new Ext.NET app
dotnet watch run                 # Start the new web app

Here's a Getting Started video demonstrating how to install the Ext.NET Template and create a new web app using the above commands.

If you are using Visual Studio, another option for creating a new Ext.NET from a project template is to install the VSIX extension. Running the installer will add the two Ext.NET project templates into your Visual Studio File > New > Project... menu.

Once installed, two new Project templates will be available in Visual Studio.

The Visual Studio project templates can also be installed from within Visual Studio using Extensions > Manage Extensions, then searching for Ext.NET. A few clicks and the new project templates will be available.

Fully detailed setup options for Ext.NET are available in the new Installation guide.

Feedback

Feel free to contact us anytime on the Ext.NET Forums, Twitter, or email us at support@ext.net.

If you have technical support questions, the best way to get in touch is by posting your questions in the Ext.NET Forums. The forums are an excellent knowledge base containing 34,000+ discussion threads.

Posting questions in the public forum ensures other community members can participate and benefit from the public discussion in the future.

Thanks!