C1 Asp.Net Core MVC areas not working with FlexGrid

Posted by: mattindustry on 8 September 2017, 11:19 pm EST

    • Post Options:
    • Link

    Posted 8 September 2017, 11:19 pm EST

    Hi,

    When I add an area to my asp.net core MVC application, Flexgrid does not render.

    Steps to reproduce:

    1. Create a new C1 Asp.Net Core MVC Application (.NET Core) project using default template settings

    2. Add a new folder called Areas to the project

    3. Create a sub-folder called TestArea and sub folders for Controllers, Models and Views

    4. Under the created Views folder, copy and paste _ViewImports.cshtml and _ViewStart.cshtml from the root Views folder of the project

    5. Add a simple model class:

    [csharp]

    public class TestModel

    {

    public string Prop1 { get; set; }

    public string Prop2 { get; set; }

    }

    [/csharp]

    1. Add a new controller called TestController to the Areas\TestArea\Controllers folder
    2. Add the attribute [Area(“TestArea”)] to the TestController class definition
    3. Modify Startup.cs and include the following route convention:

    [csharp]

    routes.MapRoute(name: “areaRoute”,

    template: “{area:exists}/{controller=Home}/{action=Index}”);

    [/csharp]

    1. In the Index action of the TestController class, instantiate a List to pass to the view:

    [csharp]

    List model = new List

    {

    new TestModel() { Prop1 = ‘Test Value’, Prop2 = ‘Test Value 2’ }

    };

    return View(model);

    [/csharp]

    1. Create a folder under Areas\TestArea\Views called Test and add an Index.cshtml file with the following code:
    
    @model IEnumerable<C1MvcApplication.Areas.TestArea.Models.TestModel>
    
    <c1-flex-grid id="flexgrid" is-read-only="true" height="800px">
    <c1-items-source source-collection="Model"></c1-items-source>
    </c1-flex-grid>
    
    
    1. Run the application and navigate to /TestArea/Test and note that ASP.NET routes correctly to the area/controller/action/ and renders the corresponding view but does not render the flexgrid. Inspecting the DOM shows that the markup for the flexgrid is present, however it does not display.

    Modifying the above steps to move the Controller, Model, and Views outside of the area and placing them in the corresponding folders in the root of the project, the flexgrid renders with the sample data populated.

    Could someone please explain why this is the case and if there is a workaround for the above to get the FlexGrid to correctly render in MVC Areas?

    Thanks :slight_smile:

  • Posted 8 September 2017, 11:19 pm EST

    Hi Matthew,

    I cannot reproduce it with 1.0.20171.114.Could you please attach a sample project.

  • Posted 8 September 2017, 11:19 pm EST

    Hi Sean,

    I can reproduce this. In the attached sample when you switch routes you can see that the controls are not visible when Areas are used.

    I think it has something to do with Registering Resources. See the attached image(The generated C1WebMvc\WebResources are empty). Also, inspecting via console I get an error: “c1 is not defined”.

    Perhaps I and Matthew both are doing something incorrect.

    ~nilay

    2017/05/C1FlexGridWithASPNetCore_reproduced.zip

  • Posted 8 September 2017, 11:19 pm EST

    Hi Matthew/Sean,

    Adding both the routes resolved this issue:

    
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=home}/{action=index}/{id?}");
        routes.MapRoute(
            name: "areaRoute",
            template: "{area:exists}/{controller=Home}/{action=Index}");
    });
    
    

    ~nilay

    PS: If this issue is not resolved using the above method, please comment/share your sample.

  • Posted 30 January 2018, 12:37 pm EST

    I am having this same problem with using the MVC controls in Core 2.0 with Areas, the path for the C1WebMvc/WebResources is using the Area in the path and it fails.

    This is my routing:

      app.UseMvc(routes =>
      {
        routes.MapRoute(
          name: "area",
          template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    
      });
    

    If you don’t put these routes in in the order above, it breaks the area processing for other functions like Url.Action. So even then when the C1 stuff works, you can’t properly create a URL with Url.Action or even with the asp- taghelpers.

    It doesn’t matter where the c1-scripts taghelper is located, the problem happens based on the location of the view that the controls are used on.

    Please advise. I am using the C1.AspNetCore.Mvc version 1.0.20173.143

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels