将复杂视图模型从嵌套分部视图发送到控制器 - MVC3

本文关键字:视图 控制器 MVC3 模型 复杂 嵌套 | 更新日期: 2023-09-27 18:34:46

在这里寻找一些Ajax的帮助...

我有一个相当复杂的视图

,它建立在相当复杂的视图模型上。

在页面上,我有 3 列,每列代表一个完整的旅程,然后分解以显示各个航班。

每个航班都由一个包含详细信息(开始和结束位置、出发时间、到达时间、运营商等(的框表示该框还包含可以从该位置起飞的所有其他可能航班的下拉列表(例如,您可能想在机场多徘徊 6 小时,以便您可以选择稍后的航班!

无论如何,通过更改一个可能的航班,我将不得不更新整个列,因为乘坐较晚的航班将意味着后续航班可能不再可能。

这就引出了我的问题 - 我是否有可能通过 jQuery 将复杂的视图模型传回控制器? 可以使用嵌套在 foreach 循环中的分部视图来完成吗?我想做的只是通过 ajax 更新列,但我看不到如何将视图模型传回去。 我试图避免重新加载整个页面,因为这将是一个相当繁琐的搜索,所以 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 的触发器是下拉列表的更改事件。

如果这完全没有意义,请随时说,我会尝试澄清我正在寻找什么!

谢谢

将复杂视图模型从嵌套分部视图发送到控制器 - MVC3

可以通过在

jquery 调用中将数据作为 json 发送来实现。

您可以通过简单地创建一个像ViewModel这样的javascript对象来实现这一点,并通过Json.Stringify方法将该javascript对象转换为字符串,并将字符串值设置为ajax调用中的data

我不确定您的问题是发送数据还是返回数据,但这将帮助您通过 ajax 返回数据: http://www.klopfenstein.net/lorenz.aspx/render-partial-view-to-string-in-asp-net-mvc