Get id of element for JavaScript in MVC4/Razor from nested object in model

Question

If I define a textbox like this:

@Html.TextBoxFor(m => m.Contact.HomePhone)

it will generate an input element with id Contact_HomePhone.

Is it possible to get this id in JavaScript without hardcoding Contact_HomePhone?

This is an example of where I need this id dynamically in JavaScript:

$("#Contact_HomePhone").mask("(999) 999-9999");

(I know how to get property names using reflection, but would still have to hardcode _ to concatenate Contact and HomePhone.)

Answer 1

Try this way, using Html.IdFor you can get the id generated by the helper.

$('#@Html.IdFor(m => m.Contact.HomePhone)').mask("(999) 999-9999");

Just prefix it with # for jquery to pick it up.

But you can also bind the plugin using class selector, say for example if you have many such phone fields you can provide a common class to all those textBoxes and bind mask plugin to it using the class selector, this would avoid determining the id using the above method and use a common selector.

  @Html.TextBoxFor(m => m.Contact.HomePhone, null, new { @class = "phoneField"});

and without worrying about the id you can just bind them.

 $('.phoneField').mask("(999) 999-9999");