Custom theme and Content Item (Content Type): how to manage Razor view and model

[MarGraz]

Hi,

A newbie question here 😊

I'm working on a custom theme for my OrchardCore demo. I started with the "Blank recipe" for a clean setup.

Next, I created a custom theme following this guide and added the reference to the Web App project. I didn't create a module as explained here because I only needed a custom theme, and it wasn't mentioned as mandatory step.

I added a Layout.cshtml and a _ViewImports.cshtml file, following "TheTheme" theme project that use Razor. I removed unnecessary or non-functional code. Then, I enabled my theme and set it as "current" from the "Admin" panel. I created a "Content Type" named Home Page with a technical name Index, adding Title, Autoroute, and MarkdownBody as "Content Parts".

What I'm supposed to do is create a Razor view named Index.cshtml in the "Views" folder of my theme, and use the "model" created on the UI admin side, and see my view rendered within the Layout.cshtml.

1. How do I make this work? Using @model ContentItem; in my Index view doesn't seem to work, and the view isn't hit when I visit the page directly;
2. I tried renaming the view to Content-Index.cshtml, but that didn't work either;
3. Do I need to define a model "Index" in a "Models" folder in my theme project? If I do this, when I change the model from the UI, the changes are not automatically applied to my class.

I've looked through the Themes guide and the Templates guide, but I'm still confused 🤯

Thanks for any help

[hishamco]

Your view should be displayed if it's served by a controller otherwise, you could place it inside the Pages folder with a directive @page at the first line, then you can hit the page by it's name

[MarGraz]

Thank you for your reply.

Ok, I will try both, and how can I use the model created in the UI inside my Index.cshtml?

Is it correct to use @model ContentItem, or is there another way to use a typed object instead of a dynamic?

Of course, my goal is to use the model created in the UI and automatically update it.

Thank you

[hishamco]

Is it correct to use @model ContentItem, or is there another way to use a typed object instead of a dynamic?

You can if your controller will provide a ContentItem to the view. Also, you could use the OrchardHelper to get a content item without specifying the model

https://docs.orchardcore.net/en/latest/docs/reference/modules/Contents/#razor-helper

[MarGraz]

And instead to specify the model, is there a way to get the same model created in the UI? Orchard Core create the class (.cs file) in a folder inside my Web App?

Or I need to map it in a model, that I create inside a "Models" folder in my theme project?

Thank you for your help 🙏

[hishamco]

Could you please clarify?

[MarGraz]

I suppose that Orchard Core will create and store somewhere in the Web App project, the Index Content Item class I have created in the admin UI.
Is there a way to use that model if exists?

If I prefer to use a model instead of a dynamic object, should I create an Index model in my theme (in a "Models" folder), and map the ContentItem into it?

[MarGraz]

@hishamco in the end the question is: instead of using a dynamic object, is it possible to utilize the same model generated by Orchard Core? Because otherwise I need to map the dynamic model on a model created by me, in the Theme project. However, every time there's a change made from the Admin panel, I also need to update the mapped model 🤔

So, what are the best practices and how I can avoid using dynamic models and use the model coming from the Admin panel? I want to use a typed model if possible.

Remember that I'm a newbie, so I'm trying to understand the best practice to use. Usually I always avoid to use dynamics, so this is why I'm asking this 😊

Update:

For what I saw in the "OrchardCore.Demo" project, the right way to work with a typed object, is to map the dynamic one in a Model inside the Module/Theme. There's no way to get the Type made in the Admin page without mapping it, right?

using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using OrchardCore.Demo.Models;
using OrchardCore.Demo.ViewModels;
using YesSql;

namespace OrchardCore.Demo.Controllers
{
    public class TodoController : Controller
    {
        private readonly ISession _session;
        private readonly Entities.IIdGenerator _idGenerator;

        public TodoController(ISession session, Entities.IIdGenerator idGenerator)
        {
            _session = session;
            _idGenerator = idGenerator;
        }

        public async Task<IActionResult> Index()
        {
            var list = (await _session.Query<TodoModel>().ListAsync())
                .Select(m => new TodoViewModel()
                {
                    TodoId = m.TodoId,
                    Text = m.Text,
                    DueDate = m.DueDate,
                    IsCompleted = m.IsCompleted,
                })
                .ToList();

            return View(list);
        }
        
        [...]

[hishamco]

Because the content type fields are created dynamically, so the dynamic nature here is suited IMHO, that's why you need to re-map your model if you change the content type definition

[MarGraz]

The issue with the controller not being hit was due to a missing mapping in the Startup.cs file of my theme project. The automatic Orchard template doesn't generate a Startup file by default, so I added one myself. Inspired by the OrchardCore.Demo module, which you can see here, I included the following route mapping, and it resolved the issue:

public class Startup : StartupBase
{
    public override void Configure(IApplicationBuilder builder, IEndpointRouteBuilder routes, IServiceProvider serviceProvider)
    {
        routes.MapAreaControllerRoute(
            name: "MySite.Home.Index", // Choose a name for this route
            areaName: "MySite.OrchardCore", // Insert your theme project path
            pattern: "/", // In this way, the Home controller > Index Action, is hit when visiting the base URL
            defaults: new { controller = "Home", action = "Index" }
        );
    }

    public override void ConfigureServices(IServiceCollection services)
    {
    }
}

Regarding model mapping, as @hishamco commented here, Orchard Core always creates Content Types dynamically. If you need a model, you can create a Models folder in your theme project, and add your view model there. Instead, for retrieving a content item using its alias, you can find more information in this discussion.

Thank you