How to create readonly textbox in ASP.NET MVC3 Razor

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

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 3

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 4

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 5

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

Answer 6

@Html.TextBoxFor(model => model.IsActive, new { readonly= "readonly" })

This is just fine for text box. However, if you try to do same for the checkbox then try using this if you using it

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

But don't use disable because disable always send the default value false to the server either it was in checked or unchecked state. And the readonly does not work for checkbox and radio button. readonly only works for text fields.

Answer 7

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"}})