Question

我正在尝试使用partialViews

创建一个示例MVC4网页

在我的父页面上，例如，Index.cshtml页面我正在显示一个partialView页面，允许用户查看/更新个人资料照片

加载索引页面时，如果照片可用，我需要此部分页面显示照片

加载页面后，当用户上传新照片时，我只需要使用partialView页面进行ajax回发并显示新照片。

我可以加载包含从DB获取的照片的页面，我可以通过单击“#btnPhotoUpload”按钮将新照片保存到数据库。 但保存照片后，部分视图无法自动刷新。请帮助我如何让我的部分视图页面重新显示并显示更新后的照片。

这是我的索引页面，即“，Index.cshtml”

@model MvcSamples.Models.ViewModels.UserInfoViewModel
@{

    ViewBag.Title = "Ajax Partial Postback demo";
    ViewBag.UserId = 1;
}

<h2>PersonalInfo example</h2>
<div id="photoForm">
    @Html.Partial("_UserPhoto")
</div>
<div id="OtherDetails">
    @Html.Partial("_UserDetails")
</div>

这是我的PartialView，即_UserPhoto.cshtml

@model MvcSamples.Models.ViewModels.UserInfoViewModel
@using (Ajax.BeginForm("SaveProfilePhoto", "Example", new { id = "1" }, new AjaxOptions { UpdateTargetId = "photoForm", OnSuccess = "onSuccess" }, new { encType = "multipart/form-data" }))
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 
    <a>
        <img id="imgPhoto"  width="100px" height="100px"/>
        <label for="photo">Photo:</label>
        <input type="file" name="photo" id="photo" />
      <input id="btnPhotoUpload" type="button" value="Apply" />
    </a>

    <script type="text/javascript">
        $(document).ready(function () {

            $("#imgPhoto").attr('src', "@Url.Action("GetProfileImage", "Example", new { id = ViewBag.UserId })");

            $("#btnPhotoUpload").click(function (event) {
                //on-click code goes in here.
                event.preventDefault();
                SavePhotoToDb();

            });

            function SavePhotoToDb() {
                var json;
                var data;
                $.ajax({
                    type: "POST",
                    url: "/Example/SaveProfilePhoto",
                    data: new FormData($("#form0").get(0)),
                    dataType: "html",
                    contentType: false,
                    processData: false,
                    success: saveItemCompleted(data),
                    error: saveItemFailed
                });
            }

            function saveItemCompleted(data) {
                    $("#photoForm").html(data);
        }

        function saveItemFailed(request, status, error) {
            }
        });
    </script>
}

这是我的控制器ExampleController：

namespace MvcSamples.Controllers
{
    public class ExampleController : Controller
    {
        IUserDetails usr = new UserDetails();

        // GET: /Example/
        [HttpGet]
        public ActionResult Index()
        {
            //usr.GetProfilePhoto(WebSecurity.GetUserId(User.Identity.Name));
            if (!string.IsNullOrWhiteSpace(User.Identity.Name))
            {
                ViewBag.UserId = WebSecurity.GetUserId(User.Identity.Name);
            }

            UserInfoViewModel model = new UserInfoViewModel();
            model.GenderList = usr.FillGenderTypesDropDownList();
            return View(model);
        }


        [HttpPost]
        public ActionResult SaveProfilePhoto(HttpPostedFileBase photo, UserInfoViewModel model)
        {
            string path = @"C:\Temp\";
            if (photo != null)
            {
                model.UserId = 1;//WebSecurity.GetUserId(User.Identity.Name);
                ViewBag.UserId = model.UserId;
                var binary = new byte[photo.ContentLength];
                photo.InputStream.Read(binary, 0, photo.ContentLength);
                UserPicModel upModel = new UserPicModel();
                upModel.UserPhoto = binary;
                upModel.UserId = model.UserId;
                usr.InsertProfilePhoto(upModel);

            }

            return PartialView("_UserPhoto", model); 
        }

        public FileResult GetProfileImage(int id)
        {
            byte[] barrImg = usr.GetProfilePhoto(id);
            return File(barrImg, "image/png");
        }

    }
}

更新

正如@David Tansey建议的那样，我添加了代码来刷新SaveCompleted（数据）中的图像。

function RefreshImage() {
    $("#imgPhoto").attr('src', function () {
        // the datetime portion appended to the url avoids caching issues
        // and ensures that a fresh image will be loaded every time
        var d = new Date();

        return this.src + '?' + d.getTime();
    });
}

但是上面的代码只有在我点击两次上传按钮后才刷新图像。实际上我需要这个在$("#btnPhotoUpload").click之后立即刷新图像。有什么建议吗？

我也试过在控制器上禁用缓存，但没有运气：

[OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)]

Answer 1

我很确定问题是浏览器正在缓存图像文件，并且在您上传新文件后没有“感知”需要再次将其带到网上。

请查看以下帖子，了解如何附加虚拟（但动态）查询字符串值以防止缓存发生。我认为这种方法可以解决您的问题。

asp.net mvc jquery filling image

希望有所帮助。

Ajax回发部分视图未加载更新的图像

1 个答案: