c# - JQuery で部分的に読み込まれた ASP.NET MVC ページを投稿する

Question

だから私は、ユーザーがページをポストバックせずに部屋を広告に動的に追加できるようにする必要がある広告リストページに取り組んでいます。これを Ajax で行い、必要なナビゲーションの量を減らして UX を改善したいと考えています。

最初に、Ajax ヘルパー メソッドを使用してページの動的要素を読み込むことを検討しました。ただし、MVC/HTML はネストされたフォームをサポートしていないため、これはうまく機能しませんでした。

Html.BeginForm 内の Ajax.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”&gt;
       // 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; }
}