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" }) %>
Related
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" })
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>
I have a RouteLink constructed like so
<p class="articleLink">
#MvcHelper.Html.RouteLink(article.Title, "Article_Route", new RouteValueDictionary() { { "articleId", article.Id }, { "seoUrl", article.SeoUrl } }))
</p>
However, article.Title could potentially contain HTML i.e. the value could be <em>Sample</em> Title which in turn gets rendered like so
<em>Sample</em> Title
Is there any way to prevent the HTML from being escaped, and instead to be treated as actual HTML? Or do I need to create a standard HTML <a href... link in this case (thus losing all the niceties associated with the RouteLink helper).
If you want HTML inside your anchor don't use the Html.RouteLink (because it will HTML encode the link text by default as you noticed) instead of build your a tag by hand with using Url.RouteUrl to generate the url:
<p class="articleLink">
<a href="#(Url.RouteUrl("Article_Route",
new RouteValueDictionary()
{ { "articleId", article.Id },
{ "seoUrl", article.SeoUrl } }))">
#Html.Raw(article.Title)
</a>
</p>
Or you can create your own non encoding RouteLink helper.
You can use HtmlHelper.Raw(). Having said that, it is probably not a good idea to keep any HTML in your model/view model, which is against the principle of separation of model and presentation, also a security hazard.