web-dev-qa-db-fra.com

Application de la classe CSS à l'aide de Html.DisplayFor dans la vue rasoir

À l'intérieur de la vue du rasoir, j'ai utilisé le modèle pour rendre l'étiquette comme

 @Html.LabelFor(model => model.MyName, htmlAttributes: new { @class = "control-label col-md-6" })

et maintenant je veux utiliser sa valeur au lieu de attr d'annotation de données. valeur donc j'ai essayé avec DisplayFor comme

@Html.DisplayFor(model => model.MyName, new { @class = "control-label col-md-6" })

cette classe css control-label col-md-6 n'est pas applicable. Pourquoi?

c#.netasp.net-mvcrazor
13
user1765862

DisplayFor ne fonctionne pas comme les autres *For aides. Comme EditorFor, c'est ce qu'on appelle un "assistant modèle". En d'autres termes, ce qu'elle rend est contrôlé par un modèle qui peut être modifié. Surtout, pour ces deux méthodes, si vous recherchez leur documentation dans MSDN, vous verrez que le paramètre qui correspond normalement à htmlAttributes avec les autres assistants, fait plutôt référence à additionalViewData avec ces deux. C'est parce que, encore une fois, leur sortie est contrôlée essentiellement par des vues, qui prennent ViewData.

De plus, avec DisplayFor en particulier, les modèles par défaut ne produisent quasiment que la valeur, sans HTML. Si vous passez une propriété de chaîne, par exemple, la sortie sera la valeur de cette chaîne et rien d'autre. Par conséquent, il n'y a rien à lier aux attributs HTML, même si vous pouvez les transmettre.

Si vous voulez faire ce que vous essayez de faire, vous devez créer des modèles d'affichage personnalisés. Cela peut être fait en ajoutant des vues nommées d'après types (par exemple String, Boolean, Byte etc.) ou des membres de DataType enum (CreditCard, EmailAddress etc.), à Views\Shared\DisplayTemplates. Par exemple, si vous avez créé une vue à Views\Shared\DisplayTemplates\String.cshtml, puis lorsque vous avez appelé DisplayFor avec une propriété de type string, cette vue était utilisée pour la rendre. Vous pouvez ensuite envelopper la valeur qui autrement serait simplement sortie directement dans du code HTML de votre choix et utiliser ViewData pour appliquer les attributs HTML appropriés. Par exemple:

<span class="@ViewData["class"]">@ViewData.TemplateInfo.FormattedModelValue</span>
13
Chris Pratt

La différence est que @Html.LabelFor la fonction d'assistance rend un <label></label> tag et le @Html.DisplayFor La fonction d'assistance ne rend aucune balise html, mais rend le texte brut. Par exemple, le code suivant:

@Html.DisplayFor(model => model.MyName, new { @class = "control-label col-md-6" })

renvoie du texte brut:

Martin

considérant que MyName avait la valeur "Martin". Et le code:

@Html.LabelFor(model => model.MyName, htmlAttributes: new { @class = "control-label col-md-6" })

retournera:

<label class="control-label col-md-6">Martin</label>

Considérez la différence.

Utilisez ce qui suit (si vous souhaitez utiliser @ Html.DisplayFor):

<span class"control-label col-md-6">@Html.DisplayFor(model => model.MyName)</span>
31
Numan Ijaz

Case à cocher Redimensionner les pages du rasoir .NET Core 2.2

Tard dans le jeu ici, mais il fallait que les cases à cocher soient énormes par rapport à la façon dont Razor Template les affiche. Parce que je voulais que l'utilisateur vérifie si c'était vérifié ou non.

J'ai essayé des trucs dessus, ça n'a pas marché. J'ai donc utilisé Chrome Developer Tool pour voir le rendu de la page et cela l'a montré pour la case à cocher:

input[type="radio"], input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

Et j'allais le trouver dans le fichier CSS car je pouvais utiliser toutes les cases à cocher pour être plus grand. Cependant, il a déclaré qu'il était situé ici:

reboot.scss: 373

Maintenant, je jure qu'il faisait référence à un fichier scss différent lors de ma première ouverture dans le développeur. Mais comme cela me ressemblait à du grec, un slob de code, j'ai juste décidé de mettre cela (après l'avoir essayé avec style ci-dessus) en haut de ma page Razor. Remarquez que je viens de cloner le style caché ci-dessus et que j'ai simplement ajouté la largeur et la hauteur:

<style>
    input[type="radio"],
    input[type="checkbox"] {
        box-sizing: border-box;
        width: 40px;
        height:40px;
    }
</style>

Maintenant, voici le contrôle Razor que j'affichais. Il se termine par une case à cocher en html à la fin, mais je pense que Razor Page est assez intelligent pour savoir que c'était un champ Vrai/Faux et l'a montré comme une zone de texte. Mais. . . pas avant d'avoir appliqué le dimensionnement que j'ai ajouté !! J'espère que cela aide quelqu'un.

<td>
    @Html.DisplayFor(modelItem => item.Moderated)

</td>
0
JustJohn