👏 NEW 👏 Ext.NET 7.0 for ASP.NET Core

Posted on 2020-10-08 by Geoffrey McGill in News

The official Ext.NET Classic for ASP.NET Core version 7.0.0 GA has been released and is now available for download, or see the setup instructions.

UPDATE: Version 7.1.0 now available!

This release has been years in the making and represents a significant long-term investment and commitment by the entire Ext.NET team. We started from scratch with a totally new engine built on .NET Core 3.1 and a meticulous focus on performance. We are all incredibly proud of the new Ext.NET. 🙌

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 setup section ⬇ for instructions.

Key items within this announcement include:

Ext.NET Classic 7.0.0 Now Available
New Spotless Premium Theme
New Examples Explorer
API Documentation Coming Soon
Setup Instructions

Be sure to also check out the previous Ext.NET v7 preview release announcements, including preview1, preview2, preview3, and preview4.

Ext.NET Classic 7.0.0 Now Available 🎉🎉

Where do I start? There's so much to talk about with the new Ext.NET 7.0.0 for ASP.NET Core. Let's dive into some highlights.

TagHelpers for markup

TagHelpers are the new markup style for configuring components with ASP.NET Core web applications.

Within the old Ext.NET Legacy for WebForms, developers would configure WebControls. Remember the runat="server" attribute? yep, that's thankfully gone now.

In Ext.NET Classic, developers use a very similar but cleaner TagHelper syntax. TagHelpers look almost identical to JavaScript WebComponents but are much much MUCH more powerful because they pair the client-side flexibility of WebComponents with insane power and performance of server-side .NET Core.

Here's the old and new Button components for comparison:


// Old Ext.NET Legacy for WebForms
<ext:Button runat="server" Text="Submit" />

// New Ext.NET Classic TagHelpers
<ext-button text="Submit" />

We've put an enormous effort into making the TagHelper component structure within Ext.NET the most elegant, powerful, sophisticated, and well designed TagHelper library available for ASP.NET Core. Full stop. Nothing we've seen comes within a country mile of being close to the quality of Ext.NET Classic. Bold statements? yes, but they're factual.

And... we're certainly not done with TagHelpers yet. New features and enhancements are being added daily.

⚡ DirectEvents ⚡

Simplified client-to-server communication has always been a foundational feature of Ext.NET. By using Ext.NET DirectEvents, developers can easily hook into an event triggered on the client and seamlessly call a server-side event handler.

With the all-new Ext.NET Classic for ASP.NET Core, we once again focused on making the configuration as clean (yet powerful) as possible while also significantly improving performance.

The following sample demonstrates a simple Button which when clicked will call a server-side event handler written in C#, which then returns the time on the server back to the web browser.

No client-side JavaScript or manually wiring up an AJAX call is required.

Client-side Button


<ext-button text="Get Time" onDirectClick="GetTime" />

Server-side C#


// Return the current server time
public IActionResult OnPostGetTime()
{
    var msg = DateTime.Now.ToLongTimeString()

    this.X().Toast(msg);

    return this.Direct();
}

Check out the dynamic GridPanel creation sample where an entire GridPanel with data is created dynamically on the server within a Button click DirectEvent handler and returned to the client web browser, all within milliseconds using only C#.

The power and flexibility of Ext.NET DirectEvents are limitless.

Cross-platform support

.NET Core Building ASP.NET web apps on a Mac or Linux using VS Code continues to amaze us every time. Even our dev team is now spread across Mac OS, Linux, and Windows, plus a variety of IDE's.

Ext.NET Classic never gets in the way and you now have total flexibility to use the OS, IDE, and build system of your choice.

Prefer to use the command-line dotnet tools and VS Code on a Linux vm? No problemo

On an iMac and Visual Studio for Mac is your tool of choice? yep, that's supported too

VS Code for Mac or Windows or Linux, Visual Studio, Visual Studio for Mac, dotnet command-line... the choice is yours when using Ext.NET Classic for ASP.NET Core.

