ASP MVC 2 : Jquery 모달 팝업, 데이터를 반환하는 방법

Question

mvc 프로젝트에 jquery 모달 팝업을 추가하는 방법을 찾고 있습니다. 글을 http://www.weirdlover.com/2010/05/20/mvc-render-partial-modal-pop-up-via-jquery-and-colorbox-demo/ 게시했습니다.

내 시나리오 : 몇 가지 입력 필드 (텍스트 상자, 확인란)가있는 페이지가 있습니다. 이미지를 선택하려면 모달 팝업을 열 링크가 필요합니다. 모든 이미지를 표시하고 사용자가 이미지를 선택할 수있는 컨트롤이 있습니다. 위에 나열된 사이트를 따라 모달 팝업을 여는 방법을 알고 있습니다.

지금 당장 이해하지 못하는 부분은 선택한 이미지 이름 (myimage.jpg)을 원본 페이지보기로 되돌리고 다른 모든 모델 변경 사항을 그대로 유지 한 채 모델의 속성으로 설정하는 방법입니다.

내가 무엇을 가지고 현재 : MyFormController> ActionMethod : ImageSelected (다른 모든 변화) 내 "MyFormModel을"잡아 어떻게 (ImageSelectorModel 모델)

가 유효하면, 설정 MyFormModel.ImageName = 모델. ImageName을 호출하고 View (myFormModel)를 호출합니다. http://valums.com/ajax-upload/ :

케빈

Answer 1

기본 양식의 숨겨진 입력 필드를 사용하면됩니다. 사용자가 모달 팝업에서 이미지를 클릭하면 jQuery를 사용하여 click 이벤트를 처리하고 클릭 한 이미지의 값 (파일 이름?)을 숨겨진 입력 필드에 지정합니다. 숨겨진 입력 필드의 이름을 올바르게 지정하면 ModelBinder가 모델 객체에 파일 이름을 자동으로 바인딩하므로 파일을 수동으로 업데이트 할 필요가 없습니다.

<%= Html.HiddenFor(x => x.ImageFileName) %> 

일부 jQuery를 :

$("#popup a.candidateImage").click(function() { 
    $("form input[name=ImageFileName]").value = $("img", this).attr("src"); 
    // probably also close the modal? 
} 

내가 이것을 테스트하지 않은,하지만 당신은 아이디어를 얻을해야 ... 아마 또한 축소판을 보여주기 위해 노력할 것이다 기본 폼에

메인 폼의 ImageFileName에있는 파일을 채 웁니다.

Answer 2

사용자가 이미지를 업로드 할 경우 당신의 도움에 대한

덕분에, 나는 당신이 AJAX 업로드를 확인하는 것이 좋습니다. 이미지 파일을 비동기 적으로 가져 와서 디스크에 저장하고 저장된 이미지 경로 (등)를 JsonResult로 반환 할 수 있습니다.

new AjaxUpload('image-input', { 
    action: '/Photo/Add', 
    onComplete: function (file, response) { 
     //using Fowler's json2 
     var photo = JSON.parse(response); 

     if (photo.IsValid) { 
      //do what you want with your photo 
      //photo.Path should contain the saved image's location 
     } 
     else { 
      alert("Sorry. You tried to upload an invalid file."); 
     } 
    } 
}); 

그리고 당신의 사진 컨트롤러 :

[HttpPost] 
    public JsonResult Add(HttpPostedFileBase UserFile) 
    { 
     if (UserFile == null) 
     { 
      //something bad happened, no file 
     } 

     string filePath = "/Path/To/Image/Image.jpg"; 

     //this isn't unit test friendly. 
     //just quick and dirty: 
     string fullPath = HostingEnvironment.MapPath(filePath); 
     UserFile.SaveAs(fullPath); 

     var model = new JsonPhotoAdd 
     { 
      IsValid = true, 
      Path = filePath 
     }; 

     return Json(model, "text/html"); 
    } 

가 유의 사항 : 브라우저 비동기 파일 업로드 방지로 이것은 해결 방법입니다 자바 스크립트는 다음과 같이 보일 것이다. 따라서 양식 제출 프로세스에 두 번째 페이지를 추가하는 것이 좋습니다. 두 번째 페이지에서 사용자는 표준 파일 입력 필드와 양식 게시로 이미지 업로드를 처리 할 수 ​​있습니다. http://forums.asp.net/p/1237419/2253919.aspx

Answer 3

나는 ASP를 사용합니다.NET MVC2 및 AjaxUploader의 새 버전 :

공공 JsonResult AddImg (HttpPostedFileBase userfile로) userfile로 항상 null의

... :

내 컨트롤러를 호출하면

스크립트 :

내보기에서 5,

function createUploader() { 
var uploader = new qq.FileUploader({ 
element: document.getElementById('file-uploader-demo1'), 
action: '/Evenement/AddImg', 
name: 'UserFile', 
}); 
} 

는, 형태는 아이디어가 있습니까

<% using (Html.BeginForm("AddImg", "Evenement", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ %> 
<div id="file-uploader-demo1"></div> 
<% } %> 

OK인가? 많은 나쁜 고맙고 미안 나는 영어^^ 나는 프랑스 사람이야.