How can we pass data from orchard-module's view-model to orchard theme?

[tanmayidev]

I need to pass data from orchard-module's view-model to orchard theme. There are multiple themes and view-model.
In my example, I have multiple applications for which landing pages will be served from orchard and the remaining pages are part of the application, so I need to create a controller which can pass data and create interactivity between this.

What are the ways I can accomplish this?

[Piedone]

A theme is an extension that manages the look and feel of an Orchard Core site, by providing Razor or Liquid templates, CSS, JS files, and everything else. Modules can do the exact same thing as well (though themes are special that they override templates coming from any module).

So, how you pass data from a "module's view model to a theme" is by simply following standard ASP.NET Core MVC practices (this is not unique to Orchard), and in your module, build your controller action, pass a viewmodel from it to a view, and as a baseline, you can have the corresponding view in the module too. Then, if you want to override from a theme how this view is displayed (because e.g. you run multiple sites either independently, or as multiple tenants, from the same source code), you can put a conventionally named template file into the themes Views folder, and it'll take effect. It'll behave exactly like if it were in the module, so you'll be able to access the viewmodel from it.

See the docs for more info: https://docs.orchardcore.net/en/latest/docs/reference/modules/Templates/#overriding-views

If you're new to theming in general, check out these resources too:

• https://docs.orchardcore.net/en/latest/docs/reference/modules/Themes/
• https://docs.orchardcore.net/en/latest/docs/getting-started/theme/
• https://www.youtube.com/watch?v=yMzqwvr6Lgo&list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO&index=6
• https://www.youtube.com/watch?v=43rUSR-TwO4&list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO&index=20
• https://www.youtube.com/watch?v=yDtUyQpormU&list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO&index=21
• https://www.youtube.com/watch?v=8Hm9HeZMsDA&list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO&index=22
• https://www.youtube.com/watch?v=bwFH-C18rrA&list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO&index=23
• https://www.youtube.com/watch?v=pfPkPH7PN5w&list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO
• https://www.youtube.com/watch?v=jlv60tte8UE&list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO
• https://www.youtube.com/watch?v=YR8QzyAEgo4&list=PLuskKJW0FhJcSX7j0Bd-1X5hq3dgCtYwO&index=26

[tanmayidev]

Thank you

[hishamco]

In addition to what Zoltan said before you can make use of DI, by injecting your services from one module and get them from another module, again nothing special to OC here

FYI you can have a look to OC code base of how the modules interact with each other

[ns8482e]

If I understand your question correctly, you are creating some ViewModel in your MVC controller that you need to use within your Layout.

The best choice is to use zones in your Layout and add your ViewModel using ShapeViewModel<T> and place at your zone using placement.

[tanmayidev]

1. I have an Orchard module named MyTestPart. Which has a property called EssentialData in it's view-model(MyTestPartViewModel). EssentialData is set in the DisplayDriver of the aforementioned module.

2. I've created a Content-Part called Welcome-Page which has a ViewLayout called CustomLayout and where I'm calling the MyTestPart using DisplayAsync(Model.Content). I could access the EssentialData property from MyTestPartViewModel using Model.Content.Items

3. CustomLayout contains the HTML document wherein which I need to add meta-data which is a part of EssentialData property. I tried using @inject MyTestPartViewModel but the EssentialData property was null.

The reason why I'm using Welcome-Page is to have orchard-users to contribute data through the Admin-Dashboard and I can capture it using Model.ContentItem in Content-WelcomePage.cshtml in my theme

How do I go about bringing EssentialData property into CustomLayout?

@ns8482e @hishamco @Piedone

[Piedone]

Please check out the tutorials I linked above. You'll need to display the part's shape in the layout.

[ns8482e]

@tanmayidev as I replied earlier, you should utilize zones and placement in your CustomLayout.

EssentialData is available in Model.Content.Items I guess because bydefault your part driver is placing the shape in Content zone.

You can change the zone placement either using display driver or placement.json.

eg if you place your ViewModel shape at HeadMeta then the shape will be placed at Model.HeadMeta.Items. In your custom layout you can define HeadMeta section and render ViewModel shape there.

[tanmayidev]

MyTestPartDisplayDriver:

MyTestPart.cshtml

Content-WelcomePage.cshtml:

Layout-Content-WelcomePage.cshtml

Output

Calling the shape directly from the Layout-Content-WelcomePage:

Internal server error due to directly displaying shape in Layout-Content-WelcomePage

I tried displaying shape from layout after modifying the displaydriver with the "layout" location. Still I'm facing 2 issues, if I use @await DisplayAsync(await New.MyTestPart()) I face internal server error. And if I use @await DisplayAsync(Model.Content) I get the output with the blue background.

But in none of these scenarios, I'm able to access the ViewModel of MyTestPart in the Layout-Content-WelcomePage.cshtml. Since I'm using ViewLayout to provide reference to the appropriate layout, a probable reason for this erroneous behaviour?

@Piedone @hishamco @ns8482e @grexican

[Piedone]

It seems to me that when you follow how the display of content item/part shapes work, it works as it should. If you want to display shapes directly, i.e. then for that look up "ad-hoc shape" in the Training Demo.

[ns8482e]

In display driver, you defined three locations. First Location("Layout") is only used when display type is neither Summary nor Detail. As you are also providing second and third location for specific display type ie Detail and Summary.

Here when MyTestPart display is built using Detail display type, the shape for MyTestPartViewModel is placed at Content as per location defined in driver. Hence you can see the shape within Model.Content.Items when you debug.

Solution is to keep only Location("/Layout") in your driver's code and remove line 32 and 33. This will always place shape for MyTestPartViewModel at Site's Layout that you can render in Layout-Content-WelcomePage.cshtml using RenderSectionAsync

[tanmayidev]

I get an empty object from Model.Layout. Is it possible that I've referenced Layout-Content-WelcomePage from Content-WelcomePage as ViewLayout instead of Layout

[ns8482e]

No - ViewLayout should be fine.

I believe you should use RenderSectionAsync in your Layout.

I also suggest to change location(section) name to use something else than Layout

Eg set location in driver to Location("/SomeSection") and in your Layout render as below

@await RenderSectionAsync("SomeSection", required: false)

[ns8482e]

Updated the answer - to reflect correct location - for placing shape to Layout's section use /SomeSection in driver that will place the shape to Layout

[tanmayidev]

Thanks!
It is working (Model.SomeSection is returning not null and I am able to display it). However, Model.SomeSection doesn't contain any ViewModel data.

[ns8482e]

Use @await RenderSectionAsync("SomeSection", required: false) in layout view