Ext.net 7.0 Preview for Asp.net Core

After 12 years, it was time. We went back to the drawing board and completely re-engineered an entirely new engine and runtime to support ASP.NET Core.

Performance and automation were key goals and the team leveraged a huge amount of experience gained from building Bridge.NET and Retyped to create a whole new Ext.NET.

Polishing is still required, but we're are sooooo thrilled to be finally announcing a preview release of Ext.NET 7.0 for ASP.NET Core .

Installation

The new release can be installed fromNuGet or other options directly from the Ext.NETwebsite.

NuGet

Install-Package Ext.NET.Classic -pre<a href="https://www.nuget.org/packages/ext.net.classic" target="_blank" data-toggle="tooltip" data-placement="left" title="Install Ext.NET using NuGet"><i></i></a>

dotnet CLI

dotnet add package Ext.NET.Classic<a href="https://www.nuget.org/packages/ext.net.classic" target="_blank" data-toggle="tooltip" data-placement="left" title="Install Ext.NET using dotnet CLI"><i></i></a>

Bumping to 7.0

An epic jump in sophistication, performance, and automation, all wrapped in a complete ground-up rewrite deserves something special for the version number.

We're introducing a new major version number, bumping from Ext.NET 5 directly into Ext.NET 7. The first 7.0.0-preview1 release isavailable now.

This also brings Ext.NET into major version parity with the underlying Sencha Ext JS v7 client-side library.

Three Ext.NET editions

Going 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 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 their 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 apps.

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.

7.0 Licensing and FREE Upgrade!

As with all previous Ext.NET releases, a new major version license key will be required for production apps integrating Ext.NET 7.0, and there's some great news for all customers who previously purchased an Ext.NET 5.x license...

All Ext.NET 5.x license purchases will receive a free upgrade to Ext.NET 7.0!

For customers who previously purchased a 5.x license, we will be in contact with information on how to acquire your new 7.x license keys. All new licenses purchased as of today will receive license keys to unlock all 5.x and 7.x releases. Licensing has otherwise remained unchanged. Single Developer licenses continue to be available with volume discounts at 3, 5, and 20 licenses. Seepricing.

A license key is not required to develop or test locally. More information and installation options are available at/download.

Any licensing or sales questions? Please feel free to contact us at [email protected] .

Project setup

Within your ASP.NET Core web project, a few configuration options must be included.

After installing the Ext.NET.Classic package using NuGet or the dotnet CLI, please add the following individual Ext.Net related configurations within your projects Startup.cs file:

using Ext.Net; // <-- include using statement

namespace Demo1
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();

            // 1. Register Ext.NET services
            services.AddExtNet();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            // 2. Serve Ext.NET resources
            //    To be added prior to app.UseStaticFiles()
            app.UseExtStaticFiles();

            app.UseStaticFiles();

            app.UseRouting();

            // 3. Ext.NET middleware
            //    To be added prior to app.UseEndpoints()
            app.UseExtNet(new ExtMiddlewareCfg
            {
                FallbackToStreamRender = true,
            });

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapRazorPages();
            });
        }
    }
}

Your projects _ViewImports.cshtml file requires the addition of a few items as well.

@using Ext.Net
@using Ext.Net.HtmlHelpers

@addTagHelper Ext.Net.TagHelpers.*, Ext.Net
@addTagHelper Ext.Net.TagHelpers.*, Ext.Net.Core

Once installed, you should now have access to all Ext.NET components, full API, and Intellisense.

Try adding a simple <ext-button> to a page:

<ext-button text="Click Me!" handler="alert('Hello, world')" />

Upgrading from Legacy

Upgrading to ASP.NET Core from an older WebForms or MVC app is not a drop-in replacement. The ASP.NET architectures are quite different, but at the same time, much remains the same.

One obvious problem is WebForms, which is not supported by Microsoft in ASP.NET Core. That said, the new TagHelper component syntax can be very similar to WebForms markup, and in many scenarios, the old WebForms markup can be dropped into a new ASP.NET Core app with very minimal changes.

Let's work our way through a few basic samples demonstrating upgrading WebForms markup to TagHelpers.

Simple Button

// Ext.NET Legacy 5.1 – WebForms
<ext:Button ID="Button1" runat="server" Text="Submit" />

