发布一个用 JQuery 部分加载的 ASP.NET MVC 页面答案

【问题标题】：Post an ASP.NET MVC page partially loaded with JQuery发布一个用 JQuery 部分加载的 ASP.NET MVC 页面
【发布时间】：2016-10-07 12:36:48
【问题描述】：

所以我正在开发一个广告列表页面，我需要允许用户在不发回页面的情况下动态地将房间添加到广告中。我想使用 Ajax 来减少所需的导航量，从而改善 UX。

最初，我研究了使用 Ajax 辅助方法来加载页面的动态元素。但是，由于 MVC/HTML 不支持嵌套表单，因此效果不佳。

Ajax.BeginForm inside 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; }
}

【问题讨论】：

？我猜是错字吗？您的问题目前尚不清楚
是的，谢谢我已经更正了。
_Rooms 部分是什么样的？表单在哪里提交？
看看这篇博文。它解释了使用 begincollection 处理动态数据。 blogs.interknowlogy.com/2014/08/01/…
请参阅 this answer 了解动态添加（和删除）集合项的选项

标签： c# jquery ajax asp.net-mvc ajaxhelper

【解决方案1】：

感谢 cmets 中留下的链接，我设法解决了这个问题。

基本上会出现此问题，因为默认的 ASP.net MVC 模型绑定器只能绑定到复杂类型的集合，前提是它们可以唯一标识。 Phil Haack 在下面的文章中更清楚地解释了这一切：

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

但是，Phil 方法的局限性在于他将数字索引应用于集合中的每个元素。当您尝试动态添加项目时，这种方法会失败，因为索引不会是唯一的。 cmets 中给出的第二个链接通过将 Guid 应用于集合中的每个元素来解决此问题，确保集合中的每个元素都有唯一的键。

http://blogs.interknowlogy.com/2014/08/01/mvc-series-part-1-dynamically-adding- 项目第 1 部分/

如果可以扩展 Razor 视图引擎以缓解此问题的发生，那将会很有趣。

【讨论】：