PartialView data not posting back to controller - asp.net-mvc

Question

I am loading the partial view based on dropdownlist value as suggested in the following links. I am able to show partial View and enter values in textboxes. But when I postback, I am unable to get values in Controller. I am getting all other values except this partial view values
Render Partial View Using jQuery in ASP.NET MVC
div id="divFloorPlans"></div>
$('#ddlFloorPlans').change(function () {
var numberOfFloorPlans = $(this).val();
var data = { "id": numberOfFloorPlans };
$.ajax({
url: "FloorPlans",
type: "POST",
data: data, //if you need to post Model data, use this
success: function (result) {
$("#divFloorPlans").html("");
$("#divFloorPlans").html(result);
}
});
});
#model IList<ViewModels.FloorPlan>
#for (int i = 1; i <= Model.Count; ++i)
{
<div class="col-md-12" >
<div class="col-md-2" >
#Html.DropDownListFor(m => m[i - 1].Bedrooms, ViewData["Bedrooms"] as List<SelectListItem> })
</div>
<div class="col-md-2" >
#Html.DropDownListFor(m => m[i - 1].Bathrooms, ViewData["Bathrooms"] as List<SelectListItem> })
</div>
<div class="col-md-3" >
#Html.TextBoxFor(m => m[i - 1].MinPrice})
#Html.TextBoxFor(m => m[i - 1].MinPrice })
</div>
<div class="col-md-3">
#Html.TextBoxFor(m => m[i - 1].MinSqFt, new { #placeholder = "From" })
#Html.TextBoxFor(m => m[i - 1].MaxSqFt, new { #placeholder = "To"})
</div>
</div>
}
My Model looks like this.
public class ItemEditVM
{
public FloorPlan FloorPlan { get; set; }
public IList<FloorPlan> ListFloorPlans { get; set; }
}
My Controllers
//Partial View Returning Controller
[HttpPost]
public ActionResult FloorPlans(int id)
{
var model = new ItemEditVM();
model.NumOfFloorplans = id;
model.ListFloorPlans = new List<FloorPlan>();
for (int i = 0; i < id; i++)
{
model.ListFloorPlans.Add(new FloorPlan { FloorPlanName = "", Bathrooms = "", Bedrooms = "", MaxPrice = "", MinPrice = "", MaxSqFt = "", MinSqFt = "" });
}
return View("FloorPlan", model.ListFloorPlans);
}
//Create Controller
[HttpPost]
public ActionResult Create(ItemEditVM model)
{
if (ModelState.IsValid)
{
}
}

Answer 1

You partial views model is IList<FloorPlan> which is generating controls with
<input name="[0].MinPrice" ..>
<input name="[1].MinPrice" ..>
which would post back to IList<FloorPlan> model, but your method parameter is ItemEditVM model. You need to the partial view model to be #model ItemEditVM
In the GET method
return View("FloorPlan", model);
and in the view
#model ItemEditVM
#for (int i = 1; i <= Model.ListFloorPlans.Count; ++i)
{
....
#Html.TextBoxFor(m => m.ListFloorPlans[i - 1].MinPrice})
....
}
which will generate the correct name attributes for binding to your model
<input name="ListFloorPlans[0].MinPrice" ..>
<input name="ListFloorPlans[1].MinPrice" ..>