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

asp.net Mvcasp.net Mvc-2

asp.net Mvc Problem Overview


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?

asp.net Mvc Solutions


Solution 1 - asp.net Mvc

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

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

Solution 2 - asp.net Mvc

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)

Solution 3 - asp.net Mvc

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)%>

Solution 4 - asp.net Mvc

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLeftyXView Question on Stackoverflow
Solution 1 - asp.net MvcbkaidView Answer on Stackoverflow
Solution 2 - asp.net MvcJohn LandheerView Answer on Stackoverflow
Solution 3 - asp.net MvcLeftyXView Answer on Stackoverflow
Solution 4 - asp.net MvchunterView Answer on Stackoverflow