Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

There's no @Html.Button !

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?

like image 877
ekkis Avatar asked May 10 '11 19:05

ekkis


People also ask

How do I activate a button in HTML?

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!

Can we add button on HTML?

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.

What is the HTML element for button?

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.

How many ways to create button in HTML?

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 .


4 Answers

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());   } } 
like image 173
jessegavin Avatar answered Sep 18 '22 21:09

jessegavin


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.

like image 38
Adam Tuliper Avatar answered Sep 21 '22 21:09

Adam Tuliper


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);
    }
}
like image 29
drzaus Avatar answered Sep 18 '22 21:09

drzaus


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.

like image 36
Piotr Knut Avatar answered Sep 21 '22 21:09

Piotr Knut