Ext.NET 7.0 Preview4 for ASP.NET Core 🚀

Posted on 2020-07-27 by Geoffrey McGill in News

The fourth preview release of Ext.NET for ASP.NET Core is now available.

Want to jump right in and give Ext.NET a try? check out the installation section below ⬇.

The preview4 release represents a huge upgrade as now full coverage of the Sencha Ext JS API is supported.

For those new to Ext.NET... Ext.NET for ASP.NET Core is a comprehensive suite of 140+ .NET UI components for building data-intensive, cross-platform web applications for any modern device. We've got a component for that!

Key items within this announcement include:

Charts package now available
Enhanced TagHelpers & intellisense
Ext.NET Editions
Roadmap
Installation

Be sure to also check out the previous Ext.NET 7x release announcements, including preview1, preview2, and preview3.

Ext.NET Charts

The full Charts API is now supported and bundled FREE with Ext.NET Classic.

Ext.NET Charts now offers unlimited configuration of Chart and Series types, such as Pie, Area, Bar, Line, Polar, Radar, Donut, Scatter, and much more.

Adding advanced data visualization to your application with simple markup configuration syntax using TagHelpers has never been easier or more powerful than with the latest Ext.NET release.


<ext-polarChart height="350">
    <store>
        <ext-store data="Model.ChartData">
            <fields>
                <ext-dataField name="name" />
                <ext-dataField name="value" />
            </fields>
        </ext-store>
    </store>
    <series>
        <ext-pie3DSeries angleField="value" donut="30" />
    </series>
</ext-polarChart>

As with all Ext.NET Classic components, the entire component API is also available using HtmlHelpers. For example, the following sample demonstrates how to configure the same PolarChart as above using HtmlHelpers instead of the markup based TagHelper syntax.


@(Html.X()
    .PolarChart()
        .Height(350)
        .Store(new Store
        {
            Data = Model.ChartData,
            Fields = new DataField[]
            {
                new DataField { Name = "name" },
                new DataField { Name = "value" }
            }
        })
        .Series(new Pie3DSeries
        {
            AngleField = "value",
            Donut = 30
        })
)

The Chart components are built upon the same framework as all other components within Ext.NET, including a consistent and polished API that feels familiar and expected by .NET developers.

Your learning curve is minimized as the entire bundle of UI components share common server-side & client-side architecture, API features, high-performance rendering, and attention to detail that is always a priority with Ext.NET.

Enhanced TagHelpers and intellisense

The Ext.NET preview4 expands TagHelper and Visual Studio intellisense support to levels we've never seen in any other ASP.NET component library on the market.

Providing the best possible TagHelper experience of any ASP.NET component library has been a primary goal of the team since the beginning, and we've just taken a giant leap forward with this release.

Throughout the framwork, the markup has been standardized using the following alternating pattern of component or model tag with an ext- tag prefix, then nested inner property tag without the ext- tag prefix.


<ext-component|model>
    <property>
        <ext-component|model>
            <property>
                <ext-component|model>

The following <ext-button> component demonstrates a nice simple working sample of the Ext.NET TagHelper syntax pattern.


<ext-button>                      <!-- component -->
    <menu>                        <!-- property  -->
        <ext-menu>                <!-- component -->
            <items>               <!-- property  -->
                <ext-menuItem />  <!-- component -->
            </items>
        </ext-menu>
    </menu>
</ext-button>

The pattern is consistant throughout the library, but there is one scenario with an exception to the pattern. We decided the ext- tag prefix was not required when configuring listeners and directEvents.


<ext-button text="Submit">     <!-- component -->
    <listeners>                <!-- property  -->
        <click handler="...">  <!-- model     -->
            <mask>             <!-- property  -->
                <ext-mask />   <!-- component -->
            </mask>
        </click>
    </listeners>
</ext-button>

Improving the TagHelper intellisense experience within Visual Studio for Windows and Mac received a lot of attention as we cleaned up several important scenarios and fixed some annoying bugs.

TagHelpers and intellisense are finally feeling super powerful within Ext.NET, and we're not done yet. We have some ideas we'll be exploring during the upcoming releases to ensure an even better developer experience. Stay tuned.

Three Ext.NET editions

