ASP MVC 2: модальное всплывающее окно Jquery, как вернуть данные - PullRequest
Новая
       21

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

1 голос
/ 15 июля 2010

Я пытаюсь добавить модальное всплывающее окно 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 = model.ImageName и вызвать View (myFormModel).

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

Кевин

Ответы [ 3 ]

0 голосов
/ 16 июля 2010

Я бы сделал это со скрытым полем ввода в главной форме.когда пользователь щелкает изображение в модальном всплывающем окне, используйте 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 на главной форме, если он былзаселена.

0 голосов
/ 26 июля 2010

Я использую ASP.NET MVC2 и НОВУЮ ВЕРСИЮ AjaxUploader:

Когда я вызываю мой контроллер:

publicJsonResult AddImg (HttpPostedFileBase UserFile)

UserFile всегда нулевой ...

скрипт: 

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

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

0 голосов
/ 16 июля 2010

Если пользователь загружает изображение, я рекомендую вам загрузить AJAX: 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.");
        }
    }
});

А в вашем контроллере Photo: 

    [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

...