Блог

У меня есть этот UserControl, который я хочу преобразовать в частичный вид Razor. Это заголовок, который будет вставлен в файл _Layout. Копирование HTML-кода довольно простое … но тогда как мне поступить со свойством?

При отображении страницы я хочу отображать активный элемент меню по-разному, поэтому на каждой странице устанавливается MasterPage.activeIndex в Page_Load.

Итак, первая часть вопроса заключается в том, как мне работать со свойством в частичном представлении Razor?

Вторая часть вопроса заключается в том, как мне справиться с этим в файле _Layout, чтобы обеспечить желаемую функциональность?

 <%@ Control Language="C#" AutoEventWireup="true" %>
<script runat="server">
    public int ActiveIndex { get; set; }
</script>
<ul class="clearfix">
    <li <%= ActiveIndex == 0 ? "class="active"" : "" %>><a href="~/" runat="server">Home  </a></li>
    <li <%= ActiveIndex == 1 ? "class="active"" : "" %>><a href="~/mission" runat="server">Our Mission  </a></li>
    <li <%= ActiveIndex == 2 ? "class="active"" : "" %>><a href="~/books" runat="server">Books </a></li>
    <li <%= ActiveIndex == 3 ? "class="active"" : "" %>><a href="~/bulk-order" runat="server">Bulk Order</a></li>
    <li <%= ActiveIndex == 4 ? "class="active"" : "" %>><a href="~/book-accuracy-list" runat="server">Book Accuracy List</a></li>
    <li <%= ActiveIndex == 5 ? "class="active"" : "" %>><a href="~/contact" runat="server">Contact Us</a></li>
</ul>
  

Ответ заключается в использовании ViewData со страницы для передачи данных в макет и его вложенные представления.

На странице

 @page
@{
    ViewData["ActiveIndex"] = 2;
    ViewData["Title"] = "Books";
    ViewData["Description"] = "";
    ViewData["Keywords"] = "";
}
  

Затем в макете я отображаю заголовок следующим образом

 <partial name="_Header" model='new _HeaderModel((int?)ViewData["ActiveIndex"])' />
  

Тогда заголовок может содержать строго типизированный параметр как часть своей модели и брать его из конструктора.

 public class _HeaderModel : PageModel {
    public int? ActiveIndex { get; set; }

    public _HeaderModel() { }

    public _HeaderModel(int? activeIndex) {
        this.ActiveIndex = activeIndex;
    }
}
  

Добавлен вспомогательный метод

 HtmlString ActiveTag(int index) => new HtmlString(index == ActiveIndex ? @"class=""active""" : "");
  

Затем эта старая строка

 <li <%= ActiveIndex == 0 ? "class="active"" : "" %>
  

превращается в

 <li @ActiveTag(0)>
  

Рефакторинг веб-форм в страницы Razor требует небольшой работы, но всегда приводит к гораздо меньшему количеству кода 🙂