New Premium Theme

We wanted to showcase the power of Ext JS theming and with the launch of Ext.NET Classic, it was perfect timing to include a fresh new theme.

Introducing Spotless Theme by Ext.NET. Spotless theme component collage

Spotless is a premium theme built to fully support Sencha Ext JS Classic and Ext.NET Classic v7+ applications.

Spotless is also professionally supported by the Ext.NET team with a new dedicated Premium Themes forum for community technical support and questions. We would love to see a screen capture of your app on Spotless!

Spotless theme component collage Instantly modernize your app using Spotless and new features including:

Fresh new modern app styling
Drop-in replacement for older themes
8 new UI styles
Includes 1317 new Material Design icons
New rounded and borderRadius configs for all Components
New fill config on Panel
Improved user-experience across all components
Professionally supported by the friendly and hard-working team at Ext.NET

Ext.NET Classic now uses Spotless as the default theme in all templates. For instance, running the command dotnet new extnet creates a basic Ext.NET Web Application with Spotless pre-installed and ready to go. See setup instructions below for tips on getting started with Ext.NET in minutes.

The Spotless premium theme is FREE for Ext.NET applications or only ~~$249~~ $199 per developer for Ext JS only applications. See pricing.

Knock the socks off your users by adding Spotless to your app!

New Examples Explorer

The Examples Explorer has been upgraded to Ext.NET Classic 7.0 and given a fresh new coat of paint. Check it out...

In the previous v5 Examples Explorer we had almost 600 separate WebForm samples demonstrating nearly every feature of Ext.NET. Each of those samples is being individually reviewed, improved, and upgraded to Ext.NET Classic 7.0. This will take some time for the team to chew our way through all the old samples, but we're making quick progress and samples are being added daily.

Are you stuck and would like a specific sample or functionality demonstrated? Request in the forums and we will do our best to assist.

API documentation Coming Soon

An all-new Ext.NET documentation app featuring API docs and Guides is coming soon. We tried our best to have the new docs app available for this 7.0.0 release, but there is still some work to do, and we didn't want to delay the launch of 7.0.0 any further.

Be assured, new docs are coming soon. 🤞

Here's a sneak peek at the new app...

Ext.NET docs

We're super excited about the new docs app and cannot wait to share it with everyone.

Three Ext.NET editions

There are now three separate editions of Ext.NET, Legacy, Modern (coming soon), and Classic.

Which Ext.NET edition to choose?

If you are starting a new ASP.NET Core project today, choose Ext.NET Classic.

Ext.NET Modern will be very similar to Classic but is focused on creating responsive web applications that run across all devices, from phones to tablets to desktop web browsers. Whereas Classic is primarily targeted to desktop web browser-based applications. A similar set of UI components will be 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 v5 but is built on a completely new ASP.NET Core 3.1 architecture.

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.

Setup Instructions

UPDATE: A new detailed installation guide is available.

There are several options for quickly creating new projects with Ext.NET templates or adding Ext.NET to your project:

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

We'll run through each of these setup techniques, although which to choose will depend on your requirements. We use the `dotnet` command-line tools and Ext.NET Templates almost exclusively, so it would be our recommendation to start with either of the first two options detailed below.

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 the localhost webserver is 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 your new Ext.NET web app should be 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. A few clicks and the new project templates will be available.

Add Ext.NET to your project using NuGet

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

NuGet

Install-Package Ext.NET.Classic

dotnet CLI

dotnet add package Ext.NET.Classic

Check out the download page for links to all installation options and previous releases.

Feedback

Have you ever reached a finish line and realize that goal was just the beginning? It feels great to finally get the new Ext.NET released into the wild, but we're certainly not slowing down.

Several hot 🌶️ new projects are kicking off and we'll have announcements soon. Development of Ext.NET Classic v7 continues to iterate quickly and we anticipate fresh new releases monthly.

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 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!