Moving forward, there will be three separate editions of Ext.NET, Legacy, Modern, and Classic.

Which Ext.NET edition to choose?

If you are starting a brand new ASP.NET Core project, choose either Modern (coming soon) or Classic.

Ext.NET Modern is a framework for creating applications that run across all types of devices, from phones to tablets to desktop web browsers. A similar set of UI components are available in both Modern and Classic, but they can differ in features and target usage.

Ext.NET Classic includes the same set of UI components as Legacy but is built on a completely new ASP.NET Core 3.1 architecture. Classic is primarily targeted to desktop web browser-based applications.

If you have an existing Ext.NET project and looking for the easiest upgrade path, including upgrading from any v1.x to 5.x release, Legacy is the best choice.

Road map

Currently, we're working off the following projected release schedule as we move towards the general availability of Ext.NET 7.0.0 for ASP.NET Core.

The preview4 release took us longer than estimated as once we got into it we really wanted to pack in as many new features and API improvements as we could. It goes without saying, the schedule above is subject to change, although we continue to work hard to hit the scheduled release dates.

Installation

There are several options for adding Ext.NET into your projects:

Install dotnet command-line tools, or
Install Ext.NET extensions for Visual Studio, or
Add NuGet package to your project

We'll quickly run through each of these installation techniques, although all three can be done too depending on your requirements.

Install `dotnet` command-line tools

With multi-platform support, including Windows and Mac OS, the dotnet CLI is a handy collection of tools for creating, compiling, running, and publishing .NET applications. With one simple command, Ext.NET can be installed into that toolbox.

We're making the assumption here that you already have .NET Core installed locally, but if not, download and install .NET Core 3.1 SDK first. The dotnet CLI is installed automatically during that process.

With .NET Core installed on your local machine, open a Command-Line or Mac OS Terminal window, run the following command to install the Ext.NET Templates:


dotnet new --install Ext.NET.Templates

Two new project templates will be installed, extnet and extnet-mvc.

The extnet template will create a basic Razor Pages project with Ext.NET installed. The extnet-mvc template creates the same Ext.NET application but with an ASP.NET MVC (Model-View-Controller) project layout.


Templates                      Short Name    Language    Tags
--------------------------------------------------------------------------------
Ext.NET MVC Web App            extnet-mvc    [C#]        Ext.NET/Web/MVC
Ext.NET Razor Pages Web App    extnet        [C#]        Ext.NET/Web/Razor Pages

Already have the Ext.NET `dotnet` tools installed?

Upgrading to the latest release of Ext.NET is oh so simple, just run the same command.


dotnet new --install Ext.NET.Templates

The next step is to create a new folder for your project and move into that folder:


mkdir Demo1
cd Demo1

With those few simple commands, we're now ready to create a new Ext.NET web app from our newly installed templates and open the app in a web browser.


dotnet new extnet
dotnet watch run

Your new Ext.NET project is now created and up and running.

The above dotnet watch run command will start a local webserver at http://localhost:5000. You can now view the app in a web browser and confirm the Ext.NET web app is working correctly.

To view the new project source code, open the project in Visual Studio, or run the code . command to open with Visual Studio Code.


code .

Install VSIX Visual Studio Extension

The VSIX project template installer is available from the Ext.NET download page or the Visual Studio Marketplace. 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.

Add Ext.NET to your project using NuGet

If you have an existing project, Ext.NET can also be added to the project using NuGet or the dotnet add package CLI command.

NuGet

Install-Package Ext.NET.Classic -Version 7.0.0-preview2

dotnet CLI

dotnet add package Ext.NET.Classic --version 7.0.0-preview2

Also, check out the download page for links to all installation options and previous releases.

Feedback

Please keep in mind, this current release is a preview and there are some missing features if you're upgrading from any Ext.NET 1.x to 5.x release. We're working hard to fill those gaps and each new 7x release will be packed with goodies.

Development on the all-new Ext.NET 7.0 is iterating quickly and we anticipate fresh new releases monthly.

Feel free to contact us anytime on the Ext.NET Forums, Twitter, or email us at hello@object.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 12+ years of conversations. Posting questions in the public forum ensures other community members can participate and benefit from the public discussion in the future.

Thanks!