I'm new to ASP.NET and I've been trying write code to show and hide certain elements on link's onclick event, but no matter what I try, nothing's working. Here's my scenario...
I have a MasterPageFile with 3 ContentPlaceHol ders. One for navigation (links which call the web forms which populate the main content placeholder), one for sub-categories (should there be) and one for the main content (which gets populated with web forms).
If I have a link which contains sub-categories, the sub-categories ContentPlaceHol der should populate with the links for each sub-category respectively. The idea is to use the sub-category links to jump to a specific place on the page.
The problem I'm having is that I can't seem to show or hide the sub-categories ContentPlaceHol der, no matter what I try. Here's what I've tried:
JavaScript...
I tried using it like this (in my individual web forms):
I've also tried using the code-behind file, like this:
...and calling it like this:
The ContentPlaceHol der on my individual web forms look like this:
And on my MasterPageFile. ..
I usually get errors when loading pages using the JavaScript function, using the 'block' and 'none' display. The error message isn't really clear and it doesn't pin-point the location of the error. It usually says I'm missing a '{', but I can't see that I am...
What am I doing wrong?
Any assistance would be appreciated...
I have a MasterPageFile with 3 ContentPlaceHol ders. One for navigation (links which call the web forms which populate the main content placeholder), one for sub-categories (should there be) and one for the main content (which gets populated with web forms).
If I have a link which contains sub-categories, the sub-categories ContentPlaceHol der should populate with the links for each sub-category respectively. The idea is to use the sub-category links to jump to a specific place on the page.
The problem I'm having is that I can't seem to show or hide the sub-categories ContentPlaceHol der, no matter what I try. Here's what I've tried:
JavaScript...
Code:
<script type="text/javascript">
function hideControl(controlID)
{
document.getElementById(controlID).style.visibility = 'hidden';
}
function showControl(controlID)
{
document.getElementById(controlID).style.visibility = 'visible';
}
</script>
Code:
<script type="text/javascript">
function hideControl(controlID)
{
document.getElementById(controlID).style.display = 'block';
}
function showControl(controlID)
{
document.getElementById(controlID).style.display = 'none';
}
</script>
I tried using it like this (in my individual web forms):
Code:
<%@ Page Language="C#" MasterPageFile="~/MasterPageFile.master" Title="Page Title" %> <asp:Content ID="Content1" ContentPlaceHolderID="mainContent" Runat="Server"> <div class="bodyBackgroundLeft_ContentDIV"><a class="subMenuItems" href="#" style="text-decoration: none; padding-right: 92px; overflow: visible" onclick="showControl(Content3)">Link 1</a></div> <div class="ClassLink"><a class="subMenuItems" href="#" style="text-decoration: none" onclick="hideControl(Content3)">Link 2</a></div>
I've also tried using the code-behind file, like this:
Code:
void hideContentPlaceHolders()
{
ContentPlaceHolder cph = (ContentPlaceHolder)this.Page.Master.FindControl("subContent");
cph.Visible = false;
}
void showContentPlaceHolders()
{
ContentPlaceHolder cph = (ContentPlaceHolder)this.Page.Master.FindControl("subContent");
cph.Visible = true;
}
...and calling it like this:
Code:
<%@ Page Language="C#" MasterPageFile="~/MasterPageFile.master" Title="Page Title" %> <asp:Content ID="Content1" ContentPlaceHolderID="mainContent" Runat="Server"> <div class="bodyBackgroundLeft_ContentDIV"><a class="subMenuItems" href="#" style="text-decoration: none; padding-right: 92px; overflow: visible" onclick="showContentPlaceHolders()">Link 1</a></div> <div class="ClassLink"><a class="subMenuItems" href="#" style="text-decoration: none" onclick="hideContentPlaceHolders()">Link 2</a></div>
The ContentPlaceHol der on my individual web forms look like this:
Code:
<asp:Content ID="Content3" ContentPlaceHolderID="subContent" runat="server">
<div class="Link1"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
<div class="Link2"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
<div class="Link3"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
</asp:Content>
And on my MasterPageFile. ..
Code:
<div style="width: 185px; position: absolute; z-index: 5; margin-left: 0px; margin-top: 280px;">
<div class="bodyMenuTop"></div>
<div style="background-color: White; width: 185px; height: 220px;">
<asp:ContentPlaceHolder ID="subContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="bodyMenuBottom"></div>
</div>
I usually get errors when loading pages using the JavaScript function, using the 'block' and 'none' display. The error message isn't really clear and it doesn't pin-point the location of the error. It usually says I'm missing a '{', but I can't see that I am...
What am I doing wrong?
Any assistance would be appreciated...
Comment