MVC 4 - 无法通过 Ajax 调用更新部分视图答案

【问题标题】：MVC 4 - Unable to update a partial view via an Ajax callMVC 4 - 无法通过 Ajax 调用更新部分视图
【发布时间】：2013-05-22 08:03:02
【问题描述】：

我有一个包含局部视图的 MVC 4 视图。部分视图包含在主视图中如下：

    <div id="PartialView">
        @Html.Partial("_PhotoList", @Model)    
    </div>

我的局部视图如下：

@model ExchangeSite.Entities.EstateSaleSellerListing

<div style="width: 1300px; height: 300px; overflow: auto">
    @foreach (var photo in @Model.ImageList)
    {
        <a href="javascript:DeletePhoto(@photo.ImageId);">
            <img src="@Url.Action("GetPhoto", new { id = photo.ImageId })" alt="" title="Click on the image to remove it" width="250" height="190"/>
        </a>
    }
</div>

<script>

    function DeletePhoto(imageId) {
        var Url = "/EstateSaleSellerListing/DeletePhoto";

        $.get(Url, { imageId: imageId }, function (data) {
            $("#PartialView").html(data);
        });
    }

</script>

如您所见，当用户单击图像时，会调用 DeletePhoto() 方法。它调用命名控制器上名为 DeletePhoto 的操作方法。 action 方法删除照片，生成新的照片列表并更新局部视图。一切正常，除了部分视图永远不会更新。

我的控制器代码如下：

public ActionResult DeletePhoto(int imageId)
{
    var photo = this._systemLogic.GetItem<Photo>(row => row.ImageId == imageId);
    this._systemLogic.DeleteItem(photo);

    EstateSaleSellerListing listing = new EstateSaleSellerListing();
    GetPhotoList(listing);

    return PartialView(listing);
}

EstateSaleSellerListing 实体具有显示在局部视图中的照片对象列表。

我没有足够的经验知道为什么我的局部视图在操作方法返回时没有更新。

【问题讨论】：

您正在尝试更新主视图的 div。在局部视图中，为您的 div 命名并在 js 中更新它。我希望它有所帮助。

标签： asp.net-mvc asp.net-mvc-4

【解决方案1】：

尝试将您的 javascript 移动到您的主页并更改

return PartialView(listing);

到

return PartialView("_PhotoList", listing);

【讨论】：

【解决方案2】：

检查您在 jQuery 中的缓存设置（看起来您无论如何都在使用 jQuery）。而且我认为您的第二个参数有点偏离（未将其分配给数据）...试试这个

<script>
    function DeletePhoto(imageId) {
        var Url = "/EstateSaleSellerListing/DeletePhoto";

        $.get(Url, { cache: false, data: { imageId: imageId }}, function (data) {
            $("#PartialView").html(data);
        });
    }
</script>

【讨论】：

【解决方案3】：

如果在局部视图中加载，您还可以让控制器方法将局部视图呈现为字符串。

控制器...

model.PartialViewContent=PartialToString("Partials/SmallerPart",model);
return PartialView("Partials/LargerPart",model);

查看

 $("#PartialView").html(data.PartialViewContent);

仅供参考，PartialToString 未内置于 mvc 中。我不得不一起破解它

【讨论】：