Search code examples
razorwidgetorchardcms

How to render widget from razor view


Due to the structure of my theme (and probably to the fact that I'm quite new with Orchard), I need to render a widget from a razor view. The widget contains a secondary menu and I need to place it in the Layout.cshtml; something like this but with a widget (or a menu) instead of Model.Navigation.

<div id="MenuH">
    @if (Model.Navigation != null) 
        {@Display(Model.Navigation)}
</div>

Is this possible?

Edit

I need to show a secondary menu (or a widget) in this section of my Layout.cshtml "master page":

<section class="main-content-zone">
<div class="container">
    <div class="row row-offcanvas">
        <<div class="col-lg-sp-2 col-md-3 col-sm-4" id="bt-sidebar">
            <div id="MenuV">
                <script type="text/javascript">$("#MenuV").html($("#MenuH nav").parent().html());</script>
            </div>
        </div>
        <div class="col-lg-sp-10 col-md-9 col-sm-8 col-xs-12" id="bt-content" role="main">
            <div class="col-xs-12" id="bt-content" role="main">
                <div class="card no-margin-top show-overflow">
                    <div class="row">

                        @if (Model.Content != null){<div class="col-md-12" runat="server" id="Content">@Display(Model.Content)</div>}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The menu/widget should go where the theme (I bought a theme) insert the js script.


Solution

  • Looks like you are trying to add a widget to a new zone that does not exist yet. There are a few things you need to do to achieve that:

    1 Find the place in Layout.cshtml where you want to render your widgets. Define a new zone name in there:

    <div class="col-lg-sp-2 col-md-3 col-sm-4" id="bt-sidebar">
        <div class="column-left-zone">
            @Zone(Model.ColumnLeft)
        </div>
    </div>
    

    Note: This assumes that your Layout.cshtml has a function defined like this. If not, you can just do @Display(Model.ColumnLeft)

    2 Define the zone in your Theme.txt so that you can add widgets to it through the admin UI:

    Zones: Header, Navigation, ..., ColumnLeft
    

    3 Now the 'ColumnLeft' zone is available in your admin UI. Add your widget in the admin ui to the ColumnLeft zone