web-dev-qa-db-fra.com

Comment créer une zone de texte en lecture seule dans ASP.NET MVC3 Razor

Comment créer une zone de texte en lecture seule dans ASP.NET MVC3, avec le moteur de vue Razor? Existe-t-il une méthode HTMLHelper disponible pour le faire?

Quelque chose comme ça ?

@Html.ReadOnlyTextBoxFor(m => m.userCode)

c#asp.net-mvc-3razorhtml-helperreadonly-attribute
103
Shyju
@Html.TextBoxFor(m => m.userCode, new { @readonly="readonly" })

Vous pouvez créer un assistant HTML pour cela, mais il ne s'agit que d'un attribut HTML comme un autre. Souhaitez-vous faire un HTML Helper pour une zone de texte qui a d'autres attributs?

222
user596075

UPDATE: Il est maintenant très simple d’ajouter des attributs HTML aux modèles d’éditeur par défaut. Moyens au lieu de faire ceci:

@Html.TextBoxFor(m => m.userCode, new { @readonly="readonly" })

vous pouvez simplement faire ceci:

@Html.EditorFor(m => m.userCode, new { htmlAttributes = new { @readonly="readonly" } })

Avantages: vous n'avez pas à appeler .TextBoxFor etc. pour les modèles. Il suffit d'appeler .EditorFor.

Bien que la solution de @ Shark fonctionne correctement, qu’elle soit simple et utile, ma solution (que j’utilise toujours) est celle-ci Créer un editor-template pouvant gérer les attributs readonly:

  1. Créez un dossier nommé EditorTemplates dans ~/Views/Shared/
  2. Créez un rasoir PartialView nommé String.cshtml

  3. Remplissez le String.cshtml avec ce code:

    @if(ViewData.ModelMetadata.IsReadOnly) {
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue,
        new { @class = "text-box single-line readonly", @readonly = "readonly", disabled = "disabled" })                                     
} else {
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue,
        new { @class = "text-box single-line" }) 
}

  4. Dans la classe de modèle, placez l'attribut [ReadOnly(true)] sur les propriétés que vous souhaitez être readonly. 

par exemple.

public class Model {
    // [your-annotations-here]
    public string EditablePropertyExample { get; set; }

    // [your-annotations-here]
    [ReadOnly(true)]
    public string ReadOnlyPropertyExample { get; set; }
}

Maintenant, vous pouvez utiliser la syntaxe par défaut de razor simplement:

@Html.EditorFor(m => m.EditablePropertyExample)
@Html.EditorFor(m => m.ReadOnlyPropertyExample)

Le premier rend un text-box normal comme ceci:

<input class="text-box single-line" id="field-id" name="field-name" />

et le second se rendra à;

<input readonly="readonly" disabled="disabled" class="text-box single-line readonly" id="field-id" name="field-name" />

Vous pouvez utiliser cette solution pour tout type de données (DateTime, DateTimeOffset, DataType.Text, DataType.MultilineText et ainsi de suite). Il suffit de créer un editor-template.

28
javad amiry

La solution avec TextBoxFor est OK, mais si vous ne voulez pas voir un champ comme EditBox stylé (cela peut être un peu confus pour l’utilisateur), cela implique les modifications suivantes:

1. Code de rasoir avant les modifications

<div class="editor-field">
     @Html.EditorFor(model => model.Text)
     @Html.ValidationMessageFor(model => model.Text)
</div>

2. Après modifications

<!-- new div display-field (after div editor-label) -->
<div class="display-field">
    @Html.DisplayFor(model => model.Text)
</div>

<div class="editor-field">            
    <!-- change to HiddenFor in existing div editor-field -->
    @Html.HiddenFor(model => model.Text)
    @Html.ValidationMessageFor(model => model.Text)
</div>

Généralement, cette solution désactive les fichiers contre la modification, mais en indique la valeur . Il n'est pas nécessaire de modifier le code-behind.

5
Bronek

avec crédits à la réponse précédente de @Bronek et @Shimmy

C’est ce que j’ai fait comme dans ASP.NET Core

<input asp-for="DisabledField" disabled="disabled" />
<input asp-for="DisabledField" class="hidden" />

La première entrée est en lecture seule et la seconde transmet la valeur à Controller et est masquée. Elle sera utile pour les personnes travaillant avec ASP.Net Core.

1
Adithya Baddula

Vous pouvez utiliser le code ci-dessous pour créer une zone de texte en lecture seule.

Méthode -1  

 @Html.TextBoxFor(model => model.Fields[i].TheField, new { @readonly = true })

Méthode -2  

@Html.TextBoxFor(model => model.Fields[i].TheField, new { htmlAttributes = new {disabled = "disabled"}})
0
Krishan Dutt Sharma
 @Html.TextBox("Recivers", Model, new { @class = "form-control", style = "width: 300px", @readonly = "readonly" })
0
Hossein Dahr
@Html.TextBoxFor(model => model.IsActive, new { readonly= "readonly" })

C'est très bien pour la zone de texte. Cependant, si vous essayez de faire la même chose pour checkbox, essayez-le si vous l'utilisez

@Html.CheckBoxFor(model => model.IsActive, new { onclick = "return false" })

Mais n'utilisez pas disable car disable a toujours envoyé la valeur par défaut false au serveur, que l'état soit coché ou non. Et la readonly ne fonctionne pas pour la case à cocher et radio button. readonly ne fonctionne que pour les champs text.

0
gdmanandamohon