Page view counter
Home ›
ASP.NET Forums » General ASP.NET » Web Forms » making a control visible,invisible

Shortcuts

making a control visible,invisible

Last post 02-03-2008 5:12 PM by digitalslavery. 16 replies.

Sort Posts:

  • making a control visible,invisible

    01-30-2008, 2:41 AM
    • Loading...
    • sunny74
    • Joined on 10-20-2007, 7:47 PM
    • Posts 512
    • Points 1,365

    Dear All,

    In a web page I am having a menu on top and a SiteMapPath below it.

    Now I want to make the SiteMapPath invisible on page Load event.The SiteMapPath is within a <div>.

    <div id="breadcrumbs" runat="server">

    <asp:SiteMapPath runat="server" ID="smPath" />

    </div>

    So I added runat="server" in the <div> and in the page Load event wrote the folowing:

    if (!IsPostBack)

    {

    breadcrumbs.Visible = false;

    }

    But it doesn't show up even when I am clicking on a link on the menu.Why does it happen like that?

    A friend told me that I need to add client side JS on the clickevent of the Menu Control in order to make it visible.

    So now the Page load event looks like this:

    protected void Page_Load(object sender, EventArgs e)

    {

    if (!IsPostBack)

    {

    breadcrumbs.Visible =     false;

    //MainMenu.Attributes.Add("onmouseover", "mover()");// ID of menu control is MainMenu

    //MainMenu.Attributes.Add("onmouseout", "mout()");

    MainMenu.Attributes.Add("onclick", "showspath()");

    }

    and then added some javascript as follows:

    <script type="text/javascript" >

    function showspath()

    {

    var elm1 = window.document.getElementById('breadcrumbs')

    if(elm.visible == false)

        elm.visible = true

     

    }

    But it still doesn't work?

    Where is the problem? How to make it work?

    Any help which solves this problem will be gratefully accepted.

    Thanks.

     
    SUBHRANIL BASU RAY
    Mumbai

    TODAY'S TECHNIQUES ARE OBSOLETE FOR TOMORROW'S JOB.
    PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.

  • Re: making a control visible,invisible

    01-30-2008, 3:28 AM
    • Loading...
    • kipo
    • Joined on 07-20-2006, 3:10 AM
    • Croatia
    • Posts 2,117
    • Points 12,418

    Try with this:

    if (!IsPostBack)
    {
      breadcrumbs.Visible = false;
    }
    else
    {
      breadcrumbs.Visible = true;
    }

    Words are just like a crowd of people - it's not necessary to know them all... Choose only the right ones for yourself...

  • Re: making a control visible,invisible

    01-30-2008, 3:39 AM
    • Loading...
    • nr2ae
    • Joined on 03-04-2006, 6:55 AM
    • Posts 72
    • Points 323

    Several things you should know

    1. bredcrumbs.Visible = False means that that control will not be rendered at all.

    Example : If I have the following lines in .aspx files

    <div id="test">
    <asp:Textbox runat="server" id="txtTest" Visible="False" />
    </div>

    What the browser get is just
    <div id="test">

    </div>

    This applies to any server control.

    2. ASP.NET makes use of ViewState. Basically it keep the states of all control.

    So if there isn't a single line in your C# code that says bredcrumbs.Visible = True, that div is likely to stay "invisible".
    In other words, it won't be rendered.

    There's 2 way to make it becomes visible

    1. Add a <asp:Button> or a <asp:LinkButton> and wire up the events and set breadcrumbs.Visible = True inside the event handler
    2. Instead of using Visible = false in your pageload

    You might use breadcrumbs.Style.Add("display","none")

    Then in your javascript,

    function showspath()

    {

    var elm1 = window.document.getElementById('<%=breadcrumbs.ClientID%>') ;

    if(elm.style.display == "none")

        elm.style.display = "inline";

    }

    Note: It is highly recommended that you use <%=breadcrumbs.ClientID%> on server controls. Sometimes the ID rendered (Client ID) is not the same as the ID used on the server side.

     

    Hope that help

  • Re: making a control visible,invisible

    01-30-2008, 3:41 AM
    • Loading...
    • sunny74
    • Joined on 10-20-2007, 7:47 PM
    • Posts 512
    • Points 1,365

    Hi,

    I did  what you said, but it doesn't work.

    Thanks.

     

    SUBHRANIL BASU RAY
    Mumbai

    TODAY'S TECHNIQUES ARE OBSOLETE FOR TOMORROW'S JOB.
    PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.

  • Re: making a control visible,invisible

    01-30-2008, 3:48 AM
    • Loading...
    • suriyamail001
    • Joined on 06-29-2007, 8:27 AM
    • Mumbai
    • Posts 153
    • Points 486

    Do Like following to  display and hide the controls

     

    <div id="breadcrumbs" runat="server" style="display:none">

    <asp:SiteMapPath runat="server" ID="smPath" />

    </div>

     

    In your java script

     

    <script type="text/javascript" >

    function showspath()

    {

    var elm1 = window.document.getElementById('breadcrumbs')

    elm1.style.display='block'; 

    }

     

     

    If debugging is the process of removing bugs, then programming must be the process of putting them in.

    Suriya

  • Re: making a control visible,invisible

    01-30-2008, 4:42 AM
    • Loading...
    • sunny74
    • Joined on 10-20-2007, 7:47 PM
    • Posts 512
    • Points 1,365

    Hi nr2ae,suriyamail001

    I tried what both of you said separately.

    But In both cases I get a common error given below:

    The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below. 

    Stack Trace:


    [HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).]
       System.Web.UI.ControlCollection.AddAt(Int32 index, Control child) +218
       System.Web.UI.PageTheme.SetStyleSheet() +371
       System.Web.UI.Page.OnInit(EventArgs e) +74
       System.Web.UI.Control.InitRecursive(Control namingContainer) +457
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1746

    Pls look into it and let me know.

    Thanks for your reply.

    SUBHRANIL BASU RAY
    Mumbai

    TODAY'S TECHNIQUES ARE OBSOLETE FOR TOMORROW'S JOB.
    PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.

  • Re: making a control visible,invisible

    01-30-2008, 5:02 AM
    • Loading...
    • nr2ae
    • Joined on 03-04-2006, 6:55 AM
    • Posts 72
    • Points 323

    Do you mind posting the full source code of this page?

    It never happens to me. And I don't think my code '<%=breadcrumbs.ClientID%>' is wrong, yet I'm not denying the possibilities.

  • Re: making a control visible,invisible

    01-30-2008, 5:28 AM
    • Loading...
    • sunny74
    • Joined on 10-20-2007, 7:47 PM
    • Posts 512
    • Points 1,365

    Hi nr2ae,

    I solved the error message by making a small change in the function given below:

    function showspath()

    {

    var elm1 = window.document.getElementById('<%#breadcrumbs.ClientID%>');// your version: var elm1 = window.document.getElementById('<%=breadcrumbs.ClientID%>');// if(elm1.style.display == "none")

    {

    elm1.style.display =     "inline";

    }

    }

     

    But since you wanted the full source code of the page, I don't mind sending it.

    Source code:

     

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <title>Untitled Page</title>

    <script type="text/javascript" >

    function gettime()

    {

    //document.getElementById("menu_time").innerText = date();

    }

    function mover()

    {

    var elm = window.document.getElementById('breadcrumbs');elm.visible = false;

    }

    function mout()

    {

    var elm = window.document.getElementById('breadcrumbs');

    if(elm.visible == false)elm.visible = true;

    }

    function showspath()

    {

    var elm1 = window.document.getElementById('<%#breadcrumbs.ClientID%>');

    if(elm1.style.display == "none")

    {

    elm1.style.display =     "inline";

    }

    }

    </script> </head>

    <body>

    <form id="mainForm" runat="server">

    <div id="wrapper" >

    <div id="header">

    <div id="logo" style="width: 320px; height: 80px; background-color: #ffffff">

    <!-- div id="log_b" -->

    <asp:HyperLink ID="lnkHome" runat="server" ToolTip="Return to homepage" NavigateUrl="~/Home.aspx">

    <asp:Image runat="server" ID="imgLogo" SkinID="logoImage" AlternateText="Hospital logo" />

    </asp:HyperLink>

    <!-- /div -->

    </div>

    <div id="banner">

    <%-- Put a banner here if you wish. --%>

    <asp:SiteMapDataSource ID="Sitemap" runat="server" />

    </div>

     

    <div id="romanylogo">

    <asp:Image runat="server" ID="romany_logo" SkinID="logoImage1" AlternateText="Romany logo" />

    </div>

     

    </div>

    <div id="mmenu" style="left: 0px; top: 0px; width:100%; background-color:#FFFFFF" >

    <div id="mainnav" style="left: 0px; top: 0px; height: 100%; width:auto; background-color: #638CBD" >

    <table border=0 width= 100% height=0%><tr height=0%><td width=80% >

    &nbsp;

    <asp:Menu ID="MainMenu" runat="server" DataSourceID="Sitemap" Orientation="Horizontal" SkinID="mainmenu" OnMenuItemClick="MainMenu_MenuItemClick" >

    </asp:Menu>

    </td><td width=20%><div id ="menu_time" align="right" style="font-size:9px">

    <table><tr><td> 06/08/2008 - 01:23:10 PM</td></tr>

    <tr><td>user : Subhranil</td></tr>

    </table></div> </td></tr></table>

    </div >

    </div>

     

    <div id ="main">

    <div id="breadcrumbs" runat="server" style="display:none">

    <asp:SiteMapPath runat="server" ID="smPath" />

    </div>

    <div id="copy">

    <asp:ContentPlaceHolder runat="server" ID="mainCopy">

    <%-- Main page content goes here. Create a single

    content box by wrapping everything in one

    <div class="container"> or create multiple boxes

    as needed. See the sample homepage for a

    demonstration.

     

    This is the general structure:

    <div class="container">

    <h1>Headline</h1>

    <p class="teaser">Teaser text</p>

    <p>Regular text and other markup.</p>

    </div>

    --    %>

    </asp:ContentPlaceHolder>

    </div>

    </div>

    <div id="sidebar">

    <div id="subnav"> &nbsp;

    &nbsp;<asp:SiteMapDataSource ID="sSitemap" runat="server" ShowStartingNode="False"

    StartingNodeOffset="2" />

    <asp:Menu ID="subMenu" runat="server" DataSourceID="sSitemap" SkinID="subMenu1" Width="168px">

    </asp:Menu>

    </div>

    <asp:ContentPlaceHolder ID="leftColumn" runat="server">

    <%-- Left sidebar content placeholder. Again the

    individual boxes are created by using a <div> and

    assigning a class to it: 'sidebarcontainer'.

    Follow the structure of the sample content below:

     

    <div class="sidebarcontainer">

    <h4>Headline</h4>

    <p>Content</p>

    </div>

    --    %>

    <div class="sidebarcontainer">

    <h4>

    <asp:Image runat="server" ID="imgLogoSmall" SkinID="logoImageSmall" AlternateText="company logo" />

    Stock Report</h4>

    <p>

    <asp:Image runat="server" ID="imgStockChart" SkinID="stockChartImage" AlternateText="stock chart" />

    </p>

    <p>Current price: $42.12</p>

    <div class="readmore"><a href="javascript:;" title="More info">&raquo; more</a></div>

    </div>

    <div class="sidebarcontainer">

    <h4>

    Quick Links</h4>

    <ul>

    <li><a href="javascript:;" title="Read the annual reports">&raquo; Annual Reports</a></li>

    <li><a href="javascript:;" title="Browse the current and archived press releases">&raquo; Press Releases</a></li>

    <li><a href="javascript:;" title="For our stock holders">&raquo; Investor Relations</a></li>

    </ul>

    <br />

    </div>

    <div class="sidebarcontainer">

    <asp:Login ID="Login1" runat="server" Width="120px">

    <LayoutTemplate>

    <h4>Log In</h4>

    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName"><u>U</u>ser Name:</asp:Label><br />

    <asp:TextBox ID="UserName" runat="server" AccessKey="u" TabIndex="60" Columns="15" />

    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"

    ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator><br />

    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password"><u>P</u>assword:</asp:Label><br />

    <asp:TextBox ID="Password" runat="server" TextMode="Password" Columns="15" AccessKey="p" TabIndex="61" />

    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"

    ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator><br />

    <asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time." TabIndex="62" AccessKey="r" /><br />

    <span style="color: red">

    <asp:Literal ID="FailureText" runat="server" EnableViewState="False" />

    </span>

    <div align="right"><asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" AccessKey="l" TabIndex="63" ValidationGroup="Login1" />

    </div>

    </LayoutTemplate>

    </asp:Login>

    </div>

    </asp:ContentPlaceHolder>

    </div>

    <div id="footer" align="center">

    &copy; 2008-2010 Sitename <a href="javascript:;" title="Sample link # 1">Link 1</a> <a href="javascript:;" title="Sample link # 2">Link 2</a>

    <a href="javascript:;" title="Sample link # 3">Link 3</a>

    </div>

     

    </div>

    </form> </body>

    </html>

    Although I managed to avert the error message,I still did not get the output I want.

    It shouldn't be so difficult,should it?

    pls test the  changes you make in the code, in your own computer before sending it to me.

    Thanks.

    SUBHRANIL BASU RAY
    Mumbai

    TODAY'S TECHNIQUES ARE OBSOLETE FOR TOMORROW'S JOB.
    PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.

  • Re: making a control visible,invisible

    01-30-2008, 5:45 AM
    • Loading...
    • nr2ae
    • Joined on 03-04-2006, 6:55 AM
    • Posts 72
    • Points 323

    Oh. Sorry about that.

    The syntax <%=Control.ClientID%> works, but I guess it's because the syntax <%= %> can't be put it in a server control.

    Because this works (This is part of my forum website.)

    <body style="margin-left:0px; margin-right:0px; margin-top:0px;">
