asp.net-mvc - una - model annotation mvc

¿Cómo creo una plantilla MVC Razor para DisplayFor()

Question

Tengo un par de propiedades en mi modelo de vista que son solo de visualización pero necesito recuperar sus valores usando jQuery para realizar un cálculo en la página. El método estándar Html.DisplayFor () simplemente escribe su valor en la página. Quiero crear una plantilla de afeitar que me permita representar cada elemento como:

<span id="ElementsId">Element''s value</span>

Sé que puedo especificar una plantilla en Html.DisplayFor () para usar una plantilla particular para representar la propiedad, pero dentro de esa plantilla, ¿cómo identifico el atributo id para escribir en la etiqueta span ?

@Html.DisplayFor(model => model.Element, "MyTemplate");

Answer 1

Hay un artículo que explica las Templates (Pantalla + Editor) en Razor, y también el atributo UIHint .

Answer 2

Leí muchas publicaciones de SO sobre la definición de plantilla para @Html.DisplayFor para propiedades Booleanas, pero no pude entenderlas claramente. Su pregunta está cerca de esto y después de comprenderla, decidí agregar una nueva respuesta que incluye todos los pasos para implementarla. Puede ser útil para otras personas.

1. Creando una plantilla

Al principio, debe agregar una Partial View en la ruta a continuación (la ruta es muy importante):

Views/Shared/DisplayTemplates/

Por ejemplo, creé una Partial View que se llamaba _ElementTemplate y la _ElementTemplate así:

<span>
    @(@Model ? "Yes" : "No")
</span>

2. Agregar UIHint al modelo

Para establecer una conexión entre su property y la template , debe agregar el atributo UIHint como se UIHint a continuación en su clase de modelo:

[UIHint("_YesOrNoTemplate")]
public bool MyProperty { get; set; }

3. Usando @ Html.DisplayNameFor en Veiw

En cada vista que necesita esta propiedad, puede usar el siguiente código:

<div>
    @Html.DisplayFor(modelItem => item.MyProperty)
</div>

Salida

El código anterior se representa al código a continuación en mi ejemplo ( if (MyProperty == true) ):

<div>
    <span>
        Yes
    </span>
</div>

Establecer atributos

Para establecer el id u otros atributos html, puede usar ModelMetadata siguiente manera:

<span id="@ViewData.ModelMetadata.PropertyName">
    @(@Model ? "Yes" : "No")
</span>

Salida con atributo

<div id="MyProperty">
    <span>
        Yes
    </span>
</div>

Answer 3

OK, lo encontré y en realidad es muy simple. En mi carpeta Views / Shared / DisplayTemplates tengo Reading.cshtml que contiene lo siguiente:

@model System.Int32
<span id="@ViewData.ModelMetadata.PropertyName">@Model</span>

Esto representa la etiqueta correcta utilizando el nombre de la propiedad como el atributo id y el valor de la propiedad como contenido:

<span id="Reading">1234</span>

En el archivo de vista esto se puede llamar usando lo siguiente:

@Html.DisplayFor(model => model.Reading, "Reading")

O si la propiedad del modelo está decorada con UIHint ("Lectura"), entonces el nombre de la plantilla puede dejarse fuera de la llamada a DisplayFor () y seguirá representando con la plantilla:

@Html.DisplayFor(model => model.Reading)

Esto debería funcionar igualmente bien con plantillas de editor personalizadas.

Answer 4

Puede hacer que esta id parte del modelo de vista y usarlo en la plantilla de visualización:

<span id="@Model.Id">@Html.DisplayFor(x => x.Value)</span>

Answer 5

Tenía exactamente el mismo problema que la publicación original.

No estoy seguro de que el último comentario sea válido. Haría que el atributo de identificación HTML sea un valor de tiempo de ejecución y, por lo tanto, no se puede referenciar con un nombre de tiempo de diseño.

Utilicé la sobrecarga de DisplayFor que le permite agregar nuevos objetos en el diccionario de datos (ViewBag)

Mi modelo es un objeto C # llamado Proyecto con varias propiedades. En mi opinión, tengo esto:

@Html.DisplayFor(model => model.ProjectName, "StringDisplaySetHtmlID", new { HtmlID = "project-name" })

Esto está usando una plantilla personalizada llamada StringDisplaySetHtmlID y el último parámetro agrega un par de valores clave al Viewbag.

Mi archivo de plantilla se ve así:

@model string
<span class = "display-field" id = "@(ViewBag.HtmlID)">@Model</span> 

También estoy estableciendo una clase aquí para fines de diseño. He usado el nombre clave HtmlID en lugar de solo ID para evitar una posible colisión de nombres común.

Ahora en mi javascript puedo recoger el contenido del tramo usando el siguiente jquery:

var projectName = $(''#project-name'').text()