從嵌套的局部視圖向控制器發送復雜的視圖模型-MVC3

Question

在這里尋找一些Ajax幫助...

我有一個相當復雜的視圖，它是基於相當復雜的ViewModel構建的。

在頁面上，我有3列，每列代表完整的旅程，然后細分以顯示各個航班。

每個航班都由一個包含詳細信息（開始和結束位置，出發時間，到達時間，操作員等）的框表示。該框還包含可以從該位置進行的所有其他可能的航班的下拉列表（例如，您可能想掛起在機場周圍再飛行6個小時，因此您可以選擇以后的航班！）

無論如何，通過更改一個可能的航班，我將不得不更新整個專欄，因為進行后續航班將意味着不再可能進行后續航班。

這就引出我的問題-我是否可以通過jQuery將復雜的視圖模型傳遞回控制器？ 是否可以使用嵌套在foreach循環中的局部視圖來完成？ 我要做的只是通過ajax更新列，但是我看不到如何將viewmodel傳遞回來。 我正在嘗試避免重新加載整個頁面，因為這將是一個非常麻煩的搜索，因此ajax更新將是理想選擇

這是該過程的一些簡化代碼：

視圖代碼（index.cshtml）-jQuery在主視圖中找到

@foreach (var item in Model)
{
    <div id="column-@groupCount">
        @Html.Partial("_JourneyColumnPartial", item)
    </div>
}

<script type="text/javascript">
    $(".flightItem").change(function (event) {
        alert(event.target.id);
        var cSelected = $(this).val();
        alert(cSelected);
        $.ajax({
            url: "/Search/GetChangeInfo",
            contentType: "application/json",
            type: "POST",
            dataType: "json",
            data: ({ cID: cSelected }),
            success: function (display) {
            }
        });
    });
</script>

第一個局部視圖的代碼（_JourneyColumnPartial.cshtml）

<div class="routeContainer">
    @Html.Partial("_ColumnItemPartial", Model)
</div>  

子局部視圖的代碼（_ColumnItemPartial.cshtml）

@{
    int journeyNumber = 1;
}
@foreach (var journey in Model.SelectedJourneys)
{
    List<JourneyDetails> list = Model.Journeys.Where(j => j.JourneyDateAndTimeID != journey && j.DepartureID == hub.DepartureID && j.ArrivalID == hub.ArrivalID).OrderBy(j => j.JourneyDateAndTime).ToList();
    <div class="box">
        <div class="journeytimes">
            <b>Depart</b> @hub.DepartureDate<br />
            <b>Arrive</b> @hub.ArrivalDate<br />
        </div>
        <div class="boxcontrols">
            <select class="flightItem" id="flightItem_@{<text>@Model.ColumnNumber</text><text>_</text><text>@journeyNumber</text>}">
                @foreach (var flight in list)
                {
                    <option value="@flight.JourneyID">@flight.ProviderName - @flight.JourneyDateAndTime</option>                                                    
                }                                            
            </select>

        </div>
        <!-- end of box -->
    </div>
    journeyNumber++;    
    <!-- end of box wrap -->
}

我知道我沒有包括有關ViewModel的詳細信息，但是它非常復雜，並且包含其他類的通用列表，因此它很大。 Ajax / jQuery的觸發器是下拉列表的change事件。

如果這完全沒有道理，請隨時說，我將盡力澄清我要尋找的內容！

謝謝

Answer 1

可以通過在jquery調用中將數據作為json發送。

您可以通過簡單地創建一個像ViewModel這樣的javascript對象，然后通過Json.Stringify方法將該javascript對象轉換為字符串並將字符串值設置為ajax調用中的data來實現。

Answer 2

我不確定您的問題是發送數據還是返回數據，但這將幫助您通過Ajax返回數據： http : //www.klopfenstein.net/lorenz.aspx/render-partial-view-to-string -asp-net-mvc