Ext.NET 7.0 Preview2 for ASP.NET Core

Development of Ext.NET 7.0 for ASP.NET Core has been progressing rapidly and the 7.0.0-preview2 release is now available. See the preview1 announcement for additional details on Ext.NET 7.0 for ASP.NET Core.

Key new features in preview2 include:

• Ten Themes now supported as separate NuGet packages
• New Ext.NET [Direct] for seamless client-to-server communication
• Built-in CSRF threat mitigation based on anti-forgery token validation

Installation

The new release can be installed from NuGet or other options directly from the Ext.NET website.

NuGet

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

dotnet CLI

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

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. See pricing.

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 hello@object.net.

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;
using Ext.Net.Core;

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. Use Ext.NET resources
            //    To be added prior to app.UseStaticFiles()
            app.UseExtNetResources();

            app.UseStaticFiles();

            app.UseRouting();

            // 3. Ext.NET middleware
            //    To be added prior to app.UseEndpoints()
            app.UseExtNet(config =>
            {
                config.Theme = ThemeKind.Triton; // <-- NEW in preview2
            });

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

Your project _ViewImports.cshtml file requires the addition of a couple lines to enable the Ext.NET TagHelpers.

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

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

Try adding a simple <ext-button> to a page to confirm everything is configured correctly:

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

New Theme packages

Ext.NET has always provided high-quality application Themes that could be switched with a single configuration within your app. See the Component Overview sample.

Within Ext.NET Legacy, all the themes were bundled within the main Ext.NET assembly, which greatly simplified configuring your app theme, but unfortunately that increased the size of the .dll, caused longer app deployment times, longer warm-up, larger memory footprint, and to some degree prevented new Themes being added to Ext.NET.

With Ext.NET 7.0 we wanted to revisit how Themes were bundled, installed, and configured. Our primary goal was separating each theme into its own NuGet package.

Ten different theme packages are now available to easily add to your project within seconds using NuGet or the dotnet CLI.

For example, the following commands demonstrate how to add the Material theme to your project.

NuGet

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

dotnet CLI

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

Themes

The following Themes are currently available (sample) for Ext.NET Classic:

Once added to your project, you can configure which theme the application will use within Startup.cs. Just update the `Theme` config to the new kind:

app.UseExtNet(config =>
{
    // Set the app theme
    config.Theme = ThemeKind.Material;
}); 

New Ext.NET Direct

With Ext.NET Legacy, efficient and seamless client-server communication using DirectMethod and DirectEvent were core foundational features of the framework. See examples.

With Ext.NET Classic and Ext.NET Modern (coming soon), we are once again ensuring Ext.NET Direct is a core pillar of communication between the client web application and your backend server.

Let's walk through the few steps required to configure an Ext.NET Direct endpoint within your app.

Decorate your Razor PageModel class with a [DirectModel] attribute, or if building an MVC application, decorate the Controller class with a [DirectController] attribute.

Then each individual Razor Handler Method or MVC Controller Action must be explicitly exposed to the client by adding a [Direct] attribute and returning this.Direct().

The following sample demonstrates a basic configuration of a Razor PageModel where the SetTimeStamp action is converted into an Ext.NET Direct endpoint.

using System;

using Ext.Net;
using Ext.Net.Core;

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Demo1
{
    [DirectModel]
    public class IndexModel : PageModel
    {
        /// <summary>
        /// Given a Label, update with the current server timestamp.
        /// </summary>
        [Direct]
        public IActionResult OnPostSetTimeStamp(Label label)
        {
            label.Text = $"Server Time: { DateTime.Now.ToLongTimeString() }";

            return this.Direct();
        }
    }
} 

Following ASP.NET naming conventions, the SetTimeStamp action is prefixed with OnPost to specify the action is available only to HTTP POST requests.

In the View, we'll configure a simple Button to call back to the server and get an updated timestamp using Ext.NET Direct.

<ext-button text="Submit" handler="App.direct.SetTimeStamp(App.Label1)" />

<ext-label id="Label1" /> 

The OnPost prefix of the action name is not required when calling this Direct endpoint from the client.

The client-side instance of the <ext-label> component is passed back to the SetTimeStamp action, which then responds with our updated Label component values.

The entire Request and Response lifecycle from the client web browser to the server, then server back to the client is handled automatically by Ext.NET Direct.

Application security is improved by following this Opt-In policy for Ext.NET Direct. You can be assured no server-side endpoints are accidentally exposed to the client as they must be explicitly enabled by the developer.

New Cross-Site Request Forgery (CSRF) validation

Application security has been a priority focus for the team while re-engineering the new Ext.NET 7.0 for ASP.NET Core. We continue to focus on reducing security vulnerabilities and promote strong security practices for all apps.

A common web application attack uses a technique called Cross-Site Request Forgery (CSRF) where malicious code could send requests to the server that originate from an authenticated user of your app.

One defensive technique against a CSRF attack is including a unique antiforgery token with all requests, such as the new Ext.NET Direct calls back to the server.

For Ext.NET Direct requests, a token is automatically passed in the Request header by Ext.NET and the same token value is passed automatically by the web browser in the Cookie from the client to the server. On the server, these two values are compared and the request will fail if they do not match.

We recommend ASP.NET Core CSRF defence with Antiforgery for a detailed review of CSRF in ASP.NET Core applications.

Tom Scott from Computerphile also provides an excellent explanation.

In Ext.NET 7.0 for ASP.NET Core, a RequestVerificationToken is passed in all Direct requests and is now supported out of the box by default.

Feedback

Please keep in mind, this current release is a preview and there are still some rough edges.

Development on the all-new Ext.NET 7.0 is iterating quickly and we anticipate fresh new releases every few weeks. It's difficult to predict exactly when the final 7.0 release will be available, but we're working hard to bring you the release as soon as possible.

Feel free to contact us anytime on the Ext.NET Forums, Facebook, 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 discussion in the future.

Thanks!