My project is an asp.net and it has a master page that contains a list
<ul id="navigation">
<li id="li1" runat="server" class="selected">Events</li>
<li id="li2" runat="server">Add Event</li>
<li id="li3" runat="server">Profile</li>
<li id="li4" runat="server">Friends</li>
<li id="li5" runat="server">Find Friends</li>
<li id="li6" runat="server">Schedual</li>
<li>
<asp:LinkButton ID="LogOutButton" runat="server" OnClick="LogOutButton_Click">Log Out</asp:LinkButton>
</li>
</ul>
The selected class (css class) has a picture this picture tells the user on which page he is. How can I change this class using javascript or C# when I navigate?
I don't have a good experience with javascript
document.getElementById("li6").className = "whatever";
Should work/
$("#li1").addClass("selected");
Will work.
Example
This is very simply in JavaScript/jQuery.
But if this is for navigation, meaning it needs to be updated when you display a new page, I would do this in the markup from the server.
You didn't say much about how you are serving this page. But both ASP.NET WebForms and MVC allow you to control the HTML served in a number of different ways.
You can set for all your li tags classes like this for example:
<li class="li">
... content of the tag
</li>
and in your javascript you can add to all elements with class "li" some other class:
$(".li").addClass("classYouWantToAdd");
and in the css file:
.li
{
... needed css for the class
}
here is another post that tells you how to get elements by classname
Selecting a div by classname
Related
What I am trying to do is, add a button on my nav bar if the user is on a certain page (view).
I set my nav bar in my _Layout.cshtml
<ul class="nav navbar-nav">
<li><a asp-controller="Home" asp-action="Index" class="navbar-brand">bethany's Pie Shop</a></li>
<li><a asp-controller="Feedback" asp-action="Index">Feedback</a></li>
</ul>
So something like #IfUser is on Details view, add this list item.
Other answers don't seem to work in .netcore 2.0
In the Razor view, just access :
#this.Path
This will provide Something like :
~/Views/MailBox/Index.cshtml
If the code is in a layout file, to access the page, just write :
#this.ViewContext.View.Path
Then you can compare with a given view easily
Issue: Using roles that I have created in my database, I want to be able to limit use for specific users depending on that users role.
Information: I am not using an MVC approach, only empty .aspx pages that I have wired up through to my database to show information etc. Provided are images of tables that are holding the role/user information in my database Roles , Users , Role/User. Ideally I want to remove items from my menu depending on which role the user is in. So lets say the user is in the role "Worker" they will only see 2 menu "controls" or "buttons" on the aspx page menu.
Attempted solution: On the landing page after a user has logged in, the Page_Load method checks to see which role the user is in and sends them to the appropriate page. The issue with this solution is that I have to create duplicates for every page depending on which role the user is in.
Question: How can I edit the HTML in a aspx webform using the c# code behind.
Question 2: Is there a simple solution to limit use depending on a user's role without have a ton of duplicate aspx pages.
Please let me know if there is more information needed.
The menu is created in the HTML on the aspx form like this:
<ul id="centered">
<li><a href='Welcome.aspx'><span>Home</span></a></li>
<li class='active has-sub'>
<a href='#'><span>Sales</span></a>
<ul>
<li class="active has-sub">
<a href='#'><span>Sales</span></a>
<ul>
<li><a href='Sales.aspx'><span>Create</span></a></li>
<li><a href='Sales.aspx'><span>View</span></a></li>
</ul>
</li>
</ul>
</li>
You need to mark you menu ul to runat="server" and give it a unique id.
<ul id="centered">
<li><a href='Welcome.aspx'><span>Home</span></a></li>
<li class='active has-sub'>
<a href='#'><span>Sales</span></a>
<ul>
<li class="active has-sub">
<a href='#'><span>Sales</span></a>
<ul runat="server" id="ul_menu">
<li><a href='Sales.aspx'><span>Create</span></a></li>
<li><a href='Sales.aspx'><span>View</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
Here I have change to <ul runat="server" id="ul_menu">
Now you can use this id ul_menu and add item to this from code behind on the basis of role of the user. for example --
protected void Page_Load(object sender, EventArgs e)
{
PopulateMenu();
}
private void PopulateMenu()
{
string role = "B";//You can get the role of logged in user from membeship
StringBuilder txt = new StringBuilder();
if (role == "A")
{
txt.Append("<li><a href='Sales.aspx'><span>Create</span></a></li>");
}
if (role == "B")
{
txt.Append("<li><a href='Sales.aspx'><span>View</span></a></li>");
}
ul_menu.InnerHtml = txt.ToString();
}
I have an unsorted html list in form of of a string like this:
<ul class="localizations">
<li>
English
</li>
<li>
German
</li>
<li>
French
</li>
</ul>
(note that the href attribute can be completely arbitrary)
Now I am looking for a way in my View to parse this string in a way that will result in an array that has the link text as index, and the link's href attribute as value, so I can later use ... to get the german link, etc.
I'm also thinking about using this to generate rel="alternate" hreflang="x" links in the <head> so I can't use JS at runtime but have to do this in c#/razor in the masterpage when the page is created.
I am rather new to asp.net/c#/mvc, could somebody please point me in the right direction?
Could anyone guide me how to use MVC html helper to implement to get the same html output below . I am a junior MVC developer trying to learn the stuff.
<ul class="nav fl mrgtp7m nodisp-ie7">
<li class="prdctType">
<a class="selected" id="A1">Infy Plus®</a>
<ul class="subnav" id="Ul1"><li><a>Infy Test Plus®
</a></li><li><a>Infy® Test General</a></li></ul>
</li>
</ul>
Tried it with HTML dropdown helper but did not get same result.Not sure how can i apply above CSS classes in helper class to achive the same above
<ul class='nav fl mrgtp7m nodisp-ie7'>
<li class='prdctType'>
#Html.DropDownListFor("Test", new SelectList(listItems , "Value" , "Text") )
</li>
</ul>
You don't need any helper classes for this. Use foreach with your model based on the logic that need to implement.
I use asp.net 4 and C#.
I have some nested Master Pages; I display in my Content Page a list of Links using a repeater.
This is a sample of code generated by ASP.NET as read in the Source code in the Browser.
As you can see the ID is very lengthy.
My question:
How can I have control on the ID generated, so I can chose another format much shorter?
Please keep in mind that I cannot get rid of Master Pages for my layout.
Thanks for your help on this!
<li>
<a id="ContentBody_ContentColumn2_latestArticle_uxRepeaterLatestArticles_uxLink_0" href="Category.aspx?CategoryId=8">AAAAA</a>
</li>
<li>
<a id="ContentBody_ContentColumn2_latestArticle_uxRepeaterLatestArticles_uxLink_1" href="Category.aspx?CategoryId=12">BBBBB</a>
</li>
I would like instead an ID like:
ID="CB_CC_LA_R_0"
ID="CB_CC_LA_R_1"
Useful article:
http://www.west-wind.com/weblog/posts/2009/Nov/07/ClientIDMode-in-ASPNET-40
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
http://beyondrelational.com/blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx
Replace the asp:HyperLink with plain HTML anchor tag and use following markup for it:
<a id='CB_CC_LA_R_<%# Container.ItemIndex %>' href='<%# Eval("IndexPropertyName", "Category.aspx?CategoryId={0}") %>' >
<%# Eval("TextPopertyName") %>
</a>