ASP MVC 2: Jquery modal popup, how to return data

Question

Hey

I'm looking into adding a jquery modal popup to my mvc project. I have been looking at http://www.weirdlover.com/2010/05/20/mvc-render-partial-modal-pop-up-via-jquery-and-colorbox-demo/ posting.

My scenario: I have a page with a few input fields (textbox, checkbox). I want to have a link that will open a modal popup to select an image. I have a control that will display all images and allow the user to select an image. I understand how to open the modal popup following the site listed above.

What I'm not understanding right now is how to return the selected image name (myimage.jpg) to my original pages view and set it to a property on the model with all the other model changes kept intact.

What I have currently: MyFormController > ActionMethod:ImageSelected(ImageSelectorModel model)

If it is valid, how do I grab my "MyFormModel" (with all other changes), set MyFormModel.ImageName = model.ImageName and call View(myFormModel).

Thanks for your help

Kevin

Answer 1

Hey Kevin,

If the user is uploading an image, I recommend that you check out AJAX Upload: http://valums.com/ajax-upload/. You can grab the image file asynchronously, save it to disk, and return the saved image path (etc.) as a JsonResult. The javascript would look something like this:

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.");
        }
    }
});

And in your Photo controller:

    [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");
    }

Keep in mind: this is a workaround, as browsers guard against asynchronous file uploads. As such, you might want to consider adding a second page to your form submission process. On that second page, users can handle uploading images with a standard file input field and a form post. http://forums.asp.net/p/1237419/2253919.aspx

Answer 2

I would do it with a hidden input field on the main form. when the user clicks an image in the modal popup, use jQuery to handle the click event and assign the value of the image clicked (the filename?) to the hidden input field. if you name the hidden input field correctly, the ModelBinder will automatically bind the filename to your model object, and you won't need to update it manually.

on main form:

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

some jQuery:

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

I didn't test this, but you should get the idea... I would probably also try to show a thumbnail of the file in ImageFileName on the main form if it's been populated.

Answer 3

Hey!

i use ASP.NET MVC2 and the NEW VERSION of AjaxUploader:

when i call my Controller:

"public JsonResult AddImg(HttpPostedFileBase UserFile)"

UserFile is always null...

the script:

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

in my view, the form is OK

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

<% } %>

do you have an Idea ? Many thanks and sorry for my bad english^^ i'm french.