How to include CSS Class in ActionLink in MVC4 - asp.net-mvc

My code is
#Html.ActionLink("test1", "Index", new { Area = "area1", Controller = "controller1" })
I want to include the following css class in the action link.
class="rtsLink"
Also, can we add multiple css class. If so, I need to add another css class.
class="rtsTxt"
Update:
<li class="rtsLI" id="Summary"><span class="rtsTxt">Test</span></li>
Above I am replacing with following actionlink:
<li class="rtsLI" >#Html.ActionLink("test1", "Index", new { Area = "Tools", Controller = "controller1" }, new { #class = "rtsLink rtsTxt"})</li> "
At first css is working fine. But when using Actionlink, css not working. Thanks

You can simply add a new anonymous object as the fourth parameter
#Html.ActionLink("User Security", "Index", new { Area = "Tools", Controller = "UserSecurity" }, new { #class = "rtsLink rtsTxt" })
Note that the word class is reserved in C#, so you must prefix it with an #.

Since you have a span inside anchor. You could try this.
<li class="rtsLI" id="Summary">
<a href="#Url.Action("Index", new { Area = "Tools", Controller = "UserSecurity" })"
class="rtsLink">
<span class="rtsTxt">User Security</span>
</a>
</li>

Related

Why won't my controller action fire in my Action Link using data-toggle tab

Here is what I am trying to accomplish, I am trying to get my #Html.ActionLink to perform 2 functions, 1 I would like it to refresh the data on the page by calling the controller in the action link. 2. I would like to activate the Data-toggle to switch between tabs in the tabble content. This is my #Html.ActionLink
Note: the toggle works great, but I cannot get action in the controller to fire. this has to be possible since I found this solution on Stack.
<li class="active">#Html.ActionLink("Registered", "CommunitiesLanding", "home", new { id = 0 }, new { href = "#tab1", data_toggle = "tab" })</li>
<li>#Html.ActionLink("Certified", "CommunitiesLanding", "home", new { id = 1 }, new { href = "#tab2", data_toggle = "tab" })</li>
in the Markup this is what the MVC renders:
<li class="active">Registered</li>
<li>Certified</li>

#Html.ActionLink not working for css class

Action link #class="info" not working for css
#Html.ActionLink("Click Here", "Details", "Product", new { id = item.ProductId, #class="info" },null)
Html page source
Click Here
Update:
on the other hand
if i set #Html.ActionLink("link here", "Details", "Product", new { id = item.ProductId}) then generate this link localhost:18715/Home/Details?Length=7 why? and it is not working
if i set #Html.ActionLink("link here", "Details", "Product", new { id = item.ProductId},null)
it is working perfectly generate this link http://localhost:18715/Product/Details/17
what i am missing for each link
You have to write hmtl attributes like this:
#Html.ActionLink("Click Here", "Details", "Product", new { id = item.ProductId }, new { #class = "info"})
#Html.ActionLink("Back", "Index", " ", new { #class = "col-sm-3 btn btn-outline-secondary btnfs btn-sm" })
Here more than one CSS calls is attached to the for ActionLink. This is For
Asp.net MVC

How can I use the Bootstrap Badge class within MVC Razor?

How can I use the Bootstrap Badge class to show a number next to the button? In this case I am using the #ActionLink. I've seen on the bootstrap page that I'm supposed to use a HTML span for the Badge.
Code:
<div class="row">
<div class="col-md-2">
<div class="list-group">
#Html.ActionLink("Home", "Index", "Home", null, new { #class = "list-group-item" })
#Html.ActionLink("Auto's", "Lijst", "Auto", null, new { #class = "list-group-item" })
#Html.ActionLink("Medewerkers", "Lijst", "Medewerker", null, new { #class = "list-group-item" })
<!--This one!--> #Html.ActionLink("Dagprogramma", "Dagprogramma", "Medewerker", null, new { #class = "list-group-item"} )
#Html.ActionLink("Contact", "Contact", "Home", null, new { #class = "list-group-item" })
</div>
</div>
You cannot include custom html markup inside the link markup generated by ActionLink helper method. What you can do is, write an anchor tag and include the span inside that. Use the Url.Action method to generate the correct relative url to the action method which you will use as the link's href attribute value.
#Html.ActionLink("Medewerkers", "Lijst", "Medewerker", null,
new { #class = "list-group-item" })
<a href="#Url.Action("Dagprogramma","Medewerker")"
class="list-group-item"> Dagprogramma <span class="badge">99</span>
</a>
#Html.ActionLink("Contact", "Contact", "Home", null,
new { #class = "list-group-item" })

#Html classes for creating modal links

I know how to create ActionLinks. I'm curious (to keep everything simiarl, if I can use the #HTML extensions to create a modal based link.
<a class="btn default" data-toggle="modal" href="#responsive">Create Board
</a>
#Html.ActionLink("Edit Board", "EditBoards", "Forum", new { forumID = Request.QueryString["forumID"] }, new { #class = "btn default" })
The first link above how would I write that with Razor?
#Html.ActionLink("Create Board", null, null, new { #class = "btn default", data_toggle = "modal", href = "#responsive" })
Data attributes can be added by replacing the hyphen "-" with an underscore "_".
or better yet, go grab bootstrab mvc package from nuget, it's got all the helper methods to create bootstrap elements for your mvc view
http://www.nuget.org/packages/Twitter.Bootstrap.MVC/

Correct way to have an image link in asp.net mvc?

Something like this might had worked
<%= Html.RouteLink("", new { controller = "Article", action = "Details", id = A.ArticleID}, new { #class = "image-link" })%>
Except it doesnt like an empty title.
This could work.
<a href="<%= Url.Action("Article", "Details", new {id = A.ArticleID}) %>">
<img src="<% //Your image src here %>" />
</a>
Several people (my company included) have dabbled with creating something that does this in a HtmlHelper, but in the end, it seemed best to do it like this.

Resources