这让我困惑了几天。我花了一段时间来追踪这种不同步发生的地方。

我有 jquery 可排序的拖放来确定一些图像的顺序。我重写了可排序的循环停止(拖动)并将序号分配给隐藏值以提交值:

$.each(parent.children(), function (i, v) {
    var newOrdinal = $(v).index();
    $(v).find('.product-img-ordinal').val(newOrdinal);//hidden value
});
submitChagnes();

我的控制器:

public async Task<ActionResult> EditDetails(IEnumerable<ProductImage> images, Guid? productId)
{
    //save to database
    //get sorted list of images
    return PartialView("_ProductImagesList", sortedImages);
}

此时的断点在拖动时以正确的顺序显示图像。

然后_ProductImagesList.html:

@foreach(var item in Model)
{
    <div class="img-container-wrapper clearfix pull-left">
        @Html.DisplayFor(n => n[Model.IndexOf(item)])
    </div>
}

接下来是 DisplayFor 的 DisplayTemplate:

@Html.Partial("_ProductImage", Model)
@Html.HiddenFor(model=>model.Ordinal, new { @class="product-img-ordinal"})
@Html.HiddenFor(model=>model.Id, new { @class = "product-img-id" })

最后部分:

<div class="img-container pull-left">
    <div>
        <img class="product-img" width="240" height="336" src='@Url.Content(string.Format("~/PathToMyImages/GetImage?size=240x337&id={0}", Model.Id))' title="@Model.Description" />
    </div>
    <div class="img-descr">
        <div class="img-descr1">@Model.Description</div>
        <div class="img-descr2">Test Desc2</div>
    </div>
</div>
@Html.HiddenFor(model=>model.Description, new { @class = "product-img-desc" })

其中一些可能看起来很糟糕,但这是因为试图找出问题。但是发生的事情是@Html.Partial(“_ProductImage”,Model)以某种方式对其中的 Id 有错误的值而@Html.HiddenFor(model => model.Id,new { @class =“product-img-id”})对于图像的 src 有错误的值(应该是是图像的 Id)。我不明白它们中有两种不同的模型,即使它们都通过相同的模型。我甚至可以在它们上面加上断点,并在循环的同一次迭代中看到它们是 2 个不同的值。所以我最终会得到一个 div,其中包含一个带有一个 id 的 img src 和一个带有另一个 Id 的 Id 的隐藏字段。它总是正确的第一次,然后所有后续的帖子都不同步,所以就像第一次 ajax 调用混合后的东西。即使查看回来的网络流量,您也可以看到混合的信息:

从 partials/ajax 简化回报:

<div>
    <img src='1234.jpg'> <!-- Wrong, should match Id below -->
    <input type='hidden' name='[0].Id' value='abcd' /> <!-- src should have this name -->
</div>
<div>
    <img src='abcd.jpg'> <!-- Wrong, should match Id below -->
    <input type='hidden' name='[1].Id' value='1234' />
</div>

src 文件名应与 Id 值匹配。这几乎就像 server-side 缓存的东西,或者我不明白的事情。 DisplayTemplate 在隐藏字段中有正确的信息,Partial 有错误的信息,这是奇怪的,foreach 循环甚至没有得到那个项目,它在部分中得到它的 id。

还有一条信息,如果我注释掉提交并让 jquery 可排序在面板上移动,一切都正确地保持在一起,它实际上在 ajax 调用期间在 DisplayTemplate 和 Partial 视图迭代之间混淆了。

我可以看到值作为某个 Id(GUID)进入,并且在部分中是一件事,在 DisplayTemplate 中是另一件事。

有什么想法吗?

谢谢!