44

I have the following inside my asp.net mvc web application :-

<div><span class="f">Data Center Name</span> @Html.EditorFor(model => model.Switch.TMSRack.DataCenter.Name, new  { disabled = "disabled" })</div>

but the field will not be disabled ,, can anyone adivce please? THanks

John John
  • 1
  • 72
  • 238
  • 501

6 Answers6

68

@Html.EditorFor() does not have an overload to support htmlAttributes. You could try @Html.TextBoxFor() 

@Html.TextBoxFor(model => model.propertyName, new {disabled= "disabled" })

If you are using system key words such as class in htmlAttributes please add @ before the attribute name.

Ex:

@Html.TextBoxFor(model => model.propertyName, new {@class = "disabledClass" })
Kaf
  • 33,101
  • 7
  • 58
  • 78
  • 1
    worked with both class and TextBoxFor: @Html.TextBoxFor(model => model.Doctor.Label1, new { @class = "form-control", disabled = "disabled" }) – MoniR Nov 13 '16 at 03:44
  • It's not that EditorFor doesn't support html attributes, it's that the viewModels it uses to display the controls don't support it. You can add support in them. – John Lord Jun 04 '19 at 14:41
42

Using MVC 5, @Html.EditorFor() supports htmlAttributes 

@Html.EditorFor(model => model.x, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled" } })

The above example shows how you can add a class and also the disabled attribute

SaadK
  • 1,507
  • 20
  • 33
  • how can I make the disabled attribute conditional? – luisgepeto May 29 '17 at 23:21
  • You can use jQuery to add and remove the disabled attribute with if statements $('.inputDisabled').prop("disabled", false); $('.inputDisabled').prop("disabled", true); – SaadK May 30 '17 at 00:59
  • @LuisBecerril you could do something like `if (@Model.IsReadOnly) { @Html.EditorFor(m => m.x, new { htmlAttributes = ... } else { @Html.EditorFor(m => m.x) }`. You'll need a property on the view-model to indicate whether the control should be read-only. – David Aug 11 '20 at 18:33
  • Just worth mentioning, a disabled field value does not get pass through to the controller. Instead, you would use @readonly = "readonly" – PKirby Nov 06 '20 at 07:15
9

Another alternative: surround the EditorFor with a div or a span with a certain id, and then use a bit of jquery/js:

  <span id="editors">      
        @Html.EditorFor(x => x.ViewModelProperty)
  </span>

    <!-- Disable above editors. EditorFor doesn't allow html attributes unfortunately. -->
    <script type="text/javascript">
        $(function () { $('#editors :input').attr("disabled", true); });
    </script>
Sava B.
  • 1,007
  • 1
  • 10
  • 21
  • Adding the Javascript part for my code's 'nop-editor' worked for me. `$('#DisplayOrderSection :input').attr("disabled", true);` – DaminiVyas Aug 04 '20 at 07:00
6

For those that lose your text value : Disabled fields does not pass its value to the controller. Instead, use @readonly = "readonly"

@Html.EditorFor(model => model.EmployeeCode, new { htmlAttributes = new { @readonly = "readonly", @class = "form-control"} })
PKirby
  • 859
  • 3
  • 16
  • 36
4

If you lose information when you accept the Edit-changes ... You could try

<h3>@Model.x</h3>
@Html.HiddenFor(model => model.x, new { htmlAttributes = new { @class = "form-control" } })
Armando Baltazar
  • 91
  • 1
  • 1
3

You can also use EditorFor() eg:

@Html.EditorFor(model => model.Nama, new { htmlAttributes = new { @disabled ="true", @class = "form-control" } })
adiga
  • 34,372
  • 9
  • 61
  • 83
remajabioinformatik
  • 31
  • 1