从aspx页面中的用户控件访问id

时间:2013-11-13 06:51:10

标签: javascript asp.net

所以我有一个名为footer的usercontrol,它包含网站的导航,我试图将active css类附加到usercontrol中的div,以便用户

这是我的footer.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Footer.ascx.cs" Inherits="UserControls_Footer" %>
<div id="bottom">
    <div class="Footer navbar-fixed-bottom">
        <div class="container">
          <div class="row"> 
            <button id="ImgOption1Guru" class="btn btn-large btn-block btn-primary" runat="server" type="button" onclick="location.href='Option1.aspx';">Option 1</button>
            <button id="ImgCmnyInfo" class="btn btn-large btn-block btn-primary" onclick="location.href='CompanyInfo.aspx';" runat="server" type="button">Info</button>
            <button id="ImgInteract" class="btn btn-large btn-block btn-primary" onclick="location.href='Interact.aspx';" runat="server" type="button">Interact</button>
            <button id="ImgActions" class="btn btn-large btn-block btn-primary" onclick="location.href='Actions.aspx';" runat="server" type="button"> Actions</button>
            <button id="ImgStatus" class="btn btn-large btn-block btn-primary" onclick="location.href='Status.aspx';" runat="server" type="button">Status</button>            
          </div>

        </div>

    </div>
</div>

我在aspx页面中通过

使用了这个页脚
<div id="footer"><ucl:Footer ID="foot" runat="server" /></div>

现在我想将css类active添加到各自页面上的button id 。到目前为止,我已经尝试将代码添加到相应的页面,它似乎无法正常工作

<script type="text/javascript">
    var x = document.getElementById("ImgActions");
    x.classname += " " + active;
</script>

如何在我的aspx页面中访问usercontrol中的tag标识。

1 个答案:

答案 0 :(得分:3)

你需要使用控件的ClientID,因为当你没有将ClientIDMode设置为static时,asp.net会生成html时会更改控件的id。 classname也应为className

var x = document.getElementById("<%= ImgActions.ClientID %>");
x.className += " " + active;
  

ASP.NET为如何生成ClientID提供了多种算法   适当的价值。您可以选择要用于控件的算法   设置其ClientIDMode属性。识别算法   通过ClientIDMode枚举,参考。

您可以使用ClientIDMode静态,因为您在不同的控件中有不知道ImgActions的javascript。

HTML

<button id="ImgActions" ClientIDMode="static" class="btn btn-large btn-block btn-primary" onclick="location.href='Actions.aspx';" runat="server" type="button"> Actions</button>

的Javascript   

 var x = document.getElementById("ImgActions");
 x.className += " " + active;