从嵌套的局部视图向控制器发送复杂的视图模型-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