.net母版页中使用JS结合CSS的问题

Posted 2023-05-06

参考技术A 问题应该是重定向时重新加载了模板页。可以试试使用MulitiView和view进行页面局部切换显示，这是避免重新加载模板页的方式；还可以试试传一个参数到新页面，在新页面根据参数的值决定模板页是加载原模板页的css样式还是加载点击链接后的css样式

使用 css 和 c# 以编程方式更改母版页中的链接

【中文标题】使用 css 和 c# 以编程方式更改母版页中的链接

【英文标题】：Change a link programmatically in a masterpage with css and c#

【发布时间】：2013-12-21 01:52:29

【问题描述】：

有人知道如何在子页面中以编程方式更改母版页中链接的 ccs 吗？

例如，我的母版页中有一个（导航）链接列表，如下所示：

    <div class="list-group">
        <a href="report.aspx" class="list-group-item active">Donuts&trade;</a>
        <a href="english_responses.aspx" class="list-group-item">English responses</a>
        <a href="irish_responses.aspx" class="list-group-item">Irish responses</a>
    </div>

在导航列表中，我使用 css 类：list-group-item active 来显示活动链接（蓝色表示活动）和 css class:list-group-item 用于普通链接。

我想要的是使用 c# 以编程方式更改每个子页面的活动链接。

page_load 有什么办法吗？

【参考方案1】：

你有几个选择：

将runat="server 添加到您的锚标记 改用HyperLink控件

平均售价：

<asp:HyperLink ID ="ReportHyperLink" 
               NavigateUrl ="report.aspx" 
               CssClass="list-group-item" runat="server" />

后面的代码：

ReportHyperLink.CssClass= "list-group-item active";

---

如果在母版页“子”页面中使用，似乎无法让后面的代码工作

你只需要找到控件

平均售价：

<asp:ContentPlaceHolder ID="cpHolder" runat="server">              
<asp:HyperLink ID ="ReportHyperLink" 
               NavigateUrl ="report.aspx" 
               CssClass="list-group-item" runat="server" />
</asp:ContentPlaceHolder>

后面的代码：

ContentPlaceHolder cp = (ContentPlaceHolder)this.Master.FindControl("CpHolder");
HyperLink hp= (HyperLink)cp.FindControl("ReportHyperLink");
hp.CssClass= "list-group-item active";

---

还有一种更好的方法，您可以像这样在母版页中添加公共属性：

后面的大师代码：

public string ReportHyperLinkCssClass

    get 
        return this.ReportHyperLink.CssClass;
    
    set 
        this.ReportHyperLink.CssClass= value;
    

页面加载代码

var myMaster = this.Master as YourMasterType;
if(myMaster != null)

    myMaster.ReportHyperLinkCssClass = newCssClass;

【讨论】：

太酷了没想到。但如果在母版页“子”页面中使用，似乎无法让背后的代码工作，非常感谢

【参考方案2】：

您也可以使用 JQuery 来代替页面加载事件。

见下面的jquery代码示例：

$(document).ready(function() 
    var childerns = $('.list-group').children('a');

    for (var i = 0; i < childerns.length; i++) 
        if ($(childerns[i]).attr('href') == 'english_responses.aspx') 
            $(childerns[i]).attr('class', 'list-group-item active');
        
    
);

在上面的代码中，我将 CSS 从 list-group-item 更改为 list-group-item active 以用于具有 href="en​​glish_responses 的锚标记。 aspx"

【讨论】：

这是使用 jquery 做同样事情并具有良好性能的另一种方法。

【参考方案3】：

使用普通的 javascript 或 jquery 将比使用服务器端 c# 更好更快地完成这样简单的事情，但如果你绝对必须像 meda 所说的那样，在你的锚标记中添加一个“runat='server'”（更好使用超链接控件），允许您从服务器访问控件并将样式属性更改为您的偏好。

但我绝对建议使用 javascript。