Model Binding With Disabled Textbox

Question

I have a textbox that I am defining as

<%= Html.TextBox("Username", Model.Form.Username, 
        new { @class = "textbox", @disabled = "disabled" })%>

The action is defined as

    [AcceptVerbs(HttpVerbs.Post)]
    [ValidateAntiForgeryToken]
    public ActionResult EditLogin(LoginForm post) {

        ...

        return View(model);
    }

When I POST to this, Username will be blank. All other properties bind correctly, but if I change @disabled="disabled" to @readonly="readonly" the username binds properly and everything works.

It looks like model binding ignores values in disabled fields. Is there a way around this? I still need the field's value to bind to the model. I can use readonly but would prefer to use disabled so it is visually apparent to the user that they cannot edit the value of the field.

John Hartsock · Accepted Answer · 2011-10-22T01:26:23.850

69

I believe a form field that is disabled does not submit anything. If you have a form and disable the foo field in that form, when you post the post will not have the value for the foo field. This is simply the nature of disabling a field in HTML and is not a MVC issue.

edited Oct 22 '11 at 01:26

answered Apr 16 '10 at 14:24

John Hartsock

85,422
23
131
146

3

Wow, I can't believe I haven't run into this before, either that or completely forgot about it. Thanks. – modernzombie Apr 16 '10 at 14:30
Its an easy thing to overlook but Dan Diplo is right, in many cases a hidden field is a good way to go. Out of curiousity why are you disabling a username field? – John Hartsock Apr 16 '10 at 14:51
I am creating a form where an administrator can create new logins for the system. I was disabling the username when the administrator was editing the login (first and last name and emails are editable) because the username cannot be changed. I have decided to use readonly and can use some CSS to color the field differently. – modernzombie Apr 16 '10 at 14:55
3

<%= Html.Hidden("Username", Model.Form.Username)%> <%= Html.Label(Model.Form.Username)%> This would probably be a better usage – John Hartsock Apr 16 '10 at 18:19
See my answer. Disabled is sometimes the best case for the UI but it can still be passed if you change the property back on submit and this makes the idea of a hidden input unnecessary, which is better for reading and understanding the code. – tony.leo Jun 15 '17 at 15:19

score 62 · Answer 2 · edited Apr 23 '13 at 21:14

62

use readonly - will disable input but you'll still have it in the binding. You could apply a style on the div to make it looked greyed out maybe?

<div class="editor-label">
  @Html.LabelFor(model => model.FileName)
</div>
<div class="editor-field-greyed-out">
  @Html.TextBoxFor(model => model.FileName, new { @readonly = true })
  @Html.ValidationMessageFor(model => model.FileName)
</div>

edited Apr 23 '13 at 21:14

Peter Gluck

8,168
1
38
37

answered Mar 23 '12 at 13:42

vincemcc79

621
5
2

1

Nice Answer for the OP ... Thanks :) – Tushar Gupta Nov 06 '14 at 08:58
2

Came here because i had the same issue for a dropdownbox, for future ppl readonly doesnt work for a dropdown :) – Jim Wolff Aug 21 '15 at 09:45
1

No need to re-style in MVC5! `readonly` works perfectly, my edit page submits and everything is back to normal. Thanks for this answer. :) – Jamie Nov 20 '18 at 21:27
Exactly what I needed! Thanks! – Rapid99 Dec 19 '18 at 20:47

score 5 · Answer 3 · answered Jun 18 '13 at 19:30

5

You can do a workaround by adding a hidden field with the same value ;)

<%= Html.Hidden("Username", Model.Form.Username)%>

answered Jun 18 '13 at 19:30

Khaled Musaied

2,513
3
25
38

So the element(s) is not really valid HTML and could cause headaches with javascript. – QMaster Sep 11 '16 at 09:34
This solution cause duplicate element id in the html. – Aamol Dec 13 '18 at 04:02

score 5 · Answer 4 · answered Apr 16 '10 at 14:30

5

If you want the value to be sent back, but not be editable, consider placing it in a hidden field. Obviously, don't do this for anything that requires a degree of security, since a user can tamper with it.

answered Apr 16 '10 at 14:30

Dan Diplo

25,076
4
67
89

score 4 · Answer 5 · answered Jun 15 '17 at 15:16

As suggested in the comments, readonly instead of disabled can be an option but it will not work for select boxes. Instead of creating a hidden input, you can keep the inputs or selects as disabled and still pass the data by changing the disabled property with JavaScript at the submit.

Using jQuery it'd look like this:

$('form').on('submit', function(){
    $('input, select').prop('disabled',false);
    return true;
});

score 1 · Answer 6 · answered May 18 '16 at 05:10

Easiest way to submit disabled fields is to copy them over to an invisible, non disabled control before submit. Some people create those controls manually and hook up to the on change event in jQuery to copy them on demand, but this solution below is generic, easy and less chatty - although one rule: you must create (render) a clean page after postback (so

$('#submitBtn').closest('form').one('submit', function() {

    var $form = $(this);

    // input, textarea, select, option, ----- button, datalist, keygen, output, optgroup
    $form.find('input:disabled, textarea:disabled, select:disabled, option:disabled').each(function () {

        var $item = $(this);

        var hiddenItem = $item.clone();
        hiddenItem.removeAttr('id');
        hiddenItem.removeAttr('disabled');
        hiddenItem.attr('style', 'display: none');

        $item.after(hiddenItem);
    });

});

ingenious dude! But you can also make some changes and put this methon on onload — clement, Feb 07 '17 at 12:45
This works - but excessive. If you're using jQuery already, just change the disabled property to false at the submit. See my answer. — tony.leo, Jun 15 '17 at 15:17

score 0 · Answer 7 · edited May 23 '17 at 12:10

0

@readonly = true does not work on my page. I did additional research. Here is the article that explains it

ReadOnly attribute doesn't work in ASP.NET MVC Models

edited May 23 '17 at 12:10

Community

1
1

answered Feb 09 '17 at 22:27

user12345

181
1
2
18

Model Binding With Disabled Textbox

7 Answers7

Linked