how to add parameters to razor helpers

Question

I want to know how write HTML Helper like @Html.TextBoxFor(model => model.signature) to have data-id parameter in produced input like below by helper.

<input type="text" name="signature"  data-id="No Signature" />

Note 1: parameter like dataId is work by htmlAttributes because it is a simple variable.

Note 2: I know extended method and use attribute like @{var attributes = new Dictionary<string, object>{{ "data-id", "No Signature" }};}

I feel that there must be a better way to solve this. Any idea...?

Thanks a lot.

just write your own extension method with the data-id parameter and then just handle it yourself... — Squirrel5853, Sep 27 '13 at 10:46
see here http://stackoverflow.com/questions/6202053/asp-net-mvc-extending-textboxfor-without-re-writing-the-method — Squirrel5853, Sep 27 '13 at 10:47
For passing `data` attributes, use `_` underscore instead of `-` Please refer stackoverflow.com/questions/4108943/actionlink-htmlattributes — Murali Murugesan, Sep 27 '13 at 11:25

Henk Mollema · Answer 1 · 2013-09-27T11:19:29.447

4

You can add data- attributes this way:

@Html.TextBoxFor(model => model.signature, new { data_id = "No signature" })

You have to use underscores (_) in stead of dashes (-).

Tip: it's also possible to use Model variables in your data- attributes:

new { data_id = Model.Id }

edited Sep 27 '13 at 11:19

answered Sep 27 '13 at 11:13

Henk Mollema

44,194
12
93
104

score 1 · Answer 2 · answered Sep 27 '13 at 10:45

1

You can create your own custom helpers like:

 public static class TextBoxExtensions
     {
          public static string CustomTextBox(this HtmlHelper helper, string name)
          {
               return String.Format("<input type='text' name={0} data-id='No Signature'></input>", name);
          }
     }

Then in your View you can do:

@Html.CustomTextBox("signature");

answered Sep 27 '13 at 10:45

Darren

68,902
24
138
144

tnx for your comment but i know - I wrote this in note 2 – ehsan Sep 27 '13 at 10:48
@ehsan - your note two is not a custom helper. My answer shows you how to create one – Darren Sep 27 '13 at 10:49
note 2 shows 2 way to solve that. 1- extension methods(or make custom helpers) 2- attributes in razor view. – ehsan Sep 27 '13 at 10:53
This helper doesn't follow MVC helper conventions. You would be better off extending the existing TextBox or TextBoxFor helpers with custom attributes and using MergeAttributes to continue the MVC conventions. – Ed Charbeneau Oct 04 '13 at 15:22
@EdCharbeneau - doesn't follow MVC helper conventions? It's directly from the ASP.NET MVC website (Which I linked in my answer)....... – Darren Oct 04 '13 at 15:32
That documentation is outdated (2008). Html helpers are no longer built this way http://aspnetwebstack.codeplex.com/SourceControl/latest#src/System.Web.Mvc/Html/LabelExtensions.cs – Ed Charbeneau Oct 04 '13 at 15:45
@EdCharbeneau - it's exactly the same aside you're returning an `MvcHtmlString` rather than a `string` directly. If you inspect `MvcHtmlString` you will see that it inherits from `IHtmlString` which just supplies the `ToHtmlString` method, which is effectively a string. – Darren Oct 04 '13 at 16:25
Actually I'm returning it via TextBoxFor which includes all of attributes required for form validation. It also allows you to pass in additional attributes. Furthermore, returning string actually writes the string (human readable) not the HTML. – Ed Charbeneau Oct 04 '13 at 16:50
@EdCharbeneau - With regards to the `.ToMvcHtmlString` I was referring to the first link you provided. There are many ways to achieve the same solution, I have used both in the past (and do actually prefer the way you mentioned), however, I linked the official ASP.NET MVC website, out of date or not, it is official documentation and a valid way to build a HTML helper. I don't think it warrants a down vote IMO. You are always welcome to post an answer yourself if you believe it is better (and more up to date) than mine. – Darren Oct 04 '13 at 16:54

score -2 · Answer 3 · answered Oct 04 '13 at 16:55

The code below will create a CustomTextBoxFor helper by extending TextBoxFor. This allows you to take full advantage of MVC's validation conventions as well leaving open the htmlAttributes parameter so more attributes can be appended as needed.

        public static MvcHtmlString CustomTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
            Expression<Func<TModel, TProperty>> expression, string customData)
        {
            return htmlHelper.CustomTextBoxFor(expression, customData, (IDictionary<string, object>)null);
        }

        public static MvcHtmlString CustomTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
           Expression<Func<TModel, TProperty>> expression, string customData, object htmlAttributes)
        {
            IDictionary<string, object> attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
            attributes.Add("data-custom", customData);
            return htmlHelper.TextBoxFor(expression, new { data_custom = "customData" });
        }

Usage:

@Html.CustomTextBoxFor(model => model.MyProperty, Model.CustomData)
@Html.CustomTextBoxFor(model => model.MyProperty, Model.CustomData, new { @class="pretty"})

how to add parameters to razor helpers

3 Answers3