2

現在の画像、次の画像、前の画像を返すことを知っている Model クラスがあります。
スライドを切り替えるためのアクションを備えたコントローラーがあります。
そのアクションは、前のスライドと次のスライドのボタンを持つ 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" />

}
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>

コードはテストされていませんが、正しいアイデアが得られるはずです

編集：

次のように、新しいアクションで画像 ID を使用して画像をデータとして返すことができます。

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

ASP.NET MVC コントローラーは画像を返すことができますか?

次に、画像属性の src を次のようなアクションアドレスに置き換えることができます-

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