I built a web application using ASP.NET Visual Studio 2010 with Master Pages. As you will see that the project gives us a default menu bar item. I have 5 pages (links) listed on those menu bars. Now when a user goes to a specific page I want to highlight that menu bar link. I dont know how to do that :(
I tried this on the Master Page Code Behind but it didnt work too:
foreach (MenuItem item in NavigationMenu.Items)
{
var navigateUrlParams = item.NavigateUrl.Split('/');
if (Request.Url.AbsoluteUri.IndexOf(navigateUrlParams[navigateUrlParams.Length - 1]) != -1)
{
item.Selected = true;
}
}
And in my mark up view I have this:
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" OnMenuItemClick="NavigationMenu_MenuItemClick">
<Items>
<asp:MenuItem Text="Test1"/>
<asp:MenuItem Text="Test2"/>
<asp:MenuItem Text="Test3"/>
</Items>
</asp:Menu>
</div>
So basically whenever user comes to Test1.aspx page, I want the menu item of Test1 to be highlighted. How should I do that?
Any help will be appreciated! Thank you...
Use CSS link classes to implement this:
http://www.w3schools.com/css/sel_active.asp
And unless you "need" to do something programmatic against these link items, use HTML anchor links instead. Create them as list items:
<ul class="menu">
<li>
Link 1
</li>
</ul>
What I'm saying is to question if controls are necessary here (not familiar with your project), and to keep the markup simple whenever possible.
First make sure that your menu items all have an Id property
In your master page code behind in the page Load handler do something like this
if (!Page.IsPostBack)
{
if(Page is Default)
liHome.Attributes["class"] += " active";
}
In this example you would check the "type" of the currently viewed page and append the to the class attribute for the currently navigated link. you could define a css property for active something like
.active
{
background-color: Red;
}
Related
<ul runat="server" id="ulDrop">
<li>Update?</li>
<li>
<asp:DropDownList ID="yesno" ClientIDMode="Static" runat="server">
<asp:ListItem>YES</asp:ListItem>
<asp:ListItem>NO</asp:ListItem>
</asp:DropDownList>
</li>
<li runat="server" id="liDrop" onclick="logout_Click"><span class="ondrop">Logout</span></li>
</ul>
I am trying to handle the onclick method from the LI from code-behind, so I added the following C# code:
public void logout_Click(object sender, EventArgs e)
{
Session.RemoveAll();
Response.Redirect("log-in.aspx");
}
It keeps giving me an error, that the function cannot be found.
I am looking to clear out all session set in the asp.net page when "Logout" is clicked, not just the text but the entire LI and redirect to another page.
Please help me resolve the issue
I would prefer Marcus's answer (Adding a server control "LinkButton"). But If you would like to keep your LI and still call a server side method, as workaround you could do as follows:
Add a hidden button to your form.
<asp:button id="btnId" OnClick="logout_Click" style="display:none"></asp:button>
change your LI to
<li id="liDrop" onclick="logout();"><span class="ondrop">Logout</span></li>
Javascript
function logout()
{
document.getElementById('<%= btnId.ClientID %>').click();
}
The logout_Click method in your ASP.NET code is run on the server. The onclick attribute on the li tag refers to a JavaScript function called logout_Click that is run on the client.
In order to run the code on the server, you need to do a PostBack to the server. To test this, you can change your ASPX code as follows (this might introduce some design changes that you'd have to fix afterwards):
<li id="liDrop">
<asp:LinkButton runat="server"
OnClick="logout_Click"
Text="LogOut" />
</li>
This adds a LinkButton control that posts back to the server so that the logout_Click method is run.
The li element - even with runat="server" - is still a HTML element. When you use the onclick-Attribute of that element, it will treat it as a call to a client side JavaScript-function (which isn't defined).
The code behind is server side and cannot be executed from HTML elements. You need ASP Elements for that to work.
My application has one master page and 5 child page to load inside it.
Contents of Master Page:
1. UserControl (Drop Down)
2. 5 Main Tabs (Child Page loads for every Main Tab Click).
Initially when application loads, all the data is loaded for Drop Down and one of the child page .
so whenever a click on one of the main tab link (its href),so whole page gets reloaded and data will be loaded again for all the controls of the page.
so , i don't want to load the data for my drop down again and again on every Main Tab Click.
As i am working on legacy application every thing is coded, i can't use Update panel for this as a solution because it requires lot of code change.
so i am looking for a solution to keep my Drop Down Data static across all the tabs, even if it refreshes for every tab click.
Why not hide the information in a div and display only each div when its clicked?
...this will keep the links static and only navigate between the pages.
Put all the code on one page:
CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
HTML:
<!-- All static Page data here -->
<ul>
<!-- Menu Links -->
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page X</li>
</ul>
<div id="content">
<div id="div1">
<!-- All Page 1 Data Here -->
</div>
<div id="div2">
<!-- All Page 2 Data Here -->
</div>
<div id="div3">
<!-- All Page 3 Data Here -->
</div>
<div id="divX">
<!-- All Page X Data Here -->
</div>
</div> <!-- Closing the content div tag -->
Let me know how you get on :)
Good Luck
IMO you need to use a common place to store your data , you may use session
fill the session with data on app start -- now on every page refresh / page load keep a check if session has data don't bind the drop down (in user control).
fsCreditCard.Visible = false;
works in some of the code-behind c# code to hide the fieldset, fsCreditCard, defined in .aspx code like this:
<fieldset id="fsCreditCard" runat="server" visible="false">
<legend>Credit Card</legend>
<ul style="margin:50px;font-size:16px;">
<li>
<u><b>Click here</b></u> now to open the PayPal payment window and complete your payment. If you have any trouble, please make sure any pop up blockers are disabled and reload this page.<br /><br />
</li>
</ul>
</fieldset>
Now, when the user clicks on the hyperlink "Click Here", the "OpenPaymentWindow actually is processed but the "fsCreditCard.Visible= false; fsAfterCreditCard.Visible = true;" commands are not done. They do not seem to be javascript commands and they exist elsewhere in C# code. What do you suggest?
Move the logic to show/hide elements into the OpenPaymentWindow JavaScript function and use jQuery selectors, like this:
function OpenPaymentWindow() {
// Logic to open payment window here
// Show/hide DOM elements here
$('#fsCreditCard').hide();
$('#fsAfterCreditCard').show();
$('#fsPaymentOptions').hide();
}
I have created a menu
<asp:Menu ID="Name1" runat="server" OnMenuItemClick="DoSth_MenuItemClick" Visible="true">
<Items>
<asp:MenuItem Text="Function description" Value="Val" ToolTip="ToolTip description" meta:resourcekey="resourceKey">
</asp:MenuItem>
</Items>
</asp:Menu>
And now I want to enalbe/ disable dynamically MenuItem with JavaScript
I tried to do it with the following JavaScript function
function hideMenu() {
var menu = $get('<%=Name1.ClientID %>');
menu.getItems().getItem(0).set_enabled(false);
}
I got menu object however it is HTMLTalbeElement and then it fail in the second line.
Is there a way to do it?
I don't think you can disable a menu item.
As it rendered as anchor tag.
As I think you can set it to javascript:void(0);
You can set the css-class for your menu and submenu.
And use jquery to find the menu and set it's URL to javascript:void(0);
I am using telerik controls in my c# asp.net project. I am trying to disable a div in a telerik navigation menu from the .cs file. For example:
if (Emp_Role == "1" || Emp_Role == "5")
{
DivLeave.Visible = true;
}
I try run the project I get this error:
CS0103: The name 'DivLeave' does not exist in the current context
Here is an example of the aspx code
<telerik:RadMenu runat="server" ID="RadMenu1" Skin="Sitefinity" OnClientItemOpened="itemOpened"
Width="670px" Height="26px" EnableShadows="true">
<Items>
<telerik:RadMenuItem Text="Expenses" PostBack="false">
<Items>
<telerik:RadMenuItem CssClass="Stores" Width="640px">
<ItemTemplate>
<div id="DivLeave" class="Wrapper">
<h3>
Expense Management</h3>
</div>
Can anyone help with this? If I place the div outside the telerik control it works fine. This is so frustrating!
Kind regards,
R
First, you have to use a asp.net control ( or at least a control that runs in server ) to be able to access it from code behind. For example.
<asp:Label ID="DivLeave" runat="server"></asp:Label>
Second, to get a control inside a Telerik control you need som special code. In your example, you can do something like this:
// Find menuitem by css class
RadMenuItem expenses = RadMenu1.FindItem(i => i.CssClass == "Stores");
// Find control inside menuitem
Label label = expenses.FindControl("DivLeave") as Label;
label.Visible = true;
To learn more:
Accessing Controls Inside Templates
Doing it client side will also work and you won't have to make the div become server side.
Using jQuery you can have:
if (Emp_Role == "1" || Emp_Role == "5")
{
Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "show_divleave", "$(function() { $(\"div[id$='DivLeave']\").each(function(index) { $(this).css(\"display\", \"\"); }); });", true);
}
This assumes those div elements are initially hidden using "display: none;" CSS rule.