ASP MVC 2: JQuery модальное всплывающее окно, как вернуть данные

Question

Я изучаю добавление модального всплывающего окна jQuery к моему проекту mvc. Я смотрел http://www.weirdlover.com/2010/05/20/mvc-render-partial-modal-pop-up-via-jquery-and-colorbox-demo/ публикации.

Мой сценарий: У меня есть страница с несколькими полями ввода (текстовое поле, флажок). Я хочу иметь ссылку, которая откроет модальное всплывающее окно, чтобы выбрать изображение. У меня есть элемент управления, который отображает все изображения и позволяет пользователю выбирать изображение. Я понимаю, как открыть модальное всплывающее окно после сайта, указанного выше.

Теперь я не понимаю, как вернуть выбранное имя изображения (myimage.jpg) в мое исходное представление страниц и установить его в свойство на модели, при этом все остальные изменения модели сохранились неповрежденными.

Я имею в данный момент: MyFormController> ActionMethod: ImageSelected (модель ImageSelectorModel)

Если это справедливо, как я хватаю "MyFormModel" (со всеми другими изменениями), установите MyFormModel.ImageName = модель. ImageName и вызов View (myFormModel).

Спасибо за вашу помощь

Kevin

Answer 1

Я бы сделал это со скрытым полем ввода на основной форме. когда пользователь нажимает изображение в модальном всплывающем меню, используйте jQuery для обработки события клика и присваивания значения щелчка изображения (имя файла?) в скрытое поле ввода. если вы правильно укажете скрытое поле ввода, 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 Upload: http://valums.com/ajax-upload/. Вы можете захватить файл изображения асинхронно, сохранить его на диск и вернуть сохраненный путь изображения (и т. Д.) В виде JsonResult. Javascript будет выглядеть примерно так:

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 всегда нулевой ...

сценарий:

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

На мой взгляд, форма OK

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

У вас есть идея? Большое спасибо и извините за мой плохой английский ^^ я французский.