Razor MVC Model is a good practice for working in code behind?

  1. #1

    Razor MVC Model is a good practice for working in code behind?

    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
  2. #2
    The new 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.
  3. #3
    We have a new docs project 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 guide contains similar setup instructions to the preview2 blog post announcement.
  4. #4
    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.

Similar Threads

  1. Replies: 2
    Last Post: Jun 20, 2014, 9:58 AM
  2. [CLOSED] Change the Checkbox selection model (MVC Razor)
    By ATLAS in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 04, 2013, 4:18 AM
  3. [CLOSED] [Razor] Using Model in MVC View
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 02, 2012, 4:38 PM
  4. Desktop : Good practice
    By Yannis in forum 1.x Help
    Replies: 5
    Last Post: Mar 30, 2012, 10:32 AM
  5. Replies: 3
    Last Post: Feb 21, 2012, 7:46 AM

Posting Permissions