This question already has answers here:
how to generate Html.ActionLink with icon
(8 answers)
Closed 5 years ago.
I am making an MVC project with basic CRUD functionalities.
In the Index view I have the standard edit and delete links. Which can be clicked for each content item.
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ContentItemID })>
</td>
<td>
#Html.ActionLink("Delete", "Delete", new { id = item.ContentItemID })
</td>
While this works fine. I want the edit and delete link to be an icon instead of just plain text. I have tried a couple of things but all of them deleted the new { id = item.ContentItemID }
Which I do need to have in my edit and delete so I can select a specific item to edit or delete.
I would like to use the font awesome <i class="fa fa-trash-o" style="font-size:22px;" aria-hidden="true"></i> and the <i class="fa fa-pencil-square-o" style="font-size:22px;" aria-hidden="true"></i>
Is there a possibility for me to do this?
Actionlink is just a generated URL , you can for example concatenate it as an alternative , something like this:
<i class="fa fa-pencil-square-o" style="font-size:22px;" aria-hidden="true"></i>
Html.ActionLink just generates an <a> tag for you. So you can use Url.Action for generating the link.
<a href="#Url.Action("Edit", new { id = item.ContentItemID })>
<i class="fa fa-pencil-square-o" style="font-size:22px;" aria-hidden="true"></i>
</a>
#Html.ActionLink automatically encodes the text you specify. You can implement your own version of that methods that doesn't encode, and keep using the HtmlHelper. This is more reliable than concatenating, since this will not work if routes change in the future.
You can find a sample implementation here.
Related
This question already has answers here:
ASP.NET Actionlink with glyphicon and text with different font
(10 answers)
Closed 5 years ago.
I have this anchor element that displays glyphicon and some style:
<a href="#" class="btn btn-3d btn-xlg btn-reveal btn-brown">
<i class="glyphicon glyphicon-arrow-right"></i>
<span>REVEAL EXTRA LARGE</span>
</a>
In my project I use HTML helper to create anchor elements.
I have this html helper to create anchor element:
#Html.ActionLink(item.Name, "About", "Home", item, new { #class = "btn btn-3d btn-xlg btn-reveal btn-brown" })
But I don't know how to add <i class="glyphicon glyphicon-arrow-right"></i> element to the HTML helper.
How can I define <i class="glyphicon glyphicon-arrow-right"></i> inside HTML helper?
Use #Url.Action
<a href="#Url.Action("About", "Home")" class="btn btn-3d btn-xlg btn-reveal btn-brown">
<i class="glyphicon glyphicon-arrow-right"></i>
<span>REVEAL EXTRA LARGE</span>
</a>
Normally, i would write something like this:
<li>#Html.ActionLink("Dashboard", "Index", "Account")</li>
To generate this:
Dashboard
What i want to know is whether it is possible to generate the following HTML
<i class="fa fa-dashboard"></i> Dashboard
Without having to create my own custom TagBuilder class.
Thanks for the help.
You can use UrlHelper.Action to generate the url:
<a href="#Url.Action("Index", "Account")">
<i class="fa fa-dashboard"></i> Dashboard
</a>
I use Html.MenuItem helper in asp .net mvc. I want to use html inside link instead of text only. The helper below:
#Html.MenuItem("Announcement", "Index", "Announcement")
generates in html =>
<li> Announcement </li>
but I want to generate an html like =>
<li>
<a href="/Announcement">
<i class="icon-announcement"></i>
<span>Announcement</span>
</a>
</li>
How can I do that?
You can't do that immediately, because the HTML gets stripped if you pass it in as the parameter.
I suggest you do something like the following:
<li>
<a href='#Url.Action("Announcement", "Index")'>
<i class="icon-announcement"></i>
<span>Announcement</span>
</a>
</li>
How can I generate action link with custom html inside.
Like following:
<a href="http://blah-blah/.....">
<span class="icon"/>
New customer
</a>
You can use the UrlHelper class :
<a href="<% =Url.Action("Create","Customers") %>">
<span class="icon"/> New customer
</a>
The MSDN link is here : http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.aspx
For newer versions of .net,
replace
href="<% =Url.Action("Create","Customers") %>"
with
href="#Url.Action("Create","Customers")"
to give something like
<a href="#Url.Action("Create","Customers")">
<span class="icon"/> New customer
</a>
Currently, I have code like this :
<% if (consumer.IsDischarged)
{ %>
<%= Html.ActionLink("<img src=\"../../Images/ConsumerImages/computer_go.png\" alt=\"discharged\" style=\"border:\"0\"/>", "Details", new { id = consumer.ApsId })%>
<%}
%>
Basically I want to show the hyperlinked image whenever the status of the isDischarged property of the consumer object is true. Any help or suggestions are highly appreciated.
a simple way could be
<a href="/Details/<%=consumer.ApsId%>"
<img src="../../Images/ConsumerImages/computer_go.png" alt="discharged" style="border:0"/>
</a>
You can try something like this. Use Url.Action to get the url and then you can put insert the hyperlinked image normally rather than trying to use Html.ActionLink.
<a href="<%= Url.Action("Details", new { id = consumer.ApsId }) %>">
<img src="../../Images/ConsumerImages/computer_go.png" alt="discharged" style="border:"0" />
</a>