#Html.ActionLink("Edit Me", "Edit", new { id=item.ID })
In the above example, how do I make "Edit Me" bold? I tried placing <b></b> around the text but the bold tags are displayed literally. Instead of "Edit Me", the link displays "<b>Edit Me</b>".
Thanks!
PS - I'm using the MVC 4 beta but I don't see a tag that is that specific.
The easiest way is using the style attribute like:
#Html.ActionLink("Edit Me", "Edit", new { id=item.ID, style="font-weight:bold;" })
or you can set a class which you define in your css to be bold
#Html.ActionLink("Edit Me", "Edit", new { id=item.ID, #class="yourBoldClass" })
CSS: .yourBoldClass { font-weight: bold; }
I dont usually apply styles to an ACtionLink method because i think it is not a clean approach. Instead i will use a css class and define my style there and use that it in my link like this
#Html.ActionLink("Edit Me", "Edit","yourControllerName", new { id=item.ID },new {#class="yourClassName"})
and have a css class like this
.yourClassName
{
font-weight:bold;
}
you are using this constructor here
public static MvcHtmlString ActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
Object routeValues,
Object htmlAttributes
)
Here is the documentation : http://msdn.microsoft.com/en-us/library/dd504972.aspx
You can just put your url between <b></b> like that:
<b> #Html.ActionLink("Edit Me", "Edit", new { id=item.ID }) </b>
but the version with css is better
You cannot insert html in the link text with Html.ActionLink.
Write the <a> "by hand" (or create a new helper):
<b>"Edit Me"</b>
Or add a class to the link and do the "bolding" with CSS.
Related
Would enter Glyphicons Boostrap instead of "Edit" in the code below. Could you give me an example to do.
#Html.ActionLink("Edit", "Edit", new { id = Model.id_rod }) |
To bring up the image instead of writing.
If using Bootstrap 3:
<a href="#Url.Action("Edit", new { id = Model.id_rod })">
<i class="glyphicon glyphicon-pencil"></i>
<span class="sr-only">Edit</span>
</a>
Note the use of sr-only will allow users of screen readers and search engines to know what the link is for.
I made helper for easier re-use
Helper Method Extension class
namespace Extensions {
public static class HtmlExtensions {
public static MvcHtmlString FALink(this HtmlHelper htmlHelper, string action, string controller, string link_text, string fa_class, string btn_css_classes = "", string button_id = "", object route_values = null) {
// declare the span for the glyphicon
TagBuilder span = new TagBuilder("span");
span.AddCssClass($"fa fa-{fa_class}");
span.MergeAttribute("aria-hidden", "true");
// declare the anchor tag
TagBuilder anchor = new TagBuilder("a");
// Add the href attribute to the <a> element
if (string.IsNullOrEmpty(controller) || string.IsNullOrEmpty(action))
anchor.MergeAttribute("href", "#");
else
anchor.MergeAttribute("href", new UrlHelper(HttpContext.Current.Request.RequestContext).Action(action, controller, route_values));
// Add the <span> element and the text to the <a> element
anchor.InnerHtml = $"{span} {link_text}";
anchor.AddCssClass(btn_css_classes);
anchor.GenerateId(button_id);
// Create the helper
return MvcHtmlString.Create(anchor.ToString(TagRenderMode.Normal));
}
}
}
Make sure you include the namespace in the View so method is available
Example usage in Razor View (Leave area empty string if your not using areas)
#Html.FALink("Index", "ControllerNameHere", "Back to List", "th-list", "btn btn-info", "btn_back_to_list", new {area=""})
While I use Font Awesome you could easily replace fa with glyphicon class to use the bootstrap glyphicons.
If no controller or Action is passed in, it uses # as the link location so it will play nice with drop down interaction
I have a WebGrid definition and three links in a single column by using Html.ActionLink. But, when I do not use "LinkText" property, the applicantId property is passed as null value to the Controller.
On the other hand, when just using LinkTexts instead of " ", the id parameters can be passed successfully (Types as "My Link Text" below). However, I do not want to display text on the link and I just wanted to display Image.
I think there might be a typing mistake or there would be another ways suitable for MVC4 Razor like #Url.Action, etc. Here is my code in Razor View.
Could you help me please?
Thanks in advance.
View:
//for using multiple Html.ActionLink in a column using Webgrid
grid.Column("Operations", format: (item) =>
new HtmlString(
Html.ActionLink("My Link Text", "Edit", "Admin", new
{
applicantId = item.ApplicantID,
title = "Detail",
#class = "icon-link",
style = "background-image: url('../../Content/icons/detail.png')"
}, null).ToString() +
Html.ActionLink(" ", "Edit", "Admin", new
{
applicantId = item.ApplicantID,
title = "Edit",
#class = "icon-link",
style = "background-image: url('../../Content/icons/edit.png')"
}, null).ToString() +
Html.ActionLink(" ", "Edit", "Admin", new
{
applicantId = item.ApplicantID,
title = "Delete",
#class = "icon-link",
style = "background-image: url('../../Content/icons/delete.png')"
}, null).ToString()
)
)
<style type="text/css">
a.icon-link {
background-color: transparent;
background-repeat: no-repeat;
background-position: 0px 0px;
border: none;
cursor: pointer;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
}
</style>
Your Action Links are not being called correctly. You are adding the Html Attributes to your Route Values. Your Action Links should look like this:
Html.ActionLink("My Link Text", "Detail", "Admin", new
{
applicantId = item.ApplicantID
}, new
{
title = "Detail",
#class = "icon-link"
})
Check this link to see how you can hide the link text, and display an image instead using css: CSS Hide Text But Show Image?
You could use custom HTML Helper method in order to use it easily. To do this:
Create a folder called HtmlHelpers and create a class named MyHelpers in this folder. Then define your class like below (you might improve it by adding some extra properties).
MyHelpers.cs:
using System;
using System.Web.Mvc;
namespace <YourProjectName>.WebUI.HtmlHelpers
{
public static class MyHelpers
{
public static MvcHtmlString ImageLink(this HtmlHelper html, string imagePath, string alt, string cssClass,
string action, string controllerName)
{
return ActionImage(html, imagePath, alt, cssClass, action, controllerName, null);
}
public static MvcHtmlString ImageLink(this HtmlHelper html, string imagePath, string alt, string cssClass,
string action, string controllerName, object routeValues)
{
var currentUrl = new UrlHelper(html.ViewContext.RequestContext);
var imgTagBuilder = new TagBuilder("img"); // build the <img> tag
imgTagBuilder.MergeAttribute("src", currentUrl.Content(imagePath));
imgTagBuilder.MergeAttribute("title", alt);
imgTagBuilder.MergeAttribute("class", cssClass);
string imgHtml = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
var anchorTagBuilder = new TagBuilder("a"); // build the <a> tag
anchorTagBuilder.MergeAttribute("href", currentUrl.Action(action, controllerName, routeValues));
anchorTagBuilder.InnerHtml = imgHtml; // include the <img> tag inside
string anchorHtml = anchorTagBuilder.ToString(TagRenderMode.Normal);
return MvcHtmlString.Create(anchorHtml);
}
}
}
Rebuild your project and then add this line to your Razor View:
#using .WebUI.HtmlHelpers
Then use this Html Helper method in your View like this:
#Html.ImageLink("../../Content/icons/delete.png", "Delete", "your-class", "Delete", "Admin", new { item.ApplicantID })
Smilarly, if you want to use multi image link in the same column you can merge html strings like that:
View:
....
grid.Column("Operations", style: "your-class", format: (item) =>
new HtmlString(
#Html.ActionImage("../../Content/icons/detail.png", "Detail", "your-class", "Detail", "Admin", new { item.ApplicantID }).ToString() +
#Html.ActionImage("../../Content/icons/edit.png", "Edit", "your-class", "Edit", "Admin", new { item.ApplicantID }).ToString() +
#Html.ActionImage("../../Content/icons/delete.png", "Delete", "your-class", "Delete", "Admin", new { item.ApplicantID }).ToString()
)
)
...
I have this link in clean HTML. I want to make it into a MVC ActionLink. But how is that possible. I cant understund, seems there is no easy way. OR?
<li class="active"><i class="icon-home icon-large"></i> Dashboard</li>
Any ideas?
You have several options for doing this.
Option 1:
<li class="active"><i class="icon-home icon-large"></i> Dashboard</li>
Option 2:
Write your own extension method for HtmlHelper, that takes in a String/MvcHtmlString and put it into the link tag, without html encoding it.
public static MvcHtmlString SpecialActionLink(this HtmlHelper html, String action, String controller, String innerHtml) {
TagBuilder tag = new TagBuilder("a");
tag.MergeAttribute("href", new UrlHelper(html.ViewContext.RequestContext).Action(action, controller));
tag.InnerHtml = innerHtml;
return new MvcHtmlString(tag.ToString(TagRenderMode.Normal));
}
(Haven't tested it, but should give you an idea on how to do it.)
<li class="active">
#Html.ActionLink("Dashboard", //Title
"Index", // Action
"Home", // Controller
new { #class = "home-icon"} // htmlAttributes
)
</li>
.home-icon{ /*Some CSS to set the background image (not tested) */
padding:16px;
background:transparent url('path-to-image.png') .... ;
}
You Can't use ActionLink. only way is #url.action
<span>This is a test</span>
Is there anything wrong with this html? I want to have a link in the masterpage to navigate to "CreateParts" view. I have action 'CreateParts' which have a parameter parentPartId in the controller 'PartList'.
<li id="taskAdminPartCreate" runat="server">
<%= Html.ActionLink("Create New Part", "CreateParts", "PartList", new { parentPartId = 0 })%></li>
My controller action is like
public ActionResult CreateParts(int parentPartId)
{
HSPartList objHSPart = new HSPartList();
objHSPart.Id = parentPartId;
return View(objHSPart);
}
When I click on 'Create New Part' in the menu in SiteMaster, I get exception. Please help me out of this.
You are using incorrect overload. You should use this overload
public static MvcHtmlString ActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
Object routeValues,
Object htmlAttributes
)
And the correct code would be
<%= Html.ActionLink("Create New Part", "CreateParts", "PartList", new { parentPartId = 0 }, null)%>
Note that extra parameter at the end.
For the other overloads, visit LinkExtensions.ActionLink Method. As you can see there is no string, string, string, object overload that you are trying to use.
You are using the incorrect overload of ActionLink. Try this
<%= Html.ActionLink("Create New Part", "CreateParts", "PartList", new { parentPartId = 0 }, null)%>
Addition to the accepted answer:
if you are going to use
#Html.ActionLink("LinkName", "ActionName", "ControllerName", new { #id = idValue, #secondParam= = 2 },null)
this will create actionlink where you can't create new custom attribute or style for the link.
However, the 4th parameter in ActionLink extension will solve that problem. Use the 4th parameter for customization in your way.
#Html.ActionLink("LinkName", "ActionName", "ControllerName", new { #id = idValue, #secondParam= = 2 }, new { #class = "btn btn-info", #target = "_blank" })
I'm new to MVC and would like to add a link to something like ~/Destinations/35, where it would refer to the Index view of the Destinations controller, and 35 is the ID of the destination to be displayed.
Neither ActionLink() or RouteLink() appear to allow me to create a link such as this.
Also, I tried something like this:
<table>
#foreach (var d in ViewBag.Results)
{
<tr>
<td>
#Html.ActionLink(
String.Format("<b>{0}</b>", #Html.Encode(d.Title)),
"Details", "Destinations")
</td>
</tr>
}
</table>
But I get the following error on the ActionLink line, which I don't understand.
'System.Web.Mvc.HtmlHelper' has no applicable method named 'ActionLink' but appears to have an extension method by that name. Extension methods cannot be dynamically dispatched. Consider casting the dynamic arguments or calling the extension method without the extension method syntax.
Can someone help me create this link?
The first problem with your code is that you are trying to use HTML in the link text (the <b> tags) which is not possible because by design it always HTML encodes.
So assuming you didn't want HTML in the link you could do this:
#Html.ActionLink(d.Title, "Details", "Destinations", new { id = "35" }, null)
And assuming you need HTML inside the anchor you have a couple of possibilities:
Write a custom ActionLink helper which won't HTML encode the text (recommended) and then use like this:
#Html.MyBoldedActionLink(d.Title, "Details", "Destinations", new { id = "35" }, null)
Something along the lines:
<a href="#Url.Action("Details", "Destinations", new { id = "35" })">
<b>#d.Title</b>
</a>
and since I recommend the first approach here's a sample implementation of the custom helper:
public static class HtmlExtensions
{
public static IHtmlString MyBoldedActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
object routeValues,
object htmlAttributes
)
{
var anchor = new TagBuilder("a");
anchor.InnerHtml = string.Format("<b>{0}</b>", htmlHelper.Encode(linkText));
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
anchor.Attributes["href"] = urlHelper.Action(actionName, controllerName, routeValues);
anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));
return new HtmlString(anchor.ToString());
}
}