I have .net mvc3 web site. And i must to implement top menu. Each of the menu tags is lead to his action and display another view.This what i have now:
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Products", "Products", "Home")</li>
<li>#Html.ActionLink("Pricing", "Pricing", "Home")</li>
<li>#Html.ActionLink("Our Team", "OurTeam", "Home")</li>
<li>#Html.ActionLink("Contact Us", "ContactUs", "Home")</li>
</ul><!-- /menu -->
This view is Html.RenderAction("Header", "Home"); in my layout(because it must to appear in all pages)
I need to implement Custom ActionLink. The anchor text must be:
<span>text</span><b>text</b>
The "text" is Home(for example of first li)
And the current ActionLink must add class :"Selected" to the anchor.
How i can do this? Help please
p.s
I can add this menu for each view in my website with "selected" class of current view, but this is not good solution.
If I understand right you want to put the "selected" class to the current displaying action.
You can do a check in the view by looking at this:
HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString()
HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString()
Then you put the "selected" class to your actionlink the way showed in the previous answer
<li>#Html.ActionLink("Home", "Index", "Home", null, new {#class = ":selected"})</li>
Personally I will create a ViewModel containing a list of "MenuAction" that expose, other than the route values, a bool property "Selected". Imo from the view will be much more cleaner the handling of the data.
You can add class with this ActionLink overload:
<li>#Html.ActionLink("Home", "Index", "Home", null, new {#class = ":selected"})</li>
The 5th parameter is HTML attributes.
MSDN ActionLink of this overload
Update:
$(function(){
var controllerName ='ViewContext.RouteData.Values["Controller"]';
$('#' +controllerName).addClass(':selected');
});
Related
I'm using ASP.NET MVC3. As of now I am restricting anonymous users to enter a particular page through
[Authorize]
in my controller. But what I want is to restrict them to view a tab in the main page if they are not log.in. Is this possible.? Sorry Im not pro in programming. :(
Yeah obcourse. You can do something like this
<li>#Html.ActionLink("Home", "Index", "Home")</li>
#if (Request.IsAuthenticated)
{
<li>#Html.ActionLink("View Account", "Index", "Account")</li>
if (User.IsInRole("Administrator"))
{
<li>#Html.ActionLink("Admin Console", "Index", "Admin")</li>
}
}
reference:Checking authentication and roles in a view
Let me be more specific..What i want to do is that when i click a submenu for example say XYZ is a sub menu of a main menu ABC..when i click XYZ it loads via ajax on the main page i.e ABC..the ajax part is done i dnt how to call it via menu....i'll paste my code to b more clear..
<li>#Html.ActionLink("About Us", "Index", "AboutUs")
<ul>
<li>#Html.ActionLink("Vision & Misson", "Index", "AboutUs")</li>
<li>#Html.ActionLink("Our Ethics", "Index", "AboutUs")</li>
</ul>
</li>
this is an about us page, normaly it is directed to its INDEX page when about us is clicked..HOw ever when you hover on ABout US a drop down menu opens showing to more options:
vision and mission
our ethics......currently both of them are directed to index
what i want is that when i click vision and mission, it should open the partial view of vision and mission directly on the index page of about us...
similarly when 'our ethics' page is clicked it should directly call the partial view 'our ethics' and display it on index page of about us
Change your #Html.ActionLink to #Ajax.ActionLink
<li>#Html.ActionLink("About Us", "Index", "AboutUs")
<ul>
<li>#Ajax.ActionLink("Vision & Misson", "VisionAndEthics", new AjaxOptions {
InsertionMode = InsertionMode.Replace, UpdateTargetId = "divTarget"
})</li>
<li>#Ajax.ActionLink("Our Ethics", "OurEthics", new AjaxOptions {
InsertionMode = InsertionMode.Replace, UpdateTargetId = "divTarget"
})</li>
</ul>
</li>
The insertion mode property is set to replace and the UpdateTargetId property is the id of the HTML container you want to put the result in.
Then in your controller
public PartialViewResult VisionAndEthics() {
return PartialView("VisionAndMission");
}
public PartialViewResult OurEthics() {
return PartialView("OurEthics");
}
This way you could also handle clients with javascript turned off by extending this solution.
I have an code segment of view .cshtml page like :
#Html.ActionLink("Add Charts of Account", "Save")
Run mode i can see following HTML Code:
Add Charts of Account
But i want to following html code :
<a id="lblAddNode" href="/ChartsOfAccount/Save">Add Charts of Account</a>
is it possible? If possible please explain with example code.
There's an overload of the ActionLink helper which allows you to specify routeValues and htmlAttributes:
#Html.ActionLink(
"Add Charts of Account", // linkText
"Save", // actionName
null, // routeValues
new { id = "lblAddNode" } // htmlAttributes
)
In the application that I am trying to make, I have a menu in my view as below:
<ul id="menu">
<li>#Html.ActionLink("Create Project", "Display", "CreateDisplay")</li>
<li>#Html.ActionLink("Open", "About", "Home")</li>
</ul>
where CreateDisplay is the name of a controller and Display is a method in that controller which will call another view.
But, I want the Display method to accept certain parameters like username of the person.
In the current view, I have obtained the username as #ViewData["UserName"]
But I am not able to pass these values using ActionLink.
I tried passing the parameters as
<li>#Html.ActionLink("Create Project", "Display?UserName="+#ViewData["UserName"], "CreateDisplay")</li>
but received an exception.
Please suggest some ways of doing this.
Thank you very much in advance.
You need to use the overload that accepts parameters for route values. See the overloaded method ActionLink() here.
#Html.ActionLink(
"Click me!",
"Display",
"CreateDisplay",
new { UserName = "SetYourValHere" },
null);
This is probably a simple oversight but I'm not seeing the problem so I thought I'd ask for some quick help. I'm somewhat new to MVC also (and Razor) so that might have something to do with it also. Basically, here's what's in my Razor View that renders some list items for a navigation bar. I'm just trying to set a class of "selected" on the element if (according to the Controller name) it's the page being requested.
<li>#{ if(Html.ViewContext.RouteData.Values["controller"].ToString() == "AdminHome")
{
Html.ActionLink("Admin Home", "Index", "AdminHome", null, new { #class = "selected" });
}
else{
Html.ActionLink("Admin Home", "Index", "AdminHome");
}
}
</li>
The result I'm getting is just an empty list item element: <li></li>
Any ideas what I'm doing wrong? Is it just a syntax issue?
You need to prefix # before Html.ActionLink. Otherwise MVC treats this as a ordinary method call not a method that outputs html.
<li>
#if(Html.ViewContext.RouteData.Values["controller"].ToString() == "AdminHome"){
#Html.ActionLink("Admin Home", "Index", "AdminHome", null, new { #class = "selected" });
}
else{
#Html.ActionLink("Admin Home", "Index", "AdminHome");
}
</li>
compare the route name in case insensitve like
String.Equals(Html.ViewContext.RouteData.Values["controller"].ToString() , "AdminHome",,StringComparison.CurrentCultureIgnoreCase)
because route name can be in any case. It is what user has typed in url.
For example in url
www.yourdomain.com/AdminHome/Index (controller name is AdminHome and controller will be AdminHomeController)
but with url
www.yourdomain.com/adminhome/index (controller name is adminhome and controller will be AdminHomeController)
Hope this helps.