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.
Update: Check out the Preview2 announcement.
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 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 from NuGet or other options directly from the Ext.NET website.
NuGet
Install-Package Ext.NET.Classic -Version 7.0.0-preview1
dotnet CLI
dotnet add package Ext.NET.Classic --version 7.0.0-preview1
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 is available 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. 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; // <-- 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:
- Limited support for Ext.NET
Direct, but we're working on this right now - Charts are missing but should be available soon
- No Icon support yet, but coming soon
- Missing Ext.NET UX components, expected soon
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.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 everyone!