Custom TextBox Asp.net MVC Helper with wrapper

Question

i want to create my own TextBox Helper that do a simple thing: wraps the input element with some divs and labels, like this:

<div class="col-xs-12">
  <label>field name</label>
  <div>
    <input id='myId' name='MyName' type='text' value='myValue'>
  </div>
</div>

In the view, i want to call it this way:

@Html.TextBox("Name")

How can I do this? There is a way to call base class in my helper?

Update: a better solution

After Krishina answer, I got a better approach, using code like this:

public static MvcHtmlString CliTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string LabelText, object htmlAttributes)
    {
        var baseFormat = htmlHelper.TextBoxFor(expression, format: null, htmlAttributes: htmlAttributes);
        var errors = htmlHelper.ValidationMessageFor(expression, "", new { @class = "text-danger" }).ToString();

        if (!string.IsNullOrEmpty(errors))
            errors = "<div>" + errors + "</div>";

        var wrap = String.Format(
            "<div class='col-xs-12'>" +
            "<label>{0}</label>" +
            "<div>{1}</div>"+
            "{2}" +
            "</div>", LabelText, baseFormat.ToString(), errors);

        return new MvcHtmlString(wrap);
    }

In this way, I keep using TextBoxFor to generate the base input element.

You can create your own extension methods that use the inbuilt html helper methods. Refer example here — user3559349
– user3559349, Commented Mar 17, 2015 at 20:50

Venkata Krishna · Accepted Answer · 2015-03-17 21:10:34Z

2

You need to create a custom Html Helper for your textbox like below.

namespace MvcApplication.Helpers
{
    public static class TextboxExtensions
    {
        public static HtmlString CustomTextBox(this HtmlHelper helper, string labelName, NameValueCollection parameters)
        {
            var returnValue = string.Empty;
            if (parameters == null || parameters.Count <= 0) return new HtmlString(returnValue);

            var attributes = parameters.AllKeys.Aggregate("", (current, key) => current + (key + "=" + "'" + parameters[key] + "' "));

            returnValue = String.Format("<div class='col-xs-12'><label>{0}</label>" +
                                        "<div><input " + attributes + "></div></div>", labelName);

            return new HtmlString(returnValue);
        }
    }
}

And to use the above extension method, follow these steps

In your MVC view, write the using statement on top

@using MvcApplication.Helpers

And, write the Html helper as follows

@Html.CustomTextBox("Name", new NameValueCollection { {"id", "myId"}, {"value", "myValue"} })

Note: You could use json or some other type instead of NameValueCollection.

edited Mar 17, 2015 at 21:10

answered Mar 17, 2015 at 20:24

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Beetlejuice Over a year ago

But I need to wrap input element with div and so.

Venkata Krishna Over a year ago

@paulo - I have updated my answer.. take a look at it. You need a Custom extension method for it.

Collectives™ on Stack Overflow

Custom TextBox Asp.net MVC Helper with wrapper

Update: a better solution

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update: a better solution

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related