bbros
May 01, 2020, 5:01 PM
I tried to apply a Razor MVC Model to a page in order to work in code behind.
I don't know if this is a good practice or even if you are projecting Ext.Core for this approach.
Consider this as an open thread.
For anyone is reading, this code does not work, so don't copy and paste it as is.
I created a new ASP.NET Core project using Visual Studio 2019 v16.5.4.
ASP.NET Core version is 3.1.4.
Web Application (MVC) enabling Razor runtime compilation
Razor version is 3.1.3
Added the nuget package for Ext.Net 7 Classic preview 2
Preview 2 version is different from the 1st; you changed the namespace from Ext.Net to Ext.Net.Core and some method is different.
So I follow your Project Setup guide https://ext.net/v7-0-preview-for-asp-net-core/ modifying some lines.
I added comments to highlight what I changed.
Ext.Net 7 preview 2 configuration steps
Startup.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Ext.Net.Core; // <-- include using statement, modified from preview 1 adding .Core
namespace RazorExt
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddRazorPages(); // Added for razor
// 1. Register Ext.NET services
services.AddExtNet();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
// 2. Serve Ext.NET resources
// To be added prior to app.UseStaticFiles()
// Help! in Preview 2 is missing app.UseExtStaticFiles(); is it still important?
app.UseExtNetResources(); // I found this method, is this correct? :)
app.UseStaticFiles();
app.UseRouting();
// 3. Ext.NET middleware
// To be added prior to app.UseEndpoints()
// Completely different from preview 1, let me know if it is the correct way
Action<ExtMiddlewareConfig> MiddlewareConfigAction = (cfg) =>
{
cfg.FallbackToStreamRender = false;
};
app.UseExtNet(MiddlewareConfigAction);
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers(); // Added this line
endpoints.MapRazorPages(); // Added this line
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
}
}
_ViewImports.cshtml
@using RazorExt
@using RazorExt.Models
@using Ext.Net.Core.HtmlHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper Ext.Net.Core.TagHelpers.*, Ext.Net
@addTagHelper Ext.Net.Core.TagHelpers.*, Ext.Net.Core
In the sample project there is already a home page
I created a Model for the page
Added a Folder inside Models called Home
Added a class Index.cs
Models\Home\Index.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Ext.Net;
namespace RazorExt.Models.Home
{
public class IndexModel : PageModel
{
public Container Sample { get; set; }
public void OnGet()
{
Sample = new Container()
{
Items =
{
new Button() { Text = "Click me (model)" }
}
};
}
}
}
Then I edited the existing home page.
Views\Home\Index.cshtml
@page
@model RazorExt.Models.Home.IndexModel
@{
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
<ext-container model="Model.Sample" />
<ext-button text="Click me">
<listeners>
<click handler="alert('Hello, world')" />
</listeners>
</ext-button>
</div>
Model is null and crashes
Which is the way?
Am I far from the goal?
Am I near to a goat as MVC developer? :O
I don't know if this is a good practice or even if you are projecting Ext.Core for this approach.
Consider this as an open thread.
For anyone is reading, this code does not work, so don't copy and paste it as is.
I created a new ASP.NET Core project using Visual Studio 2019 v16.5.4.
ASP.NET Core version is 3.1.4.
Web Application (MVC) enabling Razor runtime compilation
Razor version is 3.1.3
Added the nuget package for Ext.Net 7 Classic preview 2
Preview 2 version is different from the 1st; you changed the namespace from Ext.Net to Ext.Net.Core and some method is different.
So I follow your Project Setup guide https://ext.net/v7-0-preview-for-asp-net-core/ modifying some lines.
I added comments to highlight what I changed.
Ext.Net 7 preview 2 configuration steps
Startup.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Ext.Net.Core; // <-- include using statement, modified from preview 1 adding .Core
namespace RazorExt
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddRazorPages(); // Added for razor
// 1. Register Ext.NET services
services.AddExtNet();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
// 2. Serve Ext.NET resources
// To be added prior to app.UseStaticFiles()
// Help! in Preview 2 is missing app.UseExtStaticFiles(); is it still important?
app.UseExtNetResources(); // I found this method, is this correct? :)
app.UseStaticFiles();
app.UseRouting();
// 3. Ext.NET middleware
// To be added prior to app.UseEndpoints()
// Completely different from preview 1, let me know if it is the correct way
Action<ExtMiddlewareConfig> MiddlewareConfigAction = (cfg) =>
{
cfg.FallbackToStreamRender = false;
};
app.UseExtNet(MiddlewareConfigAction);
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers(); // Added this line
endpoints.MapRazorPages(); // Added this line
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
}
}
_ViewImports.cshtml
@using RazorExt
@using RazorExt.Models
@using Ext.Net.Core.HtmlHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper Ext.Net.Core.TagHelpers.*, Ext.Net
@addTagHelper Ext.Net.Core.TagHelpers.*, Ext.Net.Core
In the sample project there is already a home page
I created a Model for the page
Added a Folder inside Models called Home
Added a class Index.cs
Models\Home\Index.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Ext.Net;
namespace RazorExt.Models.Home
{
public class IndexModel : PageModel
{
public Container Sample { get; set; }
public void OnGet()
{
Sample = new Container()
{
Items =
{
new Button() { Text = "Click me (model)" }
}
};
}
}
}
Then I edited the existing home page.
Views\Home\Index.cshtml
@page
@model RazorExt.Models.Home.IndexModel
@{
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
<ext-container model="Model.Sample" />
<ext-button text="Click me">
<listeners>
<click handler="alert('Hello, world')" />
</listeners>
</ext-button>
</div>
Model is null and crashes
Which is the way?
Am I far from the goal?
Am I near to a goat as MVC developer? :O