Question

这就是问题，我正在尝试更新显示图像和日期时间的视图。我想要图像和时间更新而不重新加载页面。因此经过一些研究后我发现使用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调用更改为此

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

Answer 2

好的，我知道发生了什么事。由于我使用的网址没有改变，我强制刷新图像，网址上的参数较暗，并且还有时间同时更新。

现在我的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);
      }
   });

希望将来帮助某人。有关详细信息，请参阅此问题 How to reload/refresh an element(image) in jQuery

从ajax控制器调用更新视图

2 个答案: