发布ASP.. NET MVC页面部分加载JQuery

所以我在一个广告列表页面上工作，我需要允许用户动态地将房间添加到广告中，而无需张贴回页面。我想用Ajax来做到这一点，以减少所需的导航量，从而改善用户体验。

最初我考虑使用Ajax助手方法来加载页面的动态元素。然而，由于MVC/HTML不支持嵌套表单，这并没有很好地工作。

Ajax。BeginForm在Html中。BeginForm

我最终使用一些JQuery来加载房间和添加/删除房间。在添加/删除房间后，JQuery在控制器上调用一个动作来加载房间。

$("[name='RemoveRoom']").click(function () {
    var url = $(this).data('url');
    $('#roomsWrapper').load(url);
});

[HttpGet]
public ActionResult GetRooms(int Id)
{
    var viewModel = this.roomAvailableAdvertStore.FindById(Id);
    return PartialView("_Rooms", viewModel.Rooms);
}

我现在面临的问题是，当我提交表单时，这些动态加载的元素没有被绑定到视图模型。更清楚地解释

<form>
    @Html.HiddenFor(m => m.AdvertId); 
    <div id=”roomsWrapper”>
       // These data items are not being bound to the model.
       @Html.Partial(“_Rooms”, Model.Rooms);
    </div>
    <input type="submit" />
<form>

_Rooms。CSHTML部分页面如下所示:

@model List<RoomViewModel>
@for (int roomIndex = 0; roomIndex < Model.Count(); roomIndex++)
{
    @Html.HiddenFor(m => m[roomIndex].RoomId)
}

表单发送回一个带有以下签名的操作:

public async Task<ActionResult> Update(RoomAvailableAdvertViewModel model)
{
   ...
}

视图模型如下所示:

public class RoomAvailableAdvertViewModel
{
    public int AdvertId { get; set; }
    public List<RoomViewModel> Rooms { get; set; }
}