get the generated clientid for a form field

Question

Is there a way to get the client id generated for a field generated with a html helper?

i have several components that sometimes are inside another forms, and i wan't to attach javascript events to them.

so, for sample, i would like to have:

@Html.TextBoxFor(model => model.client.email)

<script> 
$('#@getmyusercontrolid(model=>model.client.email)').val("put your mail here");
</script>

The accepted answer is out of date, see my answer for a better solution. — Professor of programming, Dec 16 '15 at 11:12

score 31 · Accepted Answer · edited Feb 26 '15 at 01:29

31

I use this helper:

public static partial class HtmlExtensions
{
    public static MvcHtmlString ClientIdFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
    {
        return MvcHtmlString.Create(htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression)));
    }
}

Use it just as you would any other helper: @Html.ClientIdFor(model=>model.client.email)

edited Feb 26 '15 at 01:29

Mrchief

75,126
20
142
189

answered Mar 24 '11 at 12:41

John Landheer

3,999
4
29
53

Sorry to mix my metaphors but this works like a well-oiled charm – DavidWainwright Nov 16 '12 at 13:09
Where are you getting `ExpressionHelper.GetExpressionText` from? – mxmissile May 21 '13 at 20:11
In order to use the helper on my page I had to import the namespace where the helper is located: @import MyWebProj.Helpers. Fore more information, see http://stackoverflow.com/questions/3239006/how-to-import-a-namespace-in-razor-view-page (it is also possible to use web.config inside the Views folder to handle the imports) – Juha Palomäki Jun 08 '13 at 11:43
1

You could have just used `html.IdFor(expression)` – Professor of programming Aug 28 '15 at 12:19
**Out of date as of MVC 4**, future readers—`IdFor` does this out of the box now; see [@Bonner웃's answer](https://stackoverflow.com/a/32270976/1958726) – Eric Eskildsen Jul 21 '17 at 23:09

Mike Grove aka Theophilus · Answer 2 · 2014-09-09T20:46:31.073

11

MVC 5 has NameFor, so your example using it is:

@Html.TextBoxFor(model => model.client.email)

<script> 
$('#@Html.NameFor(model => model.client.email)').val("put your mail here");
</script>

EDIT

IdFor is also available, which may be more appropriate in this situation than NameFor.

edited Sep 09 '14 at 20:46

answered Jun 05 '14 at 16:58

Mike Grove aka Theophilus

1,199
13
23

Professor of programming · Answer 3 · 2015-12-16T11:10:22.490

9

Use @Html.IdFor(model => model.client.email) as this functionality already exists like so:

@Html.TextBoxFor(model => model.client.email)

<script> 
$('#@Html.IdFor(model => model.client.email)').val("put your mail here");
</script>

You can read more about it at the following page: https://msdn.microsoft.com/en-us/library/hh833709%28v=vs.118%29.aspx

edited Dec 16 '15 at 11:10

answered Aug 28 '15 at 12:21

Professor of programming

2,978
3
30
48

score 5 · Answer 4 · answered Mar 24 '11 at 12:24

5

You could try specifying the id in the HtmlAttributes argument when you generate the input field, e.g.

@Html.TextBoxFor(model => model.client.email, new { id = "emailTextBox" })

Then you can use this in your javaScript

var email = $('#emailTextBox').val();

answered Mar 24 '11 at 12:24

tobias86

4,979
1
21
30

that will not work if you have more than one instances of the component in the same page, and its also not useful if you want to databind in the destination action. – Jokin Mar 24 '11 at 15:04
I know this is an old answer but... when using MVC and Razor view engine you need to escape the id using the `@` symbol example: `@id="emailTextBox"` – Chef_Code Mar 16 '16 at 04:56

get the generated clientid for a form field

4 Answers4

Linked