I see references out there for @Html.Button(), but when I type that, IntelliSense doesn't find such a helper... there's dropdownlist, hidden, editors, et cetera, but no button!
Why is that?
The <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i> , <b> , <strong> , <br> , <img> , etc.). That is not possible with a button created with the <input> element!
The <button> element is used to create an HTML button. Any text appearing between the opening and closing tags will appear as text on the button. No action takes place by default when a button is clicked. Actions must be added to buttons using JavaScript or by associating the button with a form.
The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.
HTML gives you several ways to add buttons to your website – with the button tag, the anchor link, and the input types of button and submit .
public static class HtmlButtonExtension { public static MvcHtmlString Button(this HtmlHelper helper, string innerHtml, object htmlAttributes) { return Button(helper, innerHtml, HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes) ); } public static MvcHtmlString Button(this HtmlHelper helper, string innerHtml, IDictionary<string, object> htmlAttributes) { var builder = new TagBuilder("button"); builder.InnerHtml = innerHtml; builder.MergeAttributes(htmlAttributes); return MvcHtmlString.Create(builder.ToString()); } }
There is no button helper as of mvc preview 3 (not mvc3)
it was mentioned a bunch in the past for example: http://blog.wekeroad.com/blog/aspnet-mvc-preview-using-the-mvc-ui-helpers/ however rolling your own is trivial - I have a basis for it somewhere around here I'll have to dig it up, but essentially just create a new Html.ButtonFor and copy the source code from Html.LabelFor and change the output to create an input type="button" tag.
To expand on the accepted answer, so you can bind a submit button to a model property but have different text:
@Html.ButtonFor(m => m.Action, Model.LabelForCurrentAction(), new { @class = "btn btn-primary btn-large", type = "submit" })
Using the following slightly modified Button
helper class:
/// <summary>
/// Via https://stackoverflow.com/questions/5955571/theres-no-html-button
/// </summary>
public static class HtmlButtonExtension
{
public static MvcHtmlString Button(this HtmlHelper helper, object innerHtml, object htmlAttributes)
{
return helper.Button(innerHtml, HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
}
public static MvcHtmlString Button(this HtmlHelper helper, object innerHtml, IDictionary<string, object> htmlAttributes)
{
var builder = new TagBuilder("button") { InnerHtml = innerHtml.ToString() };
builder.MergeAttributes(htmlAttributes);
return MvcHtmlString.Create(builder.ToString());
}
public static MvcHtmlString ButtonFor<TModel, TField>(this HtmlHelper<TModel> html,
Expression<Func<TModel, TField>> property,
object innerHtml,
object htmlAttributes)
{
// lazily based on TextAreaFor
var attrs = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
var name = ExpressionHelper.GetExpressionText(property);
var metadata = ModelMetadata.FromLambdaExpression(property, html.ViewData);
string fullName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
ModelState modelState;
if (html.ViewData.ModelState.TryGetValue(fullName, out modelState) && modelState.Errors.Count > 0)
{
if( !attrs.ContainsKey("class") ) attrs["class"] = string.Empty;
attrs["class"] += " " + HtmlHelper.ValidationInputCssClassName;
attrs["class"] = attrs["class"].ToString().Trim();
}
var validation = html.GetUnobtrusiveValidationAttributes(name, metadata);
if(null != validation) foreach(var v in validation) attrs.Add(v.Key, v.Value);
string value;
if (modelState != null && modelState.Value != null)
{
value = modelState.Value.AttemptedValue;
}
else if (metadata.Model != null)
{
value = metadata.Model.ToString();
}
else
{
value = String.Empty;
}
attrs["name"] = name;
attrs["Value"] = value;
return html.Button(innerHtml, attrs);
}
}
MVC5 , Bootstrap ver 3.2.0
@Html.ActionLink
(
linkText: " Remove",
actionName: "Index",
routeValues: null, // or to pass some value -> routeValues: new { id = 1 },
htmlAttributes: new { @class = "btn btn-success btn-sm glyphicon glyphicon-remove" }
)
This will generate a link that looks like a button.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With