ASP.NET MVC: obtener id y nombre de un control de formulario

ASP.NET MVCEs bastante frecuente necesitar obtener el identificador o nombre de un control de entrada que ha sido generado por un helper de ASP.NET MVC. Por ejemplo, si queremos acceder desde scripts al contenido de un cuadro de texto creado de esta forma, obligatoriamente debemos conocer con exactitud qué identificador le asignó el sistema.

Observad el siguiente código de vista, bastante trivial:

@Html.EditorFor(model=>model.Nombre)
Intuitivamente podemos estar seguros de que el control será generado con “Nombre” como nombre de campo e identificador. El código creado será algo así, poco más o menos:
<input type="text" name="Nombre" id="Nombre" />
De esta forma, podríamos acceder al contenido del cuadro de texto por ejemplo con el script mostrado a continuación, que se encarga de convertir su contenido en mayúsculas cuando pierde el foco:
<script type="text/javascript">
    $("#Nombre").blur(function () {
        var mays = $(this).val().toUpperCase();
        $(this).val(mays);
    });
</script>
Y funcionar, funcionaría… algunas veces 😉

Hay muchos escenarios en los que no está tan claro el identificador que será asignado, sobre todo si estamos generando controles de edición para propiedades de tipos complejos, en vistas parciales, o cuando estamos creando editores personalizados para utilizar con Html.EditorFor(). Este último caso además es especialmente complicado, puesto que desconocemos por completo el nombre de la propiedad para la cual será utilizado.

Lo que suelo hacer en estos casos es utilizar estos dos pequeños helpers, Html.IdFor() y Html.NameFor(), que permiten obtener el nombre e identificador asignado a una propiedad del Modelo accediendo a sus metadatos:

public static class HtmlHelpers
{
    public static string IdFor<TModel, TProperty>(this HtmlHelper<TModel> html, 
        Expression<Func<TModel, TProperty>> expression)
    {
        string propiedad = ExpressionHelper.GetExpressionText(expression);
        return html.ViewData.TemplateInfo.GetFullHtmlFieldId(propiedad);
    }
 
    public static string NameFor<TModel, TProperty>(this HtmlHelper<TModel> html,
        Expression<Func<TModel, TProperty>> expression)
    {
        string propiedad = ExpressionHelper.GetExpressionText(expression);
        return html.ViewData.TemplateInfo.GetFullHtmlFieldName(propiedad);
    }
}
De esta forma, podemos reescribir el script anterior asegurando la corrección del identificador utilizado indicando la propiedad mediante una expresión lambda con tipado fuerte, como solemos hacer en los helpers de edición:
<script type="text/javascript">
    $("#@Html.IdFor(model=>model.Nombre)").blur(function () {
        var mays = $(this).val().toUpperCase();
        $(this).val(mays);
    });
</script>
Y aunque es menos frecuente, también podemos encontrarnos con la necesidad de obtener el nombre de campo del formulario (atributo “name”) a utilizar para un control de edición. Por ejemplo, si queremos construir de forma manual las etiquetas, podemos establecer el nombre utilizando Html.NameFor():
<input type="text" 
       id="@Html.IdFor(model=>model.Nombre)" 
       name="@Html.NameFor(model=>model.Nombre)" />
Espero que os sea de utilidad.
Y por cierto, una noticia de última hora: ¡MVC 4 ya trae de serie estos helpers! 🙂
____________
Este artículo y muchos más en: Variable not found.

2 comentarios en “ASP.NET MVC: obtener id y nombre de un control de formulario”

  1. Muy buen post (como siempre) 😉

    Curioso como al principio de MVC decíamos lo de “HTML predecible” y todo eso cuando lo comparábamos con Webforms. Y ahora aquí nos tienes con un Helper para saber que han generado los Helpers de MVC. 😛

    Cosas de la evolución supongo… 😉

    Un abrazo!

  2. Hola, Eduard! Gracias por comentar 🙂

    La verdad es que es bastante predecible, salvo en los casos en que no puede predecirse ;-), como en los casos que comento en el post, los editores personalizados, tipos complejos, etc.

    Eso sí, eliminamos las ‘magic strings’ de la vista, y la hacemos medio sensible a los
    cambios de nombre de las propiedades

    Pero vaya, es cierto lo que dices: al final tenemos que tirar de lo mismo que hacíamos en Webforms. Qué cosas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *