How to create a readonly textbox in ASP NET MVC3 Razor

Question

How do I create a readonly textbox in ASP NET MVC3 with the Razor view engine   Is there an HTMLHelper method available to do that   Something like the following    Html ReadOnlyTextBoxFor m   gt  m userCode

User · Answer

Html TextBoxFor model   gt  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 are using it    Html CheckBoxFor model   gt  model IsActive  new   onclick    return false       But don t use disable  because disable always sends the default value false to the server - either it was in the checked or unchecked state  And the readonly does not work for checkbox and radio button  readonly only works for text fields

User · Answer

You can use the below code for creating a TextBox as read-only   Method 1    Html TextBoxFor model   gt  model Fields i  TheField  new    readonly   true      Method 2   Html TextBoxFor model   gt  model Fields i  TheField  new   htmlAttributes   new  disabled    disabled

User · Answer

UPDATE  Now it s very simple to add HTML attributes to the default editor templates  It neans instead of doing this    Html TextBoxFor m   gt  m userCode  new    readonly  readonly       you simply can do this    Html EditorFor m   gt  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    Create a folder named EditorTemplates in   Views Shared  Create a razor PartialView named String cshtml 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        In model class  put the  ReadOnly true   attribute on properties which you want to be readonly    For example   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   gt  m EditablePropertyExample   Html EditorFor m   gt  m ReadOnlyPropertyExample    The first one renders a normal text-box like this    lt input class  text-box single-line  id  field-id  name  field-name    gt    And the second will render to    lt input readonly  readonly  disabled  disabled  class  text-box single-line readonly  id  field-id  name  field-name    gt    You can use this solution for any type of data  DateTime  DateTimeOffset  DataType Text  DataType MultilineText and so on   Just create an editor-template

User · Answer

Html TextBox  Receivers   Model  new    class    form-control   style    width  300px    readonly    readonly

User · Answer

With credits to the previous answer by  Bronek and  Shimmy   This is like I have done the same thing in ASP NET Core    lt input asp-for  DisabledField  disabled  disabled    gt   lt input asp-for  DisabledField  class  hidden    gt    The first input is readonly and the second one passes the value to the controller and is hidden  I hope it will be useful for someone working with ASP NET Core

User · Answer

The solution with TextBoxFor is OK  but if you don t want to see the field like EditBox stylish  it might be a little confusing for the user  involve changes as follows    Razor code before changes   lt div class  editor-field  gt        Html EditorFor model   gt  model Text        Html ValidationMessageFor model   gt  model Text   lt  div gt   After changes   lt  -- New div display-field  after div editor-label  -- gt   lt div class  display-field  gt       Html DisplayFor model   gt  model Text   lt  div gt    lt div class  editor-field  gt       lt  -- change to HiddenFor in existing div editor-field -- gt       Html HiddenFor model   gt  model Text       Html ValidationMessageFor model   gt  model Text   lt  div gt     Generally  this solution prevents field from editing  but shows value of it  There is no need for code-behind modifications

User · Answer

Html TextBoxFor m   gt  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

[c#] How to create a readonly textbox in ASP.NET MVC3 Razor

Examples related to c#

Examples related to asp.net-mvc-3

Examples related to razor

Examples related to html-helper

Examples related to readonly-attribute