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>
Related
So far I came up with this:
<ul class="menu" id="#Model[i].VideoId">
<li class="menu-item">
#using (Html.BeginForm("Delete", "Video", FormMethod.Post, new { id = Model[i].Id }))
{
#Html.HttpMethodOverride(HttpVerbs.Delete)
<button class="btn btn-link" type="submit">Delete</button>
}
</li>
<li class="menu-item">Edit </li>
</ul>
But it doesn't work. My controller is Video and the method is Delete, which takes an id parameter and deletes by id from the database.
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
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;" }
)
Im try to add the Bootstrap Glyphicon Components for the MVC action link ,but i cant add this , please give me a solution.
Action Link
#Html.ActionLink("Add", null/*"BlankEditorRow"*/, null, new { id = "addItem", #class = " btn-xs" })
Plus Glyph
<span class="glyphicon glyphicon-plus"></span>
Add glyphicon glyphicon-plus class to ActionLink like following. Hope this will help you.
#Html.ActionLink("Add", null/*"BlankEditorRow"*/, null, new { id = "addItem", #class = "glyphicon glyphicon-plus btn-xs" })
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>