MVC 4 - 无法通过Ajax调用更新局部视图
问题描述:
我有一个包含局部视图的MVC 4视图。局部视图被包括在主视图中,如下所示:MVC 4 - 无法通过Ajax调用更新局部视图
<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的操作方法。操作方法会删除照片,生成新的照片列表并更新局部视图。除部分视图之外的所有内容都不会更新。
我的控制器的代码如下:
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实体具有获得显示在局部视图照片的对象的列表。
我没有足够的经验知道为什么我的部分视图在操作方法返回时没有更新。
答
尝试你的JavaScript移动到你的主页,并改变
return PartialView(listing);
到
return PartialView("_PhotoList", listing);
答
检查您的缓存设置在jQuery的(它看起来像你使用jQuery的语法反正) 。我认为你的第二个参数是有点过(它不是分配给数据)尝试这种
<script>
function DeletePhoto(imageId) {
var Url = "/EstateSaleSellerListing/DeletePhoto";
$.get(Url, { cache: false, data: { imageId: imageId }}, function (data) {
$("#PartialView").html(data);
});
}
</script>
答
你也可以有控制方法使串局部视图如果在部分加载。
控制器...
model.PartialViewContent=PartialToString("Partials/SmallerPart",model);
return PartialView("Partials/LargerPart",model);
查看
$("#PartialView").html(data.PartialViewContent);
据透露,PartialToString不内置MVC。我必须一起破解
您正在尝试更新主视图的div。在局部视图中,命名您的div并在js中更新它。我希望它有帮助。 – Tushar