Question

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

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.