How to get the HTML id generated by asp.net MVC EditorFor

Question

I use the HTML Helpers to render my fields:

<%=Html.EditorFor(m => m.User.Surname)%>

and the output would be something like this:

<input class="text-box single-line" id="User_Surname" 
          name="User.Surname" type="text" value="" />

The helper uses the className + '.' è fieldName to build the id.
I need to pass the id to a jQuery function. Is there a way to have it without hardcoding it? Maybe an helper which can use the ASP.NET MVC2 conventions?

score 143 · Answer 1 · answered May 28 '13 at 17:57

143

ASP.NET MVC 4 has Html.IdFor() built in that can return this:

@Html.IdFor(m => m.User.Surname)

answered May 28 '13 at 17:57

bkaid

51,465
22
112
128

score 44 · Answer 2 · edited Aug 12 '17 at 08:19

44

See this question: get the generated clientid for a form field, this is my answer:

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 Aug 12 '17 at 08:19

LeftyX

35,328
21
132
193

answered Aug 18 '11 at 08:53

John Landheer

3,999
4
29
53

13

Per my answer, this is now built into ASP.NET 4 with Html.IdFor() – bkaid May 28 '13 at 17:58
1

thanks so much i needed that. html.IdFor() didnt help me becouse im making a custom helper , – CMS Oct 11 '15 at 20:44

score 9 · Accepted Answer · edited May 23 '17 at 10:31

I've followed the instructions of Mac's answer here and I've built my own custom extension:

public static class HtmlHelperExtensions
{
    public static string HtmlIdNameFor<TModel, TValue>(
        this HtmlHelper<TModel> htmlHelper,
        System.Linq.Expressions.Expression<Func<TModel, TValue>> expression)
    {
        return (GetHtmlIdNameFor(expression));
    }

    private static string GetHtmlIdNameFor<TModel, TValue>(Expression<Func<TModel, TValue>> expression)
    {
        if (expression.Body.NodeType == ExpressionType.Call)
        {
            var methodCallExpression = (MethodCallExpression)expression.Body;
            string name = GetHtmlIdNameFor(methodCallExpression);
            return name.Substring(expression.Parameters[0].Name.Length + 1).Replace('.', '_');

        }
        return expression.Body.ToString().Substring(expression.Parameters[0].Name.Length + 1).Replace('.', '_');
    }

    private static string GetHtmlIdNameFor(MethodCallExpression expression)
    {
        var methodCallExpression = expression.Object as MethodCallExpression;
        if (methodCallExpression != null)
        {
            return GetHtmlIdNameFor(methodCallExpression);
        }
        return expression.Object.ToString();
    }
}

I've imported my application's namespace

<%@ Import Namespace="MvcApplication2" %>

and finally I can use my code like this:

<%=Html.HtmlIdNameFor(m=>m.Customer.Name)%>

It's worth noting that you need a 'using System.Linq.Expressions;' for this to work. Sweet code anyway :) — James McCormack, May 06 '11 at 08:52
I think you also need to replace '[' & ']' (if you are referencing array elements) — Nadav, Jan 27 '13 at 08:43

score 7 · Answer 4 · answered Jan 28 '11 at 14:23

unless you create your own User.Surname EditorTemplate which you pass in some HTML attributes you won't be able to do this with EditorFor

However you can use TextBoxFor and set the id

<%= Html.TextBoxFor(m => m.User.Surname, new { id = "myNewId" })%>

On the topic of retrieving this element with a jQuery selector you can achieve this without having to hardcode by using some of the ends-with selector. Using that you could probably still use EditorFor and just select it with $("[id^='Surname]")`. If you're trying to select this specific element there's really no way to NOT hardcode SOMETHING in your jQuery code.

Adding the HTML attributes is the EASIEST way. Much easier than writing your own extension methods — Tim P., Feb 29 '12 at 22:31

How to get the HTML id generated by asp.net MVC EditorFor

4 Answers4

Linked