MVC4 Pass model via Ajax.BeginForm
asp.net-mvc, asp.net-mvc-4, c#, jquery, razor
Solution
As noted in the comments, you're actually expecting to see items in your Model that you have put in your form using `DisplayFor`. `DisplayFor` fields will not post, they are simply for display. In order to post those values back, you'd need a `HiddenFor` for each of the field that you want to post, in order for model binding to work it's magic.
Problem
I have tried to follow some good posts here to get this to work but every time i click the ajax postback the break point in my controller shows a model with null values. This page displays model values for viewing only, but I have tried putting them in their own form and also wrapping them in the ajax form and nothing seems to work. ``` @model VendorProfileIntranet.Models.VendorProfile $(function () { $("form").submit(function () { if ($(this).valid()) { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (result) { $("#message").html(result); } }); } return false; }); ``` }); ``` @using (Ajax.BeginForm("SelectVendor", "Home", new AjaxOptions { HttpMethod="post", InsertionMode=InsertionMode.Replace, UpdateTargetId="message" })) { <div style="float:right; width:500px"> <div id="message"></div> <input id="btnSubmit" type="submit" value="Select Vendor" /> </div> ``` The view is really long (just displays model values for viewing) abbreviated here. ``` <div id="viewform"> <div id="viewform-contact" style="float:left;"> <fieldset> <legend>Contact Information</legend> @Html.HiddenFor(model => model.ProfileID) <div class="view-field"> @Html.LabelFor(model => model.Name) @Html.DisplayFor(model => model.Name) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.Email) @Html.DisplayFor(model => model.Email) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.Phone) @Html.DisplayFor(model => model.Phone) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.Website) @Html.DisplayFor(model => model.Website) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.CompanyName) @Html.DisplayFor(model => model.CompanyName) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.Address1) @Html.DisplayFor(model => model.Address1) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.Address2) @Html.DisplayFor(model => model.Address2) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.City) @Html.DisplayFor(model => model.City) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.State) @Html.DisplayFor(model => model.State) </div> <br /> <div class="view-field"> @Html.LabelFor(model => model.Zip) @Html.DisplayFor(model => model.Zip) </div> <br /> <div class="view-fieldwide"> @Html.LabelFor(model => model.VendorNotes) </div> <br /> <div class="view-fieldwide"> @Html.DisplayFor(model => model.VendorNotes) </div> <br /><br /> </fieldset> </div> } ``` Controller. I have tried the above in one or two forms. With the above code the model contains all empty values except the ProfileID which is stuffed in a hidden input field. I think passing the model should work without having to create a hidden field for every model value? ``` [HttpPost] public ActionResult SelectVendor(VendorProfile pageModel) { // handle selected vendor _DAL.SelectVendor(pageModel.ProfileID); return Content("This Vendor has been selected", "text/html"); } ``` ANSWER The model values are not binded due to the use of DisplayFor