I am new to Sitefinity and currently working on a Sitefinity 15 project.
I’ve added a custom placeholder (language-selector) to my MVC view (NavigationView.cshtml) as follows:
@model Telerik.Sitefinity.Frontend.Navigation.Mvc.Models.INavigationModel
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="/">Test Site</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id='@Html.UniqueId("navbar")'>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
@{
int i = 0;
foreach (var node in Model.Nodes)
{
@RenderRootLevelNode(node, i);
i++;
}
}
</ul>
<!-- Add your placeholder here -->
@Html.SfPlaceHolder("language-selector")
</div>
</div>
</nav>
@* Helper methods and rendering logic *@
However, I’m unable to see or configure the language-selector placeholder in the Sitefinity CMS when editing the page.
Steps Taken:
-
Added @Html.SfPlaceHolder(“language-selector”) in
NavigationView.cshtml. -
Assigned the template to the relevant page in
Sitefinity. -
Tried to drag and drop widgets into the placeholder area
while editing the page in the CMS.
Issues:
- The language-selector placeholder does not appear in the page editor.
- I’m unsure if there’s additional configuration needed in the CMS to
make this placeholder visible and usable.
Request for Help:
-
Is there a specific step or configuration I’m missing to make the
language-selector placeholder visible in the Sitefinity CMS? -
Do I need to register the placeholder or configure something else in
Sitefinity to enable editing?
Any guidance or suggestions would be greatly appreciated. Thank you in advance!
Best regards,
Suresh Rayarakula
You can only use @Html.SfPlaceHolder in the Layout view (your base page template), you cannot use it inside the View of another widget.
As you see, the nav widget expects a model of type INavigationModel.
Imagine that you put a language selector widget inside of it, how would the language selector widget get its own model?
That’s why it does not work like that.
So, you need to rework your html a bit.
Here is what I’d do:
in your base page template you put this code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="/">Test Site</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id='@Html.UniqueId("navbar")'>
@Html.SfPlaceHolder("TopNav")
<!-- Add your placeholder here -->
@Html.SfPlaceHolder("language-selector")
</div>
</div>
</nav>
Note, there is a new SfPlaceholder for the TopNav.
Then, you put the Navigation widget inside the TopNav area, and then put this html into the View of the nav widget:
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
@{
int i = 0;
foreach (var node in Model.Nodes)
{
@RenderRootLevelNode(node, i);
i++;
}
}
</ul>
1