Каков наилучший способ передать переменную в частичное в макете о текущей странице? - PullRequest
0 голосов
/ 09 января 2019

Я внедрил огромный шаблон в новое приложение .Net Core MVC и разделил его на различные части (заголовок, боковая панель, нижний колонтитул).

Работает хорошо - однако боковая строка меню должна иметь

<li class="active">

на посещаемой в данный момент странице и изменить с:

<li class="treeview">

до

<li class="treeview active menu-open">

в любом открытом разделе.

Кроме множества операторов if или большого количества VERY грязного кода, я не могу понять, как это сделать. Может кто-нибудь указать мне правильное направление, пожалуйста?

1 Ответ

0 голосов
/ 09 января 2019

Вам не нужны if операторы, но вам нужно будет использовать троичные (т.е. требуется некоторое количество условной логики). Я нашел самый краткий способ справиться с подобными вещами с помощью кода следующего содержания:

@{ string url; /* define anywhere, just needs to be before nav HTML */ } 

...

@{ url = Url.Action("Foo"); }
<li class="@(Request.Path == url ? "active" : null)">
    <a href="@url">Foo</a>
</li>
@{ url = Url.Action("Bar"); }
<li class="@(Request.Path == url ? "active" : null)">
    <a href="@url">Bar</a>
</li>

Переменная url объявляется первой, поэтому 50000 различных переменных не нужны. URL-адрес вообще сохраняется в переменной, поэтому вам не нужно повторять какие-либо вызовы Url.Action и т. Д. (Т. Е. Один для условной ссылки, а другой для фактической ссылки). Здесь я просто делаю прямое сравнение, но вы можете захотеть пометить элемент списка активным, даже если текущая страница является вложенным элементом. Для этого вы просто должны использовать Request.Path.StartsWith(url) вместо условного. Однако не используйте это в ссылке на вашу домашнюю страницу (т.е. /), иначе она всегда будет отмечена как активная.

Следуйте тому же подходу с вашими "древовидными" элементами.

@{ url = Url.Action("Item1"); }
<li class="treeview @(Request.Path == url ? "active menu-open" : null)">
    <a href="@url">Tree view item</a>
</li>
...