2013-08-22 4 views
2

현재 이미지, 다음 이미지 및 이전 이미지를 반환하는 Model 클래스가 있습니다.
슬라이드 전환을위한 액션이있는 컨트롤러가 있습니다.
이전 슬라이드와 다음 슬라이드 버튼이있는 Ajax.BeginForm에 의해 액션이 트리거됩니다.
페이지 새로 고치기없이보기 변경 슬라이드를 만들기 위해 수행 할 수있는 작업은 무엇입니까?
가 컨트롤러 :ASP MVC 4 페이지에서 이미지를 바꾸는 방법

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

} 
+0

jQuery.ajax 액션 호출을 사용하면 액션이 json을 반환합니다 (이미지 경로를 반환합니까? 또는 실제 이미지?) 및 반환 된 데이터가있는 jQuery를 사용하여 이미지의 src를 전환합니다 –

+0

@Royi Mindel, 실제 이미지를 반환하는 작업. 하지만 나는 이미지를 저장할 수 있다고 생각합니다 ... 시나리오에서 json은 무엇입니까? 나는 컨트롤러의 동작에서 무엇을 반환하고 어떻게 사용하는지에 관해서는 다소 혼란 스럽다. – kroiz

+0

http://tackoverflow.com/questions/4240619/how-can-i-replace-image-inside-a-td-with-loading-image-during-ajax-call 이것은 아약스 부분을 보여 주며, 당신은 당신의 행동을 사용합니다. 거기에 URL로, 그리고 이미지의 경로를 반환 –

답변

4

아주 기본적인 행동

public class SlideshowController : Controller 
{ 
    ... 

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

    ... 

} 

a를 여기

는 지금까지 해낸 것입니다 jQuery 아약스 전화 :

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

코드 테스트 있지만, 올바른 생각이 당신에게 제공해야하지

편집 :

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

:

당신은 같은 이미지를 반환 할 수있는이 같은 새로운 액션에서 이미지 ID를 사용하여 데이터 Can an ASP.NET MVC controller return an Image?

에서 가져온 다음 이미지 속성의 src를 작업 주소로 바꿀 수 있습니다like -

http://localhost/MyController/Image/MyImage 
+0

좋아 보이는데, 어떻게 부분보기를 사용하여 비교합니까? 여기서도 옵션을 볼 수 있습니까? – kroiz

+0

부분보기는 여러보기에서 동일한 cshtml 코드를 재사용하는 도구이지만 서버가 페이지를 작성할 때만 사용되며 내 재현 없이도 작업을 수행합니다. –

+0

이미지가 파일이 아니고 모델의 스트림 인 경우 어떻게해야합니까? – kroiz