I am doing front-end dev work and being exposed to C# for the first time. I am trying to change a menu navigation so that each list item is clickable, rather than just what is inside each list item. Example (if it were static HTML):
<li>LINK</li>
change to
<li>LINK</li>
this menu is using HTML.ActionLink however, so it looks like this:
<li>#Html.ActionLink("Blah", "Index", "blahBlah", new { area = "Shared" }, null)</li>
how would I change this so the link is applied to the whole list item?
Thanks!
You may use the Url.Action method along with typical HTML markup.
<li>LINK</li>
This will generate markup like this
<li>LINK</li>
Change the parameters(action method/controller names) values of Url.Action method as needed.
Url.Action helper method generates a fully qualified URL to an action method.
Related
I am following this msdn example Add Column Sort Links to the Students Index Page
And exactly like the example am trying to add links to my current page with some additional query parameters.
While using (exactly as the msdn example)
<a asp-action="Index" asp-route-sort="foo">Link</a>
The query parameter is not generated. The link i get is the same as my current url.
https://localhost:44346/clients
If i add the controller also on the tag helper , everything works fine.
<a asp-controller="Clients" asp-action="Index" asp-route-sort="foo">Link</a>
And i get
https://localhost:44346/Clients?sort=foo
In this Razor syntax:
<a asp-controller="Home" asp-action="Index">Home</a>
#foreach (LinkNodeModel link in Model.ControlActions)
{
link.LinkTree();
}
The "Home" link renders just fine, but the manually rendered <a> strings don't get turned into a valid link.
LinkTree() is implemented like this:
return $"<a asp-controller=\"{Controller}\" asp-action=\"{Action}\">{Name}</a>";
When I print the links with the #link.LinkTree(), the output contains a line with just the code displayed, which doesn't link.
With #Html.Raw(link.LinkTree()) I get the links, but they are not clickable as they actually print the asp-controller/asp-action attributes to the HTMLinstead of generating the href.
Is it possible to generate and render links like these dynamically? And if so, how?
HTML code, or actually any text, returned from methods is not processed by the Razor engine, so you cannot use HTML tag helpers here.
What you can do however is call the “classic” HtmlHelper.ActionLink method (or one of the more helpful extension methods) to return a properly rendered a tag for a controller action.. Since it’s just a normal method, you can call it within your own method.
For example, you could pass in the IHtmlHelper object into your method:
#foreach (LinkNodeModel link in Model.ControlActions)
{
link.LinkTree(#Html);
}
And then in your method, just use a ActionLink overload to create the link:
public IHtmlContent LinkTree(IHtmlHelper helper)
{
return helper.ActionLink(Name, Action, Controller);
}
Alternatively, you can also expose those three properties on your object and write the link properly with Razor:
#foreach (LinkNodeModel link in Model.ControlActions)
{
<a asp-controller="#link.Controller" asp-action="#link.Action">#link.Name</a>
}
The tag helpers, which convert <a asp-controller="$controller" asp-action="$action"> to <a href="/$controller/$action"> are opt-in as described in Introducing TagHelpers in ASP.NET MVC 6, so you'll need to configure your application to use them:
This is best placed in the _ViewImports.cshtml file, which is a new Razor file also introduced in ASP.NET 5:
#addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
I have navigation and many link on my webproject from html action links.
They are ugly with underline. I would like to insert some image with name or play with styles of action link.
Is it possible? How to do that?
Thanks and take care,
Ragims
You could use css to remove the underlines or place a backgroundimage,
otherwise you could also just create the link like so:
<img src="yourimg.jpg" />
Html.ActionLink and Url.Action return the same URL. The difference is that the first creates an HTML element while the second returns just the URL to that action.
Another option is to use Url.RouteUrl or Html.RouteLink to create a link based off your route (to an action) instead of directly to an action.
One solution is to create an HtmlHelper extension method for creating an image-specific action link. A detailed tutorial can be found here.
If You are on MVC 3-4 with razor view engine then this may help you-
#Html.ActionLink("your link Name", "Action Method", "Controller",
new { style = "background-image:url('.././Images/imageyouwanttoshow.png')" },null)
Instead of using #Html.ActionLink("linkname","action","controller")
you can use following
<a href='#Url.Action("action", "controller")'>
<img src='#Url.Content("~/images/imageName.png")' />
"images" is my folder for storing the images.
#Url.Content() is to know the path.
You can pass your action and the controller for that action to #Url.Action().
#Url.Action() works similar to the #Html.ActionLink().
Now your link will get replaced by the image.
I want to implement my navigation tabs somewhat like the ones on this site, and I've heard that this was built using ASP.Net MVC. If I'm on stackoverflow.com/users, than the "Users" menu tab is orange and all others stay grey, same if a different tab is selected.
I am pretty good with manipulating the css to change color when it's hovered or selected, etc, and adding/removing/authorizing items in the menu container, but not familiar with how to change the color of the tab based on the tab page that I'm on. Any quick and dirty way to accomplish this?
Assign a unique id to the body element of each page (e.g. <body id="users">). In ASP.NET MVC you could have the body tag in your master page written like:
<body id="<%= ViewData["bodyId"] %>">
And in the Controller methods for each page put something like ViewData["bodyId"] = "users"; to dynamically assign the id for each page.
Then in your nav markup, assign a class with the same name on the <a> tag that links to that page:
<ul>
<li>Users</li>
<li><!-- more links --></li>
</ul>
Then in the css do something like this:
body#users a.users, body#another-page a.another-page {
/* include rules for how you want the current page tab to appear */
}
That will assign your "current page" styles to any link tag with a class that matches the body tag id.
Further to what Bryan mentioned, I usually add a "CssClass" property to my view model in cases like this. It's also useful for the situation where the calculation of the CssClass is a little complex (since it can be tested in a VM).
I have a form to which I want to add extra fields depending on the value of a dropdown list. They would be sets of fields and I was thinking on dynamically changing a div's content with the html from a render partial, which would render a PartialView with the fields I want.
Right now the code for the drop down list is the following
<p>
<label for="CatalogItem.Type"> Type: </label>
<%=Html.DropDownList("CatalogItem.Type",Model.Types, "Choose Type") %>
</p>
<div id = "ExtraInfo">
</div>
And I want to put the extra stuff (fields specialized for the type) in the ExtraInfo div. What would the jQuery code be for this?
Thanks!
#Tony has the right approach but instead of putting your RenderPartial html right into the ".html("add html code inside div here")" you may want to do an ajax call. That way the user isn't downloading a bunch of html he/she may not even see.
something like so:
if ( myval == "someValue")
{
$("#ExtraInfo").load("/dynamic-stuff/1")
}
else if ( myval == "someOtherValue")
{
$("#ExtraInfo").load("/dynamic-stuff/2")
}
This also assumes you have a route set up to handle a url like "/dynamic-stuff/2" and responds with the correct partial view.
First add a css class selector to your dropdown, lets call it 'mydropdown' for now
use something like this:
<script language=”javascript” type=”text/javascript” >
function addtoDiv()
{
$(document).ready(function() {
var myval=$(”#mydropdown”).val(); // get value of dropdown
if ( myval == "somevalue") // check myval value
{
$("#ExtraInfo").html("add html code inside div here"); // add code based on value
}
}}
</script>
Do you need to dynamically add fields? You can add fields with JQuery by doing:
$("").attr("id", "test").addClass("FormLabel").appendTo("#parentElement");
$("").attr("id", "testinput").attr("type", "text").appendTo("#parentElement");
In this way, you can create the fields programmatically.
As an alternative, you can create a JQuery partial view. Create an action method that returns an instance of this partial view, and call that action method using
$.get("/<controller>/<actiontoreturnpartialview>", function(data) {
$("#ExtraInfo").html(data);
});
It makes it easier because then you can rely on server-side logic to render the UI, though I tend to use the client-side approach.
Alternatively, you can create your own HTML helper to do this all, but that would be a lot of work.
HTH.