I have a script which works well.
<button id="sample_editable_1_new" class="btn sbold green">
Add New
<i class="fa fa-plus"></i>
</button>
I would like to change to using the script below.
#Html.ActionLink("Add New", "Create", "Customer", null, new { #class = "btn sbold green", xxx})
How do i add the property?
You could use a CSS class to append the plus character to the link.
.plus-icon:after { content: "\f067"; font-family: 'FontAwesome'; padding-left: 5px; }
Then add the class to your action link
#Html.ActionLink("Add New", "Create", "Customer", null, new { #class = "btn sbold green plus-icon", xxx})
#Html.ActionLink generate <a> tag if you want to use button you should use either js or change your button to a tag.
It's better to generate it with #Url.Action helper if you don't want any js:
<a href='#Url.Action("Create", "Customer")'
id="sample_editable_1_new"
class="btn sbold green">
Add New
<i class="fa fa-plus"></i>
</a>
Html.ActionLink("Create New", "Create", CONTROLLERNAME, null, new { #class= "yourCSSclass"}
Html.ActionLink(link text, action name, controller name, route values object, html attributes object)
Html.ActionLink(
"Create New",
"Create",
CONTROLLERNAME,
null,
new { #class= "yourCSSclass", #style= "width:100px; color: red;" }
)
Related
I have a button type that designed with bootstrap classes and I want to do this reusable.
My Edit Button
<a href="#Url.Action("Edit", new {id = item.Id})" class="btn btn-warning btn-sm">
<i class="glyphicon glyphicon-pencil"></i>
</a>
My Delete Button
<a href="#Url.Action("Delete", new {id = item.Id})" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-trash"></i>
</a>
How can I do this format as reusable. With partials or with HtmlHelpers? Is there any sample?
As # Stephen suggested you can use both,You can create a HTML Helpers by using the below code
namespace System.Web.Mvc
{
public static class CustomHtmlHelpers
{
public static MvcHtmlString BootStarpDeleteHelper(this HtmlHelper htmlHelper, string action)
{
StringBuilder sb = new StringBuilder();
sb.Append("<a href=" + action + " class='btn btn-danger btn-sm'>");
sb.Append("<i class='glyphicon glyphicon-trash'></i>");
sb.Append("</a>");
return MvcHtmlString.Create(sb.ToString());
}
}
}
in the main view you can call the html helper like this
#Html.BootStarpDeleteHelper("#");
Else you can also create a partial view in the Shared folder and create a new partial view with name _BootStarpDelete
The view look like this
#{
Layout = null;
}
<a href="#Url.Action("Delete", new {id = item.Id})" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-trash"></i>
</a>
In the main view you can render like this
#Html.RenderPartial("_BootStarpDelete")
Hope the above explanation will help you.If you want a single html helper for both edit and delete you need to pass classes as parameters.If the same if you want to do the partial view way then you have to pass a model with appropriate value such as action and classes
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" })
After some research, I could not find a good answer form my question.
I have a helper method to create an action link with a "+" sign and a label:
public static HtmlString NewButton(this IHtmlHelper htmlHelper)
{
var htmlAttributes = new { #class = "btn btn-small btn-primary" };
return htmlHelper.ActionLink("Insert", "Create", null, new RouteValueDictionary(), htmlAttributes);
}
How can I include the "+" sign in a way that my final html looks like this?
<a href="/posts/new" class="btn btn-small btn-primary">
<i class="ace-icon fa fa-plus"></i>
Insert
</a>
In my page, I use my helper like this:
<div class="form-actions">
#Html.NewButton()
</div>
The only way I found was passing the "Url" object to my method, like this:
public static HtmlString NewButton(this IHtmlHelper htmlHelper, IUrlHelper url)
{
var link = url.Action("Create");
var el = string.Format("<a href = \"{0}\" class='btn btn-small btn-primary'><i class='ace-icon fa fa-plus'></i>Insert</a>", link);
return new HtmlString(el);
}
In my view, I use it this way:
#Html.NewButton(Url)
I´m not using ActionLink at all
You can't, per se. However, nothing says you have to use Html.ActionLink. Simply, use Url.Action, instead, and then build your tag manually:
<a href="#Url.Action("Insert", "Create")" class="btn btn-small btn-primary">
<i class="ace-icon fa fa-plus"></i>
Insert
</a>
I am trying to make look #Html.Actionlink as button.
Working Html.Actionlink:
<li class="btn btn-sm"> #Html.ActionLink("Redeem Reward", "GetReward",
"Home", new { id = price.PriceId }, new { #class = "lnkGetReward"})</li>
Currently when I click it looks like as if a link is clicked, apart from the text if we click the button border it doesn't work.
I am also using font awesome classes.
Can I use #Url.Action instead with same id and #class?
Instead of having your button classes on the li apply them directly to the link.
As you are using bootstrap you might want to add btn-default to get the full style of the button.
<li>
#Html.ActionLink("Redeem Reward", "GetReward", "Home",
new { id = price.PriceId },
new { #class = "lnkGetReward btn btn-default btn-sm"})
</li>
However if you are 100% sure you want to use Url.Action your code would look like the following.
<li class="btn btn-sm">
Redeem Reward
</li>
Again I would suggest that you apply the btn btn-sm directly to the link. Possibly with a btn-default.
Edit based on comment:
<li>
<a href="#Url.Action("GetReward", "Home", new { id = price.PriceId })" class="lnkGetReward btn btn-default btn-sm">
<i class="fa fa-mobile"></i> Redeem Reward
</a>
</li>
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/