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