web-dev-qa-db-fra.com

Comment créer un modèle MVC Razor pour DisplayFor ()

J'ai quelques propriétés dans mon modèle de vue qui sont uniquement en affichage, mais je dois récupérer leurs valeurs à l'aide de jQuery pour effectuer un calcul sur la page. La méthode standard Html.DisplayFor () écrit simplement leur valeur sur la page. Je veux créer un modèle de rasoir qui me permettra de rendre chaque élément comme:

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

Je sais que je peux spécifier un modèle dans Html.DisplayFor () pour utiliser un modèle particulier pour le rendu de la propriété mais dans ce modèle, comment puis-je identifier l'attribut id dans lequel écrire la balise span?

@Html.DisplayFor(model => model.Element, "MyTemplate");
asp.net-mvcasp.net-mvc-3razorasp.net-mvc-4
30
David Clarke

OK, je l'ai trouvé et c'est en fait très simple. Dans mon dossier Views\Shared\DisplayTemplates, j'ai Reading.cshtml contenant les éléments suivants:

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

Cela rend la balise correcte en utilisant le nom de la propriété comme attribut id et la valeur de la propriété comme contenu:

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

Dans le fichier de vue, cela peut être appelé comme suit:

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

Ou si la propriété du modèle est décorée avec IHint ("Reading") alors le nom du modèle peut être ignoré de l'appel à DisplayFor () et il restituera toujours en utilisant le modèle:

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

Cela devrait fonctionner aussi bien avec les modèles d'éditeur personnalisés.

51
David Clarke

Vous pouvez intégrer cette id au modèle de vue et l'utiliser dans le modèle d'affichage:

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

J'ai lu de nombreux articles SO sur la définition du modèle pour @Html.DisplayFor Pour la propriété booléenne, mais je ne les ai pas compris clairement. Votre question est proche de cela et après l'avoir saisie, j'ai décidé de ajouter une nouvelle réponse comprend toutes les étapes de mise en œuvre. Cela peut être utile pour d'autres personnes.

1. Création d'un modèle

Au début, vous devez ajouter un Partial View Dans le chemin ci-dessous (le chemin est très important):

Views/Shared/DisplayTemplates/

Par exemple, j'ai créé un Partial View Nommé _ElementTemplate Et je l'ai rempli comme ceci:

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

2. Ajout IHint au modèle

Pour établir une connexion entre votre property et template, vous devez ajouter l'attribut UIHint comme ci-dessous dans votre classe de modèle:

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

3. Utilisation de @ Html.DisplayNameFor dans la vue

Dans chaque vue dont vous avez besoin de cette propriété, vous pouvez utiliser le code ci-dessous:

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

Sortie

Le code ci-dessus est rendu au code ci-dessous dans mon exemple (if (MyProperty == true)):

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

Définition des attributs

Pour définir id ou d'autres attributs html, vous pouvez utiliser ModelMetadata comme ceci:

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

Sortie avec attribut 

<div id="MyProperty">
    <span>
        Yes
    </span>
</div>
4
Ali Soltani

Il y a n article expliquant le Templates (Display + Editor) dans Razor, et aussi l'attribut UIHint.

2
Yang C

La meilleure façon de créer un modèle d'affichage qui produira les éléments suivants:

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

Serait-ce:

<span id="@Html.IdForModel()">@Html.DisplayTextFor(m => m)</span>

Ces aides n'existaient peut-être pas lors de la première publication de cette question, mais cela s'appuie sur la réponse de David de deux manières:

  1. L'utilisation de @Html.DisplayTextFor(m => m) au lieu de @Model Utilisera toujours des annotations de données tout en affichant la valeur au lieu de simplement exécuter ToString() dessus.
  2. L'utilisation de @Html.IdForModel() au lieu de @ViewData.ModelMetadata.PropertyName Serait préférable dans les cas où le modèle est imbriqué ou répété et où l'ID ne sera pas simplement le nom de la propriété.
1
Loren Paulsen

J'ai eu exactement le même problème que le message d'origine.

Pas sûr que le dernier commentaire soit valide. Cela ferait de l'attribut HTML id une valeur au moment de l'exécution et ne peut donc pas être référencé avec un nom au moment de la conception.

J'ai utilisé la surcharge de DisplayFor qui vous permet d'ajouter de nouveaux objets au dictionnaire de données (ViewBag)

Mon modèle est un objet C # appelé Project avec différentes propriétés. À mon avis, j'ai ceci:

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

Cela utilise un modèle personnalisé appelé StringDisplaySetHtmlID et le dernier paramètre ajoute une paire de valeurs clés au Viewbag.

Mon fichier modèle ressemble à ceci:

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

Je mets également une classe ici à des fins de style. J'ai utilisé le nom de clé HtmlID plutôt que simplement ID pour éviter une collision de noms commune potentielle.

Maintenant, dans mon javascript, je peux récupérer le contenu de la plage en utilisant le jquery suivant:

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