Question

我有一个Model类，它知道返回当前图像，下一个图像和上一个图像我有一个控制器，带有一个用于切换幻灯片的动作该Action由Ajax.BeginForm触发，它具有上一张幻灯片和下一张幻灯片的按钮我可以在操作中做什么来在不刷新页面的情况下更改幻灯片？

这是我到目前为止所提出的：
控制器：

public class SlideshowController : Controller
    {
        static SlideshowModel slideshowModel = new SlideshowModel();

        //
        // GET: /Slideshow/
        public ActionResult Index()
        {
            return View(slideshowModel);
        }

        public ActionResult GetCurrentSlideImage()
        {
            var image = slideshowModel.CurrentSlideImage;
            return File(image, "image/jpg");
        }

        [HttpPost]
        public ActionResult SlideshowAction(SlideshowModel model, string buttonType)
        {
            if (buttonType == ">")
            {
                slideshowModel.IncrementSlideNumber();
            }
            if (buttonType == "<")
            {
                slideshowModel.DecrementSlideNumber();
            }
            return JavaScript("alert('what to return to update the image?')");

        }

    }

查看：

@model PresentationWebServer.Models.SlideshowModel

@using (Ajax.BeginForm("SlideshowAction", new AjaxOptions { UpdateTargetId = "result" }))
{
    <img src="@Url.Action("GetCurrentSlideImage") " id="result"/>
    <br />

    <input class="float-left" type="submit" value="<" name="buttonType" id="btn-prev" />  

    <input class="float-left" type="submit" value=">" name="buttonType" id="btn-next" />

}

Answer 1

非常基本的行动

public class SlideshowController : Controller
{
    ...

    public ActionResult GetCurrentSlideImage()
    {
        return Json("newImagePath.jpg");
    }

    ...

}

在客户端添加jQuery ajax调用：

<script>
function changeImage() {
$.ajax({
    url: 'Slideshow/GetCurrentSlideImage',
    type: post,
    contentType: 'application/json',
    success: function(data) {
          $("#imageIDToReplace").attr("src", data);
    },
    complete: complete
    }
});
}
</script>

代码未经过测试，但应该给你正确的想法

编辑：

您可以在新的Action中使用图片ID将图像作为数据返回，如下所示：

public ActionResult Image(string id)
{
    var dir = Server.MapPath("/Images");
    var path = Path.Combine(dir, id + ".jpg");
    return base.File(path, "image/jpeg");
}

取自Can an ASP.NET MVC controller return an Image?

然后您可以使用Action地址替换image属性中的src 喜欢 -

http://localhost/MyController/Image/MyImage

如何在ASP MVC 4页面中替换图像

1 个答案: