在这里寻找一些 Ajax 帮助...
我有一个相当复杂的视图,它建立在一个相当复杂的 ViewModel 之上。
在页面上,我有 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 的触发器是下拉列表的更改事件。
如果这完全没有意义,请随意说,我会尝试澄清我在寻找什么!
谢谢