MVC Partial View update model in

Question

I was wondering how can I achive something like this?

I've got a view1 and in it there is a form and partial view with list.

Now when click on some button I need to open modal form with another list. By chosing one of the elements in modal form I need to update list in my view1 and close modal form.

Answer 1

Following is outlining of a possible solutions. Pick what you need.

Your partial view that view1 renders need to implement a pop-up dialog that displays another partial view.

So start by creating the pop-up partial. Popup's view controller would have something like this

// in FooController
public ActionResult PopupPartialViewName() 
{
    // prepare model for your pop-up
    return PartialView(PopUpModel);
}

In the popup view you will have the clickable(s) that must be updating the list on your original partial and closing the popup. You have many variants how to implement this, but the idea is the same - some HTML element will be assigned onclick javascript handler that will read clicked value and update original list.

<ul id="popupClickableList">
    @foreach(var item in Model)// PopUpModel
    {
    <li>
        <input id="id@(item.ID)" type="checkbox" value="@item.ID" />                
        <label for="id@(item.ID)">@item.DisplayValue</label>
    </li>       
    }
<ul>

Now, in your original partial you need the markup for the popup and a link or a button to open it, as well as the javascript that initializes and drives the popup. In this example I am using jQuery Dialog :

<!-- in your original partial -->
<div id="popupView"></div>
<a href="#" id="popUpShow">...</a>

<script type="text/javascript">
    $(function () {
        $('#popupView').dialog({
            autoOpen: false,
            resizable: false,
            modal: true
        });
         $('#popUpShow').click(function() {
            $('#popupView').load("@Url.Action("PopupPartialViewName")", function() { 

                // assign the click handler for popupView's clickable list
                $('#popupClickableList li').click(function() {
                    // get a hold of the clicked value
                    // update element in original list (it's here on this view)
                    $('#popupView').dialog('close');
                });

                $(this).dialog('open');
            });
            return false;
        });
     });
</script>

If I get more time on next lunch break I will put this in visual Studio to get it working completely :-)