Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 274
modernzombie Avatar asked Apr 16 '10 13:04

modernzombie


6 Answers

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.

like image 151
John Hartsock Avatar answered Oct 01 '22 16:10

John Hartsock


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>
like image 44
vincemcc79 Avatar answered Oct 01 '22 16:10

vincemcc79


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.

like image 25
Dan Diplo Avatar answered Oct 01 '22 17:10

Dan Diplo


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

<%= Html.Hidden("Username", Model.Form.Username)%>
like image 37
Khaled Musaied Avatar answered Oct 01 '22 15:10

Khaled Musaied


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;
});
like image 21
tony.leo Avatar answered Oct 01 '22 16:10

tony.leo


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

});
like image 36
baHI Avatar answered Oct 01 '22 16:10

baHI