حل برمجي لتغيير هوية التنقل لتمييز ASP.NET الصفحة الحالية

StackOverflow https://stackoverflow.com/questions/188124

  •  06-07-2019
  •  | 
  •  

سؤال

وأنا أكتب موقع على شبكة الانترنت مع Visual Studio 2008 و ASP.NET 3.5. لقد حددت masterpage يصل الى تبسيط تخطيط وللحفاظ على صفحات المحتوى للمحتوى بدلا من محتوى وتصميم.

والتنقل غير قائمة، css'd بحيث يبدو وكأنه شريط. من أجل تسليط الضوء على الصفحة على شريط، عنصر القائمة يحتاج لتبدو وكأنها هذا <li id="current">. أنا لا أريد أن استخدام <asp:ContentPlaceHolder> ما اذا كان يمكنني تجنب ذلك. هناك بعض التعليمات البرمجية يمكنني أن أضيف إلى كل من صفحاتي (أو فقط إلى masterpage؟) لإنجاز هذا أو أنا عالقة باستخدام ل<asp:ContentPlaceHolder>؟

هل كانت مفيدة؟

المحلول

وإضافة خاصية إلى الصفحة سيدك يسمى القسم صفحة 

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);

وأعط كل من البنود الملاحة الخاص سمة ID فريدة من نوعها.

في المغلق الخاص بك، قم بتغيير عرض البنود الملاحة استنادا إلى الفئة الصفحة الحالية 

.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 وفقا لذلك. هذا هو أسلوب استعمل على موقعي ويعمل كبيرة.

وإنها مباراة أفضل الدلالي وعلى الأرجح أسهل المتغير لتحديد للحفاظ على التنقل باستخدام نفس الطبقات أو هويات كل مكان وتغيير فقط معرف العنصر الأساسي لمطابقة: 

<li id="homeNav">home</li>
<li id="blogNav">blog</li>

ومن ثم على كل صفحة ... 

<body id="home">
<body id="blog">

وفي المغلق: 

#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}

وسيتم استخدام أو عدم استخدام ContentPlaceHolder لن يؤثر على أي عنصر لديه معرف = "التيار" تعيين على ذلك.

وسيكون لديك للنظر في بعض الطرق، سواء في codebehind الخاص للصفحة الرئيسية، وهي وظيفة جافا سكريبت أو أي شيء آخر عند تقديم عنصر القائمة لإضافة صحيح معرف = "الحالي" إلى قائمة عند إنشائه.

وماذا عن خلق خاصية سلسلة المحمية في فئة رمز masterpage الخاصة بك؟ تجاوز ONLOAD: 

protected string _bodyId;

protected override void OnLoad(EventArgs e)
{
    _bodyId = "your css id name";
}

وبعد ذلك في ASPX masterpage الخاص بك: 

<body id="<%= _bodyId %>">

وبعد ذلك لم يكن لديك لفوضى مع CSS الخاص بك، مفيدا بشكل خاص إذا جاء CSS من وكالة التصميم.

وفيما يلي كيفية حققناه باستخدام مسج بإلحاق الطبقة المغلق لتغيير الخلفية. 

$("ul.nav > li > a:contains('<%= SiteMap.CurrentNode.ParentNode.Title %>')").addClass("navselected");

وو".nav" في ul.nav (في مسج) هي الطبقة المغلق تطبيقها على علامة UL.

و:contains يساعد على التحقق من محتويات كل "أ" العلامة / عنصر داخل UL-> يثيوم> ومع ParentNode عنوان التي يتم طباعتها في القائمة ...

إذا وجدت، وينطبق الطبقة المغلق اسمه navselected إلى الخاص UL-> يثيوم> علامة / عنصر.

والتحيات، Minesh شاه

أنظمة زائد الجندي. المحدودة.

وwww.systems-plus.com

وأود أن استخدام جافا سكريبت لتحقيق ذلك. في المغلق، تغيير #current الخاصة بك لتكون فئة (.current) ومن ثم يكون معرف على كل من ListItems الخاص التي تقوم بإنشائها. ثم استخدام RegisterStartupScript، استدعاء أسلوب جافا سكريبت أن يحصل على عنصر القائمة المناسب ويسند النمط من التيار. باستخدام نموذج، وهذا يبدو وكأنه $ ( 'MyPageLi'). اسم_الفئة = 'التيار'.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top