How to apply CSS class to HTML Action Link in Razor - html

I have got:
<p><a class="btn btn-default" href="~/Person">List of Cients »</a></p>
I would like to replace it with HTML Action Link but don't change visual style.
I want to get to Index Action of PersonController:
public class PersonController : Controller
{
private PersonContext db = new PersonContext();
// GET: Person
public ActionResult Index()
{
return View(db.Persons.ToList());
}
}
How the #Html.ActionLink(...) should look like.
EDIT:
I tried:
<p><a class="btn btn-default" href="~/Person">List of Cients »</a></p>
#Html.ActionLink("List of Clients &raquo", "Index", "Person", new { #class = "btn btn-default" })
There is the problem with: » ActionLink does not renders preetty arrow.
EDIT2:
Tried this with no result: #Html.ActionLink("List of Clients " + HttpUtility.HtmlDecode("&raquo"), "Index", "Person", new { #class = "btn btn-default" })
EDIT:
Both don't work.
<p> #Html.ActionLink("List of Clients »", "Index", "Person", new { #class = "btn btn-default" })</p>
<p> #(Html.ActionLink("List of Clients »", "PersonController/Index", new { #class = "btn btn-default" }));
First gives right style but when I click I get length=6 in the link.
Second does not have style and links to: http://localhost:17697/Home/PersonController/Index?class=btn%20btn-default
ANSWER: This one works:
<p> #Html.ActionLink("List of Clients »", "Index", "Person", null, new { #class = "btn btn-default" })</p>


#(Html.ActionLink("Title", "/PersonController/Index", new { #class = "myCssClass" }));
Here's a link for reference: http://msdn.microsoft.com/en-us/library/dd492124(v=vs.108).aspx


Please try this, it will work
<a href="#Url.Action("Index", "Person")">
<button class="btn btn-default">
List of Cients »
</button>
</a>


