Model Binding With Disabled Textbox

问题

I have a textbox that I am defining as

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

In my action

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

        ...

        return View(model);
    }

post.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 their 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.

回答1:

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.

回答2:

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>

回答3:

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.

回答4:

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

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

回答5:

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

回答6:

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

});

回答7:

@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

来源：https://stackoverflow.com/questions/2653432/model-binding-with-disabled-textbox

标签

ASP.NET

asp.net-mvc

model-binding