<script type="text/javascript">
function ExpandTopicList(sender, arguments)

{
$find('<%=ctlTopicListCollapse.ClientID %>').expandPanel(true);
$get('divTopicListLoading').style.display = 'none';
}

</script>
<form runat="server">
    ........the rest of the code


    Your javascript is inside a <head runat="server">. I guess that's why it didn't work.

    Anyway, the <%#  %> is a data-binding syntax
    So you've got to add --> DataBind() <-- to your pageload

    Or you can move all of your javascript (using my previous version of <%= %>) and put it just below the <body>.

    Or you can use an easier way, which is changing it back to normal document.getElementByID('breadcrumbs'), although I don't suggest it like I said earlier.

    I haven't test the idea, but I think if there's any errors you should be able to solve quite easily.

  • Re: making a control visible,invisible

    01-30-2008, 6:05 AM
    • Loading...
    • sunny74
    • Joined on 10-20-2007, 7:47 PM
    • Posts 512
    • Points 1,365

    Hi,

    you are telling me to use Databind() in the pageLoad event.To which object shud I use to bind the data, the menu control,breadcrumbs or sitemappath.I am a bit confused, since there is no data coming from database.

    Thanks.

    SUBHRANIL BASU RAY
    Mumbai

    TODAY'S TECHNIQUES ARE OBSOLETE FOR TOMORROW'S JOB.
    PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.

  • Re: making a control visible,invisible

    01-30-2008, 6:18 AM
    • Loading...
    • nr2ae
    • Joined on 03-04-2006, 6:55 AM
    • Posts 72
    • Points 323

    The page itself has a Databind() method.

    Check MSDN Library.

    And it not necessary to use Data-Binding with DataSource.

    If you don't have any other Data-Binding syntax, I don't think there should be any error.

     

  • Re: making a control visible,invisible

    01-30-2008, 6:58 AM
    • Loading...
    • ketan.raval.7
    • Joined on 01-15-2008, 4:48 PM
    • Ahmedabad,India
    • Posts 125
    • Points 486

     use style.display="none" for invisible and style.display="block" for visible

    Ketan Raval

    Letsnurture
    Ketan's Leadership Blog
    Ketan's Nurture Blog

  • Re: making a control visible,invisible

    01-31-2008, 12:22 AM
    • Loading...
    • sunny74
    • Joined on 10-20-2007, 7:47 PM
    • Posts 512
    • Points 1,365

    Hi,

    The problem is not yet solved.

    I can see that the SiteMapPath is appearing momentarily but again disappearing immediately.

    It seems to be happening because of Postback even though I kept the code within not postback block as below:

    protected void Page_Load(object sender, EventArgs e)

    {

    if (!IsPostBack)

    {

    //breadcrumbs.Visible = false;

    //MainMenu.Attributes.Add("onmouseover", "mover()");// ID of menu control is MainMenu

    //MainMenu.Attributes.Add("onmouseout", "mout()");

     

    //breadcrumbs.Style.Add("display", "none");

    MainMenu.Attributes.Add("onclick", "showspath()");

    DataBind();

     

    }

     

     

     

     

    }

    How to solve the problem?

    Thanks.

    SUBHRANIL BASU RAY
    Mumbai

    TODAY'S TECHNIQUES ARE OBSOLETE FOR TOMORROW'S JOB.
    PLS MARK MY REPLY "AS ANSWER" IF IT HELPED YOU.

  • Re: making a control visible,invisible

    01-31-2008, 10:35 PM

    sunny74:

    In a web page I am having a menu on top and a SiteMapPath below it.

    Now I want to make the SiteMapPath invisible on page Load event.The SiteMapPath is within a <div>.

    <div id="breadcrumbs" runat="server">

    <asp:SiteMapPath runat="server" ID="smPath" />

    </div>

    So I added runat="server" in the <div> and in the page Load event wrote the folowing:

    if (!IsPostBack)

    {

    breadcrumbs.Visible = false;

    }

    Hi sunny74,

    Perhaps you can try to use the following code snippet to hide the control.

    protected void Page_Load(object sender, EventArgs e)
        {
                  breadcrumbs.Style["display"] = "none";
        }

     And to display the control:

    breadcrumbs.Style["display"] = "";

    Regards,

    Xun

    Regards,
    Xun Ye.
    Microsoft Online Community Support
    Please remember to click “Mark as Answer” on the post that
    helps you, and to click “Unmark as Answer” if a marked post
    does not actually answer your question. This can be beneficial
    to other community members reading the thread.

  • Re: making a control visible,invisible

    01-31-2008, 10:41 PM
    • Loading...
    • suriyamail001
    • Joined on 06-29-2007, 8:27 AM
    • Mumbai
    • Posts 153
    • Points 486

    can u change ur java script like this and try

     window.document.getElementById('breadcrumbs').style.display='block';

    remove client id and then try.

     

    and in div

     <div id="breadcrumbs" style="display:none"> 

     

    it should work. 

     

    If debugging is the process of removing bugs, then programming must be the process of putting them in.

    Suriya
Page 1 of 2 (17 items) 1 2 Next >
RSS Available

Contact | Advertise | Ads by BanManPro | Running IIS7
All Rights Reserved. | Terms of Use | Trademarks | Privacy Statement
© 2009 Microsoft Corporation.

  • ASP.net
  • Silverlight
  • Channel 8
  • Channel 9
  • TechNet Edge
  • IIS
  • MIX
  • MSDN
  • Channel 10
  • Windows Client