从ajax控制器调用更新视图

Question

事情是这样的，我试图更新一个视图，其中显示了图像和DateTime。我想要的图像和时间来更新，而无需重新加载页面。因此，经过一番研究，我发现使用Ajax调用应该可以做到这一点。

由于某些原因，ajax调用后既没有时间也没有图像更新，我不知道为什么。

我错过了什么，或者这不是我应该做的方式?

请记住，我是asp.net和Ajax的新手。谢谢:)

这是我的视图与Ajax脚本:

@model myApp.Models.ImageViewModel
@{
    ViewBag.Title = "Image";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script>    
    function refreshImage() {
        $.ajax({
            //url: "/Controller/ActionName",
            async: true,
            url: '/Image/GetImage',
            type: 'GET',
            success: function () {
                setTimeout(refreshImage, 5000);
            }
        });
    }
    $(document).ready(function () {
        setTimeout(refreshImage, 5000);
    });
</script>
<div>
    <div class="panel panel-info">
        <div class="panel-heading"><h4>Image</h4></div>
        <div class="panel-body">
            <div class="ImgContainer">
                <img src=@Model.ImageUrl>
                <div>@Model.LastUpdateDate</div>
            </div>
        </div>
    </div>
</div>

这里是控制器方法:

public ActionResult GetImage()
{
    DateTime lastUpdate = System.DateTime.Now;
    string imageUrl = "http://lorempixel.com/1920/1080/animals";
    ImageViewModel image = new ImageViewModel(lastUpdate, ImageUrl);
    Debug.WriteLine("test");
    return View(image);
}

Answer 1

将ajax调用更改为this

function refreshImage() {
    $.ajax({
        dataType:'image/jpg',
        url: '/Image/GetImage',
        type: 'GET',
        success: function () {
            setTimeout(refreshImage, 5000);
        }
    });
}

Answer 2

好了，我知道是怎么回事了。由于我使用的url没有改变，我在url上使用一个沉闷的参数强制刷新图像，同时也得到了更新的时间。

现在我的ajax调用是这样的。

$.ajax({
   //url: "/Controller/ActionName"
   url: '/Image/GetImage',
   type: 'GET',
   success: function () {
       var time = new Date().toLocaleString();
       $("#imageCam").attr("src", "@Model.ImageUrl" + "?" + time);
       document.getElementById("theTime").innerHTML = time;
       setTimeout(refreshImage, 5000);
      }
   });

希望这对将来的人有所帮助。更多信息请看这个问题如何在jQuery中重载/刷新元素(图像)