Программное решение изменить идентификатор навигации для выделения текущей страницы ASP.NET
Вы можете воспользоваться индексом item ..., доступным в директиве v-for (например, v-for="(item, i) in items"), чтобы связать его (индекс элемента) с функцией, которая показывает элемент, изменив его свойство. :
Обновление : первоначальный ответ был удален после уточнения требований.
Поскольку вы предпочитаете не менять элементы, вы можете заключить их в объект Map (как ключи) и сохранить параметры видимости отдельно в качестве значений Map. К сожалению, насколько мне известно, на данный момент Vue.js не поддерживает реактивность для Map объектов, поэтому мне приходится запускать рендеринг вручную, используя forceUpdate:
Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('child', {
template: '<p>Visible child</p>'
})
new Vue({
el: "#demo",
template: `
<div>
<div v-for="item in items">
<button @click="toggleChild(item)">Toggle child</button>
<div>{{item.name}}</div>
<child v-if="isVisible(item)" :item="item"></child>
</div>
</div>
`,
data () {
return {
itemsMap: new Map(
[
{ name: 'test1' },
{ name: 'test2' }
].map(item => [item, { visible: false }])
)
};
},
methods: {
toggleChild(item) {
this.itemsMap.set(item, { visible: !this.itemsMap.get(item).visible });
this.$forceUpdate();
},
isVisible(item) {
return this.itemsMap.get(item).visible;
}
},
computed: {
items: function() {
return Array.from(this.itemsMap.keys());
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo"></div>6 ответов
Добавьте свойство к своей основной странице под названием Раздел Страницы
public string PageSection { get; set; }
Добавьте директиву страницы MasterType к вершине Ваших страниц содержания
<%@ MasterType VirtualPath="~/foo.master" %>
В Вашем коде страницы содержания позади, устанавливает свойство PageSection основной страницы
Master.PageSection = "home";
На Вашей основной странице сделайте тег основного текста тегом сервера
<body ID="bodyTag" runat="server">
В основном коде страницы позади, используйте то свойство для установки класса на теге основного текста
bodyTag.Attributes.Add("class", this.PageSection);
Дайте каждый из своих военно-морских объектов атрибут уникального идентификатора.
В Вашей CSS измените дисплей военно-морских объектов на основе текущего класса страницы
.home #homeNavItem,
.contact #contactNavItem
{
color: #f00;
}
Вы рассмотрели использование файла Web.sitemap? Это делает это очень легким. Если Ваш файл карты сайта похож на это...
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode>
<siteMapNode url="~/Default.aspx" title="Home" description="" />
<siteMapNode url="~/Blog.aspx" title="Blog" description="" />
<siteMapNode url="~/AboutUs.aspx" title="AboutUs" description="" />
</siteMapNode>
</siteMap>
... затем можно сделать это на основной странице для достижения результатов, которые Вы хотите:
<asp:SiteMapDataSource ID="sitemapdata" runat="server" ShowStartingNode="false" />
<ul id="navigation">
<asp:Repeater runat="server" ID="navrepeater" DataSourceID="sitemapdata">
<ItemTemplate>
<li class="<%# SiteMap.CurrentNode.Equals(Container.DataItem) ? "activenav" : "inactivenav" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "url") %>"><%# DataBinder.Eval(Container.DataItem, "title") %></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
LI текущей страницы будет иметь класс "activenav" (или независимо от того, что Вы решаете использовать), и у других будет класс "inactivenav". Можно записать CSS соответственно. Это - техника, которую я использую на своем сайте, и это работает отлично.
Использование или не использование ContentPlaceHolder не будет влиять, какой элемент имеет идентификатор = "текущий" набор на нем.
Необходимо будет посмотреть на некоторый метод, или в codebehind для основной страницы, функции JavaScript или в чем-то еще при рендеринге компонента меню для надлежащего добавления идентификатора = "текущий" к списку, когда это создается.
Это - лучшее семантическое соответствие и вероятно более легкая переменная для установки, чтобы сохранить навигацию с помощью тех же классов или идентификаторов везде и только изменить идентификатор элемента тела для соответствия:
<li id="homeNav">home</li>
<li id="blogNav">blog</li>
и затем на каждой странице...
<body id="home">
<body id="blog">
И в CSS:
#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}
Я использовал бы JavaScript для выполнения этого. В CSS, изменяют Ваш #current, чтобы быть классом (.current) и затем иметь идентификатор на каждом из Ваших ListItems, которые Вы создаете. Затем с помощью RegisterStartupScript, назовите метод JavaScript, который получает соответствующий ListItem и присваивает ему стиль тока. Используя Прототип, это было бы похоже на $ ('MyPageLi').className = 'текущий'.
Как насчет создания защищенного строкового свойства в классе кода главной страницы? Переопределите OnLoad:
protected string _bodyId;
protected override void OnLoad(EventArgs e)
{
_bodyId = "your css id name";
}
Затем на главной странице aspx:
<body id="<%= _bodyId %>">
Тогда вам не придется возиться со своим CSS, особенно полезно, если CSS был получен от дизайн-агентства.