How to create readonly textbox in ASP.NET MVC3 Raz

Question

How to create a readonly textbox in ASP.NET MVC3, With Razor view engine ? Is there an HTMLHelper method available to do that ?

Something like this ?

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

Answer 1

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

You are welcome to make an HTML Helper for this, but this is simply just an HTML attribute like any other. Would you make an HTML Helper for a text box that has other attributes?

Answer 2

The solution with TextBoxFor is OK but if you don't want to see the field like EditBox stylish (it might be little confused for user) involve changes as follow:

1. Razor code before changes

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

2. After changes

<!-- 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>

Generally this solution disable filed against editing but shows value of it. There is no need for code-behind modifications.

Answer 3

You can use below code for creating a TextBox as read-only.

Method -1

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

Method -2

@Html.TextBoxFor(model => model.Fields[i].TheField, new { htmlAttributes = new {disabled = "disabled"}})

Answer 4

UPDATE: Now it's very simple to add html attributes to default editor templates. Means instead of doing this:

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

you simply can do this:

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

Benefits: You haven't to call .TextBoxFor etc. for templates. Just call .EditorFor.

---

While @Shark's solution works correctly and it is simple and useful, my solution (that I use always) is this one Create an editor-template that can handles readonly attribute:

1. Create a folder named EditorTemplates in ~/Views/Shared/
2. Create a razor PartialView named String.cshtml

3. Fill the String.cshtml with this 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. In model class, put the [ReadOnly(true)] attribute on properties which you want to be readonly.

e.g.

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

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

Now you can use razor's default syntax simply:

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

The first one, renders a normal text-box like this:

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

and the second, will render to;

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

You can use this solution for any type of data (DateTime, DateTimeOffset, DataType.Text, DataType.MultilineText and so on). Just create an editor-template.

Answer 5

with credits to the previous answer by @Bronek and @Shimmy

This is I have done the samething in ASP.NET Core

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

The first input is readonly and the second one passes the value to Controller and is hidden.Hope it will be useful for someone working with ASP.Net Core.

Answer 6

 @Html.TextBox("Recivers", Model, new { @class = "form-control", style = "width: 300px", @readonly = "readonly" })