MVC4 Post form null value

Question

I have a grid when the client click on Edit for one like a form is open. the User can Edit only some values (let the user to edit only the Shipping date for the current order) but when I send the Form the values of the non editable field are NULL on Post

When I display :

@Html.Display(model => model.Rep)

or :

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

the Values are displayed correctly but when I submit the form the Value are Null. the View :

@model Models.Orders
@{
    Layout = null;
}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="~/Content/pure-release-0.5.0/pure-min.css" rel="stylesheet" />
</head>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <body>
    <form class="pure-form">
        <fieldset>
             <legend>A Stacked Form</legend>
            <div class="pure-g">
                <div class="pure-u-1 pure-u-md-1-3" aria-disabled="true" aria-readonly="true">
                    <label for="first-name">@Html.LabelFor(model => model.Rep)</label>
                    @Html.Display(model => model.Rep)
                </div>
                <div class="pure-g">
                    <div class="pure-u-1 pure-u-md-1-3" aria-readonly="true">
                        <label for="first-name">@Html.LabelFor(model => model.ClientName)</label>
                        @Html.TextBoxFor(model => model.ClientName, new { disabled = "disabled", @readonly = "readonly" }) 
                    </div>
                </div>
            </div>
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>
    </form>
    </body>
}
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $(".Titre").click(function () {
            $(this).next('.Contenu').slideToggle("slow");
        });
        $("#Model").prop('disabled', true);
    });
</script>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}^

The model :

 public class Orders
{
        public int ID { get; set; }
        public string Rep { get; set; }
        public string ClientName { get; set; }
}

Controller :

When the User click on Edit on the Grid:

 public ActionResult Edit(int id = 0)
        {
            Orders order = db.Orders.Find(id);
            if (order == null)
            {
                return HttpNotFound();
            }
            return View(order);
        }

On post:

[HttpPost]
public ActionResult Edit(Orders order)
    {
        if (ModelState.IsValid)
        {
            db.Entry(order).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(order);
    }

When I debug I find theat the Values on order are NULL

I Thought that the problem was the waay that I sent data from my grid to the form but i change the easyui to Use GridMVC and still have the problem.

I used : in View TextBoxFor for readOnly + disabled as attribut but same problem

I tried : in the Model : [ReadOnly(true)] + in the View : @Html.EditorFor(model => model.Rep) but I was able to edit Rep That I want to block

I tried to make the EditorFor readonly with Javascript but I was able to edit

Can you help me please, I tried all what I found but there is something missing in my code

Thanks

dotnetom dotnetom · Accepted Answer · 2014-06-01T19:04:46

This is by design. Readonly values are not submitted to server (at least by modern browsers).

If you want to submit this value you can create a hidden field instead of a textbox:

@Html.HiddenFor(model => model.ClientName)

This will effectively submit your value to server

MVC4 Post form null value

4 Answers