How can I use bootstrap icons in #HTML.ActionLink?
When I used this:
#Html.ActionLink("Logout", "Logout", "Admin", new {#class = "glyphicon glyphicon-off" })
It shows this: bootstrap icon, but there is still text.
How do I remove "logout" and just show only the icon?
Unfortunately you cannot pass an empty string as the linkText parameter of the Html.ActionLink helper method.
So write pure HTML to build an anchor tag and set the text as empty. You may use the Url.Action helper method to generate the url to your action method and use the result of that as the href value of the anchor tag.
This should work fine.
Sometimes, it is easy and clean if you create hyperlink manually.
<a href="#Url.Action("Logout", "Admin")">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
You can write a new class to hide anchor texts, this way you can reuse this feature for all anchors by just adding class.
a.hide-text{
line-height: 0;
font-size: 0;
color: transparent;
}
And
#Html.ActionLink("Logout", "Logout", "Admin", new {#class = "hide-text glyphicon glyphicon-off" })
Related
I have a page in my simple application that displays a calendar with the jQuery plugin http://fullcalendar.io/.
I want to add a link to the title such that the user gets navigated somewhere else to a different view. Is this possible? The calendar itself has poor documentation. Specifically I want to add a FontAwesome icon and have it redirect the user on click.
I know that customizing the title is pretty easy – just specify the custom title like this:
<div id="calendar"></div>
<script>
$('#calendar').fullCalendar({
header: {
left: 'prevYear,nextYear',
center: 'title',
},
titleFormat: '[Hello, World!]'
});
</script>
However, I am trying to add a link next to the calendar using a Rails helper link_to. Is this possible? Here is my attempt, but it does not work:
<div id="calendar"></div>
<script>
$('#calendar').fullCalendar({
header: {
left: 'prevYear,nextYear',
center: 'title',
},
titleFormat: '[<%= link_to '<i class="fa fa-icon"></i>'.html_safe, some_path %>']'
});
</script>
You have a typo on this line:
titleFormat: '[<%= link_to '<i class="fa fa-icon"></i>'.html_safe, some_path %>']'
There is an extra single quote after the %>. Try this:
titleFormat: '[<%= link_to '<i class="fa fa-icon"></i>'.html_safe, some_path %>]'
If you still have a problem after fixing that, try looking into what FullCalendar’s titleFormat property supports. I don’t know if FullCalendar tries to allow you to put arbitrary HTML into that property – that property’s docs don’t make it clear. You could check by looking in the rest of FullCalendar’s documentation or its source code that handles that property.
Your use of link_to and html_safe looks good to me.
I am using MVC3, ASP.NET4.5 and Razor.
I have some Html.Action Code, and would ideally like to convert it to Html.ActionLink as I am thinking of using a security extension function that has been written for ActionLinks.
My code is:
<span class="fa fa-pencil ss-prime ss-cmd" title="Edit Order"></span>
Can this be implemented using an ActionLink?
The "fa fa-pencil" code is a webfont, and I need this.
Thanks in advance
If you use an action link, you may need to modify your styles slightly:
Html.ActionLink("edit order", "Edit", "Order"
, new { id= 1 }
, new { #class="fa fa-pencil" }) // <-- html attributes
This will create an a href, but attach the css styles to the a tag, not the span.
<a class="fa fa-pencil" href="/Order/Edit/1">edit order</a>
Html.ActionLink("Edit", "ActionResult", new { CustomerId= DataBinder.Eval(c.DataItem, "CustomerId") }, new { target = "_blank" })
How can i make html.actionlink as image (set image)
Any help will be greatly apreciated.
An ActionLink is, pretty much by definition, a link. The Html.ActionLink method you're calling even accepts the text of the link as its first parameter, so you can expect it to be a text link.
But with slightly more manual HTML, you can create an a tag around an img tag using the same target URL. Just use Url.Action instead of Html.ActionLink. Maybe something like this:
<a href="#Url.Action("ActionName", "ControllerName", new { CustomerId= DataBinder.Eval(c.DataItem, "CustomerId") })" target="_blank">
<img src="yourImage.png" alt="Image Text" />
</a>
Below is my action link . How shall I apply css to the following? Actually i want to give the class as we do in asp.net simple application. Please tell me what shall I do?
I'm not a .net developer, but replace your ActionLink code with this:
<%=Html.ActionLink("Forgot password?", "ForgotPassword", new { #class="my_class" })%>
And add this to your CSS:
.my_class {
color: #fff;
}
You supply HTML attributes as anonymous objects:
<%=Html.ActionLink("Forgot password?", "ForgotPassword", new{ #class="MyCSSClass" })%>
You should use:
<%=Html.ActionLink("Forgot password?", "ForgotPassword", new{ #class="classname" }) %>
I'd like this output:
<a href="\Catalog\Flooring">
<img src="http://site.com/dot.jpg" width="100px" height="100px" alt="" />
<span>Some text here</span>
</a>
using a RouteLink similar to:
<%= Html.RouteLink(myFPV.ProductTypeName, "CatalogType", new { controller = "Catalog", action = "Types", group = myFPV.ProductGroupName, type = myFPV.ProductTypeName })%>
I cannot figure out how to add an <img> and <span> (with text) tags inside my <a> tag.
Make sense?
The first parameter of the RouteLink method is for the link text. But unfortunately, it gets encoded automatically, so you cannot send <, > characters to it. (Well, you can. But they'd get encoded.)
Take a look at this page.
Route values are URL encoded automatically. For example, the string “Hello World!” is
encoded to “Hello%20World!”.
Rendering Image Links
Unfortunately, you can’t use the
Html.ActionLink() helper to render an
image link. Because the
Html.ActionLink() helper HTML encodes
its link text automatically, you
cannot pass an tag to this
method and expect the tag to render as
an image.
Instead, you need to use the
Url.Action() helper to generate the
proper link. Here’s how you can
generate a delete link with an image:
<a href="<%= Url.Action("Delete") %>">
<img src="../../Content/Delete.png" alt="Delete" style="border:0px" />
</a>
I suggest use the Url.RouteUrl.
<a href="#Url.RouteUrl("Default", new { action = "Index", controller = "Department", id = 1 })">
<img src="http://site.com/dot.jpg" width="100px" height="100px" alt="" /> </a>
There is a better option to do that. you should try some thing like
<a href="#Url.RouteUrl("index-lang")">
<img src="~/images/logo.png" alt="">
</a>
where the "index-lang" is the route name in route mapping table.