how to create an HTML Helper to Extend TextBoxFor() to add CSS style?

how to create an HTML Helper to Extend TextBoxFor() to add CSS style?

@Html.TextBoxFor(model => model.FirstName, new { @class = "txt" })

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You just need to create an extension method on HtmlHelper:

public static class MyHtmlHelpers
{
    public static MvcHtmlString MyTextBoxFor<TModel, TProperty>(
         this HtmlHelper<TModel> helper, 
         Expression<Func<TModel, TProperty>> expression)
    {
        return helper.TextBoxFor(expression, new { @class = "txt" });
    }
}

Then in your view you can use it as:

@Html.MyTextBoxFor(model => model.FirstName)

Note: Don’t forget to @using the namespace of MyHtmlHelpers if your views.

Method 2

    public static System.Web.Mvc.MvcHtmlString DtxTextBoxFor<TModel, TValue>
        (this System.Web.Mvc.HtmlHelper<TModel> html,
        System.Linq.Expressions.Expression<System.Func<TModel, TValue>> expression,
        System.Collections.Generic.IDictionary<string, object> htmlAttributes = null, bool readOnly = false)
    {
        if (htmlAttributes == null)
        {
            htmlAttributes =
                new System.Collections.Generic.Dictionary<string, object>();
        }

        System.Web.Mvc.ModelMetadata oModelMetadata =
            System.Web.Mvc.ModelMetadata.FromLambdaExpression(expression, html.ViewData);

        if (oModelMetadata == null)
        {
            if (readOnly)
            {
                if (htmlAttributes.ContainsKey("readonly") == false)
                {
                    htmlAttributes.Add("readonly", "read-only");
                }
            }
        }
        else
        {
            if (htmlAttributes.ContainsKey("placeholder") == false)
            {
                string strHtmlFieldName =
                    System.Web.Mvc.ExpressionHelper.GetExpressionText(expression);

                string strLabelText =
                    oModelMetadata.DisplayName ??
                    oModelMetadata.PropertyName ??
                    strHtmlFieldName.Split('.').Last();

                if (string.IsNullOrEmpty(strLabelText) == false)
                {
                    htmlAttributes.Add("placeholder", strLabelText);
                }
            }

            if ((readOnly) || (oModelMetadata.IsReadOnly))
            {
                if (htmlAttributes.ContainsKey("readonly") == false)
                {
                    htmlAttributes.Add("readonly", "read-only");
                }
            }
        }

        htmlAttributes.Add("class", "form-control");

        System.Linq.Expressions.MemberExpression oMemberExpression =
            expression.Body as System.Linq.Expressions.MemberExpression;

        if (oMemberExpression != null)
        {
            System.ComponentModel.DataAnnotations.StringLengthAttribute oStringLengthAttribute =
                oMemberExpression.Member.GetCustomAttributes
                (typeof(System.ComponentModel.DataAnnotations.StringLengthAttribute), false)
                .FirstOrDefault() as System.ComponentModel.DataAnnotations.StringLengthAttribute;

            if (oStringLengthAttribute != null)
            {
                if (htmlAttributes.ContainsKey("maxlength") == false)
                {
                    htmlAttributes.Add("maxlength", oStringLengthAttribute.MaximumLength);
                }
            }
        }

        return (html.TextBoxFor(expression, htmlAttributes));
    }

Method 3

Building on answer by @nemesv, here is an extension that supports htmlAttributes with additional custom attributes.

vb.net:

<Extension()>
Function MyTextBoxFor(Of TModel, TProperty)(ByVal helper As HtmlHelper(Of TModel), ByVal expression As Expression(Of Func(Of TModel, TProperty)), htmlAttributes As Object) As MvcHtmlString           
    'copy htmlAttributes object to Dictionary
    Dim dicHtmlAttributes As New Dictionary(Of String, Object)
    For Each prop in htmlAttributes.GetType().GetProperties()
        dicHtmlAttributes.Add(prop.Name,prop.GetValue(htmlAttributes))
    Next
    'add custom attribute
    dicHtmlAttributes.Add("foo","bar")

    Return helper.TextBoxFor(expression, dicHtmlAttributes)
End Function

c#:

public static MvcHtmlString MyTextBoxFor<TModel, TProperty>(
     this HtmlHelper<TModel> helper, 
     Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
{
    // copy htmlAttributes object to Dictionary
    Dictionary<string, object> dicHtmlAttributes = new Dictionary<string, object>();
    foreach (var prop in htmlAttributes.GetType().GetProperties())
    {
        dicHtmlAttributes.Add(prop.Name, prop.GetValue(htmlAttributes));
    }
    //add custom attribute
    dicHtmlAttributes.Add("foo", "bar");
    return helper.TextBoxFor(expression, dicHtmlAttributes);
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0