try this
#Html.ActionLink("ButtonText", "Action","Controller", new {#class="btn btn-default"})
it's what worked for me.
NB. the new {#class="btn btn-default"} goes after the 3rd comma.


<pre>
<p>I will display »</p>
<div>
#Ajax.ActionLink("Contact " + HttpUtility.HtmlDecode("»"),
"_PartialEmployeeIndex", "Employee",
new AjaxOptions() { UpdateTargetId = "divToUpdate" },
new { #class = "btn btn-primary" })
</div>
</pre>

Related

Converting Markdown to HTML

I am creating a website. I am using Node.JS, Express and MongoDB
This is the schema that I designed for my website
var reviewSchema = new mongoose.Schema({
title: String,
author: String,
paper: String,
content: String
})
If I click the "Submit" button, the data is well inserted into the DB.
However, when I click the post. This is what I see
Here is my code.
<div class="container">
<h1> <%= review.title%></h1>
<h3> <%= review.author %> - <%= review.paper %></h3>
<a role="button" class="addbutton btn btn-default btn-info" href="<%=review._id%>/edit" style="margin-left: 0px;">Edit</a>
<form action="/reviews/<%=review._id%>?_method=DELETE" method="POST">
<button class="addbutton btn btn-default btn-danger" style="margin-left: 0px">Delete</button>
</form>
<hr>
<p> <%= review.content %> </p>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Editor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js"></script>
<script>
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.run();
</script>
What am I doing wrong?

need to download markdown converter
and use
makrdown.toHTML()

How Can I add a class to an HTML.ActionLink in MVC?

I have html code which is posted below. I would like to apply that Delete and Edit Button class to HTML Action Link.
Here is my code.
#Html.ActionLink("Edit", "EditUser", new { UserName = item.UserName }) |
#if ((item.UserName.ToLower() != this.User.Identity.Name.ToLower()))
{
#Html.ActionLink("Delete", "DeleteUser", new { UserName = item.UserName },
new { onclick = "return confirm('Are you sure you wish to delete this user?');" })
}
This HTML Code for Delete and Edit:
<a href="#" class="btn btn-info btn-xs black">
<i class="fa fa-trash-o"></i> Delete
</a>
<a href="#" class="btn btn-success btn-xs purple">
<i class="fa fa-edit"></i> Edit
</a>
How can I make it work?
Help would be appreciated.

You have to use the # character, since class is a keyword in C#. Here's a link to the MSDN documentation: http://msdn.microsoft.com/en-us/library/dd492124(v=vs.108).aspx
#Html.ActionLink("<i class='fa fa-trash-o'></i> Delete", "DeleteUser",
new { UserName = item.UserName },
new { #class = "btn btn-info btn-xs black" })

html entity in ActionLink

How can I include html entities in ActionLink. e.g. The case of » below.
<p>#Html.ActionLink("Link Text »", "Index", new { }, new { #class = "btn btn-warning", #role = "button" })</p>

Use Url.Action instead
<p><span class="btn btn-warning">Link Text »</span></p>

keeping 2 elements on the same line in bootstrap

I'm battling to get a dropdownlist and button on the same line in a bootstrap modal. I've tried using <,span> but it doesn't work.
<div class="col-md-12 hSpacerMob">
<div class="well">
using (Html.BeginForm("AddPlayerSignup", "SignupSheet"))
{
#Html.DropDownList("Member", tournament.SignupSheet.GroupMembers)
<span>
#Html.SubmitButton("Add", true, new { #class = "btn btn-primary" })
</span>
}
#Html.ActionLink("Pause", "ChangeState", "SignupSheet", new { Paused = true }, new { #class = "btn btn-warning" })
</div>
</div>
So I need the dropdown and 'Add' button on the same line next to each other and the pause button below, but as it stands they're just displayed below each other.
edit: I tried using row but that also does not work
<div class="row">
<div class="col-md-6">
#Html.DropDownList("Member", ladder.SignupSheet.GroupMembers, new {label = "Members", #class = "pull-left form-control", #style = "width:200px"})
</div>
<div class="col-md-6">
#Html.SubmitButton("Add member", true, new {#class = "btn btn-primary"})
</div>
</div>

bootstrap has input groups for combining inputs and buttons that you might want to try
<div class="input-group">
#Html.DropDownList("Member", tournament.SignupSheet.GroupMembers)
<div class="input-group-btn">
#Html.SubmitButton("Add", true, new { #class = "btn btn-primary" })
</div>
</div>

I finally figured out the problem! My submit button has a 'true' overload for the 'container' bool, when it should be false. Having it set to true added the 'form actions' styling which adds a margin-top:30px element. So as soon as I set that to false it works.
<div class="row">
<div class="col-md-6">
#Html.DropDownList("Member", ladder.SignupSheet.GroupMembers, new {label = "Members", #class = "pull-left form-control", #style = "width:200px"})
</div>
<div class="col-md-6">
#Html.SubmitButton("Add member", false, new {#class = "btn btn-primary"})
</div>
</div>

how to generate Html.ActionLink with icon

I'm starting to learn ASP.NET MVC, and have a problem, how generate code with Html.ActionLink like this:
<a href="~/Views/Home/Create.cshtml" class="btn btn-primary">
<i class="icon-pencil icon-white"></i>
<span>
<strong>Create</strong>
</span>
</a>
please.

Html.ActionLink() only supports plain-text links.
You should use <a href="#Url.Action(...)"> for more-complex links.

I wanted to add to SLaks answer.
Using <a href="#Url.Action(...)"> with what user2567619 wanted.
<a href="#Url.Action("Create", "Home")" class="btn btn-primary">
<i class="icon-pencil icon-white"></i>
<span>
<strong>Create</strong>
</span>
</a>
I think it's worth mentioning that #Url.Action can take it's parameters like this:
#Url.Action(string actionName, string controllerName)
Whereas #Html.ActionLink can take it's parameters like this:
#Html.ActionLink(string linkText, string actionName, string controllerName)
It may be pretty obvious, but I thought it was worth noting.
Edit
As Peck_conyon noted, for both #Url.Action and #Html.ActionLink, these are just one of the ten different overload methods.
For documentation on UrlHelper.Action, look here.
For documentation on LinkEtensions.ActionLink, look here.

Simple as this:
#Html.ActionLink("Title", "Action", null, new {#class="btn btn-info fa fa-pencil" })

#Html.ActionLink("Edit","Edit","",new { #class= "btn btn-primary" })
Result

If it's in the Layout page, you can use this, I think it may help:
<li>#Html.ActionLink(" Login", "Index", new { Controller = "Login", Area = "Security" }, new { #class = "glyphicon glyphicon-log-in" })</li>
or like this for a action_link:
<p>
#Html.ActionLink(" Create New", "Add", "Event", FormMethod.Post, new { #class = "glyphicon glyphicon-plus" })</p>
Hope this helps.

This example may help you.
#Html.ActionLink(" ", "Controller", new { id = item.Id }, new { #class = "btn
btn-success btn-circle fa fa-plus-circle", title = "Confirm" })
this way you will have an icon without the text.

You can simply put like this:
take the help of google icons. just paste the style tag and libraries into your template like this:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Roun**strong text**ded:opsz,wght,FILL,GRAD#48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet">
<style>
.material-symbols-rounded {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48
}
</style>
use the above libraries like this:
Edit

#Html.ActionLink("Add Stock", "Create", null, new { #class = " fa fa-plus link-dark rounded " })
Add Stock is String Link Text
Create String Action Name
null Object routevalues
new { #class = " fa fa-plus link-dark rounded " } is Object html Attributes