PDA

View Full Version : Razor MVC Model is a good practice for working in code behind?



bbros
May 01, 2020, 6: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

geoffrey.mcgill
May 01, 2020, 7:43 PM
The new Ext.NET 7.0 Preview2 for ASP.NET Core (https://ext.net/ext-net-7-0-preview2-for-asp-net-core/) blog post can help with some of the 7.0.0-preview2 setup details.

The namespace and Startup.cs adjustments that were made between preview1 > preview2 should be fairly locked-in now and I don't anticipate any major changes.

The Ext.Net.Core namespace is shared between Ext.Net.Classic and Ext.Net.Modern. In general, I would say it's best to reference both the Ext.Net and Ext.Net.Core namespaces. Just including both using statements could help avoid issues.


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


Looks like the following can be simplified:


Action<ExtMiddlewareConfig> MiddlewareConfigAction = (cfg) =>{
cfg.FallbackToStreamRender = false;
};
app.UseExtNet(MiddlewareConfigAction);

Simplified to:


app.UseExtNet(config =>{
config.Theme = ThemeKind.Triton;
});

I tried your Index.cshtml sample and model and it worked for me. I'll try and step through a project setup exactly as you have it configured.

Nice job with the summary.

geoffrey.mcgill
May 01, 2020, 7:48 PM
We have a new docs project (https://github.com/extnet/docs) and soon to launch a completely new https://docs.ext.net website (still the old site for now). The new docs will contain guides and the entire API documentation for Ext.NET.

The Configuration (https://github.com/extnet/docs/blob/master/guides/Configuration.md) guide contains similar setup instructions to the preview2 blog post (https://ext.net/ext-net-7-0-preview2-for-asp-net-core/) announcement.

bbros
May 02, 2020, 3:57 PM
ok thank you.
I started a new project again, this time I choose the "Web Application" without MVC in visual studio and it works.
I'll investigate the reasons, but it is not a problem since I don't need to port any project right now.