// Ext.NET Classic 7.0 – TagHelper
<ext-Button ID="Button1" Text="Submit" />

What's required?

1. Replace tag prefix ext: with ext-
2. Remove runat="server" YAY, finally!!

The component tags and attributes are case-insensitive, so the following all-lowercase version functions the same as the sample above.

<ext-button id="Button1" text="Submit" />

Simple Panel with Items

Panel components are equally as simple to port from WebForms. The following sample demonstrates a basic scenario:

// Ext.NET Legacy 5.1 – WebForms
<ext:Panel Title="Parent Panel" Height="185" Width="350">
    <Items>
        <ext:Panel Title="Child Panel">
    </Items>
</ext:Panel>

// Ext.NET Classic 7.0 – TagHelper
<ext-panel title="Parent Panel" height="185" width="350">
    <items>
        <ext-panel title="Child Panel" />
    </items>
</ext-panel>

Okay, let's step it up a bit and configure a GridPanel (source).

// Ext.NET Legacy 5.1 – WebForms
<ext:GridPanel runat="server" Title="Array Grid" Width="700" Height="350">
    <Store>
        <ext:Store ID="Store1" runat="server">
            <Model>
                <ext:Model runat="server">
                    <Fields>
                        <ext:ModelField Name="company" />
                        <ext:ModelField Name="price" Type="Float" />
                        <ext:ModelField Name="change" Type="Float" />
                        <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </Store>
    <ColumnModel>
        <Columns>
            <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
            <ext:Column runat="server" Text="Price" DataIndex="price" />
            <ext:Column runat="server" Text="Change" DataIndex="change" />
            <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="120" />
        </Columns>
    </ColumnModel>
</ext:GridPanel>

Upgrading to Razor Pages and the new TagHelper component syntax is clean and quick for Ext.NET Classic.

// Ext.NET Classic 7.0
<ext-gridpanel title="Array Grid" width="700" height="350">
    <store>
        <ext-store data="Model.Data">
            <fields>
                <ext-dataField name="company" />
                <ext-numberDataField name="price" />
                <ext-numberDataField name="change" />
                <ext-dateDataField name="lastChange" dateFormat="M/d hh:mmtt" />
            </fields>
        </ext-store>
    </store>
    <columns>
        <ext-column text="Company" dataIndex="company" flex="1" />
        <ext-column text="Price" dataIndex="price" />
        <ext-column text="Change" dataIndex="change" />
        <ext-column text="Last Updated" dataIndex="lastChange" width="120" />
    </columns>
</ext-gridpanel>

Missing bits

The current 7.0.0-preview1 release is missing some significant pieces of functionality, and include the following:

Direct

Each of the items above is our highest priority and we are iterating rapidly. We expect to provide full support for the features above within the coming preview releases.

Ext.NET Legacy getting some love

Through our recent work, we have isolated and identified several key performance issues with the old Ext.NET Legacy runtime and will be turning our attention to improving very soon.

We feel there are some easy fixes and significant performance improvements should be possible.

A strong commitment to supporting Ext.NET Legacy has been made and Legacy will continue to receive updates, including new features, performance enhancements, and bug fixes for at least the next two years.

Feedback

Please keep in mind, this current release is a preview only and there are rough edges. We wanted to get 7.0.0 into your hands as early as possible for you to test locally, provide your feedback, and to drive the direction of future releases.

The all-new Ext.NET is iterating quickly and we anticipate fresh new releases every 1-2 weeks. It's difficult to predict exactly when the final 7.0.0 release will be available, but we will not be releasing until it's ready.

Feel free to contact us anytime on the Ext.NETForums, Facebook , Twitter or email us at [email protected] .

If you have technical support questions, the best way to get in touch is by posting your questions in the Ext.NETForums. 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 discussion in the future.

Thanks everyone!

COVID-19

The Ext.NET team were self-isolators long before it was the globally trendy thing to do.

Our distributed team of developers (and their families) in Canada, Turkey, Russia, and Brazil have all been well prepared and taking extra precautions since early March 2020. No disruptions to service or the Ext.NET release cycle are expected.

We're wishing the Ext.NET community and everyone around the world all the best while we all collectively work our way through with this mess.

Stay safe. #masks4all