ASP.NET MVC3 - zone de texte avec @ Html.EditorFor

209

J'ai l'application ASP.NET MVC3 et j'ai également un formulaire pour ajouter des nouvelles. Lorsque VS2010 a créé la vue par défaut, je n'ai que des entrées de texte pour les données de chaîne, mais je veux avoir une zone de texte pour le texte des actualités. Comment je peux le faire avec la syntaxe Razor.

La saisie de texte ressemble à ceci:

@Html.EditorFor(model => model.Text)
Jacob Jedryszek
la source
En relation, consultez cette réponse à une autre question sur la personnalisation de ce modèle d'édition.
Jeroen

Réponses:

375

Vous pouvez utiliser l' [DataType]attribut sur votre modèle de vue comme ceci:

public class MyViewModel
{
    [DataType(DataType.MultilineText)]
    public string Text { get; set; }
}

puis vous pourriez avoir un contrôleur:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
}

et une vue qui fait ce que vous voulez:

@model AppName.Models.MyViewModel
@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Text)
    <input type="submit" value="OK" />
}
Darin Dimitrov
la source
7
À peu près ce que je cherchais, mais que se passe-t-il si je dois spécifier les attributs html des lignes et des colonnes?
Jason
3
Je reçois toujours [class = "text-box single-line"] au code source :(
Stavros
7
Extrêmement bien informé et toujours aussi simple que possible et explique tout étape par étape. salue @Darin Dimitrov.
İsmet Alkan
@Jason utilise CSS pour le style.
Jo Smo
DataAnnotationsftw! Je vous remercie.
Kon
136

Quelqu'un a demandé l'ajout d'attributs (en particulier, «lignes» et «cols»). Si vous utilisez Razor, vous pouvez simplement faire ceci:

@Html.TextAreaFor(model => model.Text, new { cols = 35, @rows = 3 })

Ça marche pour moi. Le '@' est utilisé pour échapper les mots clés afin qu'ils soient traités comme des variables / propriétés.

Tyson Phalp
la source
En effet - si vous savez que vous voulez une zone de texte avec des cols / lignes, il n'y a aucune raison d'utiliser EditorFor au lieu de TextAreaFor. Quelqu'un a-t-il une raison pour laquelle vous auriez encore besoin d'utiliser EditorFor et savez-vous que vous devez spécifier des colonnes / lignes?
James Haug
95
@Html.TextAreaFor(model => model.Text)
addy
la source
6
J'aime mieux cette méthode car la réponse populaire ici consiste à modifier le modèle de base de données, ce qui signifie que vous devez supprimer et recréer la base de données sous-jacente si vous utilisez EntityFramework.
Ciaran Gallagher
6
Cette annotation DataType ne force pas une actualisation dans Entity Framework.
Tallmaris
9
@Ciaran: Cette déclaration devrait vous dire quelque chose. Il ne devrait jamais être nécessaire de changer la couche de base de données pour modifier l'interface utilisateur. Il devrait y avoir un objet de présentation, qui est mappeur à l'objet de base de données. N'utilisez jamais l'objet de base de données dans votre interface utilisateur.
Frederik Prijck
5
Pour être clair, ce à quoi Frederik fait référence est la création de classes qui représentent vos données de vue SÉPARÉES des classes utilisées dans votre DbContext. Ne passez pas vos modèles DbContext en vues. Créez une classe de modèle de vue, puis déplacez les informations qui vous intéressent du modèle de base de données vers le modèle de vue, et vice versa lorsque vous acceptez des entrées.
Jim Yarbro
3
@FrederikPrijck Je ne suis pas en désaccord, mais cela ne viole-t-il pas le principal DRY? Vous devez copier toutes les propriétés d'une classe à une autre classe. Y a-t-il une façon moins «banale» de le faire, que vous avez trouvée?
James Haug
1

Déclarez dans votre modèle avec

  [DataType(DataType.MultilineText)]
  public string urString { get; set; }

Ensuite, en .cshtml peut utiliser l'éditeur comme ci-dessous. vous pouvez utiliser @cols et @rows pour la taille TextArea

     @Html.EditorFor(model => model.urString, new { htmlAttributes = new { @class = "",@cols = 35, @rows = 3 } })

Merci !

Abdul Hadee
la source