Grid Extension Page & Script rendering

[lechu90ns]

Hey Guys!

I am struggling with rendering the script in Serenity. I looked at _layout.cshtml and I see that the PageInitScript section is placed before the render body - which makes sense because later on other scripts from RenderBody are inserted so we keep the script execution in order, but overall it is advised to always have a script at the very end of the page. Also, this is the case when we have hideNav = true, so when we have ESM scripts we do not even try to fire PageInitScript section - anyway I feel that someone in the past had a great idea of managing scripts but this was kind of lost in the way.

Anyway, I want to do it on my own so this is no problem to modify my layout. The problem is with the view in the Serenity.Extension area: ~/Areas/Serenity.Extensions/ModulePage/ModulePage.cshtml ofc I can do it on my own and copy & paste the code from Serenity.Extension to my solution and modify it there, but that is not ideal - right?

Can I suggest you guys to have this.GridPage method more configurable for this case?

• We can only choose a layout but we cannot change the view. Let's have a View property in ModulePageModel, so if its empty then let's fill with a string value from MVC static class.

Also please consider the idea of rendering the script at the bottom.

• let's have a @await RenderSectionAsync("PageInitScript", false); in the _layout.cshtml always at the bottom
  instead <script type="text/javascript"> $(function () { @RenderSection("PageInitScript", false) }); </script>
  have a
  @await RenderSectionAsync("PageInitScript", false)

• let's modify \common-features\src\Serenity.Extensions\Areas\Serenity.Extensions\ModulePage\ModulePage.cshtml with instead:
  <script type="module"> import * as imports from '@Html.ResolveWithHash(Model.Module)'; imports.default && imports.default(@(Model.Options == null ? "" : Html.Raw(JSON.Stringify(Model.Options)))); </script>

to have:
@section PageInitScript { <script type="module"> import * as imports from '@Html.ResolveWithHash(Model.Module)'; imports.default && imports.default(@(Model.Options == null ? "" : Html.Raw(JSON.Stringify(Model.Options)))); </script> }

---

I hope this makes much more sense than what it is right now. With this, it will give me much more control over how I want to get all scripts rendered on the layout.

Cheers!

[VictorTomaili]

Hello, the ModulePage.cshtml is used to avoid code duplication.
You can choose a different view and use it in the standard MVC style by passing a model to it. Alternatively, you can create your own ModulePage.cshtml in your code base and design a similar helper function to customize it as you like.
This means we cannot choose a view in the GridPage parameters, because we are not sure if the chosen view meets all the requirements.

To manage the scripts that run before and after the page loads, you can use MyModulePage.ts directly. The pages have only one div element that the script needs to populate. You can set the execution order in the export default function pageInit() function. For more complex pages, it is better to use a custom cshtml file for your module.

export default function pageInit() {
    // Execute code here before user grid created.
    initFullHeightGridPage(new UserGrid($('#GridDiv')).element);
    // Execute code here after user grid created. 
}

[lechu90ns]

Alternatively, you can create your own ModulePage.cshtml in your code base and design a similar helper function to customize it as you like.

Yeah, but this is what I wanted to avoid, I don't like to customize things because on the next update, it might be changed for any reason and I have to follow up. If I can configure the view then I am responsible for making it look good right? If that does not work, then I investigate, compare the original ModulePage.cshtml, and apply changes. That's why I would be grateful for this View property in the PageModel because it will help to customize my page.

To manage the scripts that run before and after the page loads, you can use MyModulePage.ts directly.

Thank you, yet I meant the all generated scripts would be rendered at the bottom of the body page. To achieve that I need to apply @section PageInitScript to ModulePage.cshtml, so I want to customize it along with _Layout.cshtml, but I did not want to go through your original extension to just change the view url. Still, I understand your point so I will have to do that eventually :)

Thanks!

[VictorTomaili]

The view parameter can create more problems. If we change the view parameters in extensions library, your view will result in build time errors. You should update your view accordingly if you pass it via parameter.

In other case when you create your own ModulePage.cshtml, you can modify it when you want to make these changes without build time exceptions. You can create similar helper function for your view too.

[lechu90ns]

Thanks for reply, I made it custom by copying your code.