2

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

到目前为止，这是我想出的：
控制器：

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" />

}
4

1 回答 1

4

非常基本的动作

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?

然后您可以将图像属性中的 src 替换为 Action 地址，例如 -

http://localhost/MyController/Image/MyImage
于 2013-08-22T20:09:00.453 回答