ASP.Net Hide Left Hand Menu On Home Page - html

Question

I have an asp.net website which is having a left hand menu added to it and have hit an issue as I have found that I am doing a lot of code duplication (which is bad I know). What I want is for the left hand menu to be added to my Site.Master file rather than me having to add it to every single page.
I can do this, but the left hand menu is then displayed on the "Home" page which I don't want so i was thinking that i need some sort of IF statement but I don't know how I can do this as I cant look at the URL as when the user hits the page its the standard naming (e.g. http://www.webaddress.co.uk/)
My left hand menu is a scrolling nav-stacked which is working fine so I will also need to add the JQuery for this to the Site.Master I think.
Current HTML for my 'About Us' page
<asp:Content ID="AboutBodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="col-sm-3 hidden-xs" style="padding-left: 0px">
<div class="follow-scroll">
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li class="active"><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Session/pg1">Session</a></li>
<li><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9">
<h2><%: Title %>.</h2>
<p>Use this area to provide additional information.</p>
<p>Use this area to provide additional information.</p>
<p>Use this area to provide additional information.</p>
</div>
<script type="text/javascript">
(function ($) {
var element = $('.follow-scroll'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 75;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');
$(window).on('scroll', function (event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 300);
});
})(jQuery);
</script>
</asp:Content>
The HTML code below is what I thought of for my Site.Master but as I said it needs to not be displayed on the "Home Page".
<div class="container body-content" style="padding-top: 25px">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-sm-3 hidden-xs" style="padding-left: 0px">
<!-- 'IF' statement to go here so not displayed on Home page -->
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/About">About</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/Session/pg1">Session</a></li>
<li style="border-left: 1px solid lightgray"><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-9" style="padding-right: 0px">
<asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</div>

Answer 1

To solve all the issues, I added an ID and a runat="server" to the container for the menu, and then I could access it in the code behind:
div class="follow-scroll">
<div ID="Sidebar" runat="server" class="col-sm-3 hidden-xs" style="padding-left: 0px">
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Session/pg1">Session</a></li>
<li><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
</div>
</div>
Then, in the codebehind for the master page, I can do something like:
C#:
protected void Page_Load(object sender, EventArgs e)
{
var URL = Request.Url.PathAndQuery;
if(URL == "/default" || URL == "/default.aspx")
{
this.Sidebar.Visible = false;
}
}
This uses PathAndQuery from the HttpContext.Request.Url property, which is a Uri object.
Then I was able to move my JQuery to my site.master file also