ASP.NET MVC3 JQuery dialog with partial view

I can't get my head around how to do this correctly:

I'm working on a simple user membership application that is used to assign application roles to users. All I'm trying to do is popup an JQueryUI dialog that has a DropdownBox with all of the available applications and a dynamic checkbox list that will list the available roles for the selected application.

It needs to look like this (simple!):

I have managed to get the dialog box to display correctly thanks to Richard Covo's tutorial here.

The code for the dropdownlist looks like this:

<label for='ApplicationsDropdownList'>Application:</label>

 @Html.DropDownListFor(
        x => x.SelectedApplicationId,
        new SelectList(Model.Applications, "Value", "Text"),
        "-- Select Application --",
             new
             {
                 id = "ApplicationsDropdownList",
                 data_url = Url.Action("ViewUserRolesForApplication", "UserRole")
             }
    ) 

</div>
<br />   <div id="RolesForApplication"></div>

And this is how I dynamically load the checkbox list of roles available for the selected application:

$('#ApplicationsDropdownList').change(function () {
            var url = $(this).data('url');
            var applicationId = $(this).val();
            $('#RolesForApplication').load(url, { applicationId: applicationId, selectedUserId: SelectedUserId })
        });
    });

The checkbox list is generated using the MVC checkboxlist extension:

@using (Html.BeginForm("SaveUsersRoles", "Index", FormMethod.Post))
{    


    @Html.CheckBoxList("Roles",                         // NAME of checkbox list (html 'name' property of each       
                   x => x.Roles,                        // data source (list of 'Cities' in our case)
                   x => x.RoleId,                       // field from data source to be used for checkbox VALUE
                   x => x.Code + " " + x.Description,   // field from data source to be used for checkbox TEXT
                   x => x.RolesForUser,
                   new HtmlListInfo(HtmlTag.table, 1))   
}

The popup is displaying correctly and the roles are populating correctly but my confusion comes arises when saving. I'm assuming there should only be one viewmodel for this situation (I currently have 2), something like this:

public class ApplicationsForUserViewModel
{
    public Guid SelectedUserId  {get;set;}
    public int SelectedApplicationId { get; set; }
    public IEnumerable<SelectListItem> Applications { get; set; }

    public Application Application { get; set; }
    public IList<Role> Roles { get; set; } //all available roles
    public IList<Role> RolesForUser { get; set; } //roles that the user has selected

}

When pressing the save button on the dialog I enter the Edit method on the Index controller but the checkbox list is generated on a different form from a different controller, so how can I successfully model bind? Is there an easy way to do this?

Let me know if you would like to see more of the code so that you can point out further where I'm going wrong!

EDIT: The save button is currently hooked up to the edit action on the index controller.

Edit view:

@using (Ajax.BeginForm("Edit", "Index", new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace, 
            HttpMethod = "POST",
            OnSuccess = "updateSuccess"
        }, new { @id = "EditUserRolesForm" }))

and the jQuery UI dialog:

 $('#AddRolesDialog').dialog({                     
                buttons: {
                    "Save": function () {                      
                      $("#update-message").html('');
                      $("#EditUserRolesForm").submit();
                    }
                }
            });

So the dropdown is currently on the EditUserRoles form, while the checkbox list is on a seperate form - is this the right way to do it and should I rather be submitting the checkbox list form?

Thanks

Your POST controller action could directly take the list of selected role ids:

[HttpPost]
public ActionResult SaveUsersRoles(int[] roles)
{
    // the roles parameter will contain the list of ids of roles 
    // that were selected in the check boxes so that you could take 
    // the respective actions here
    ...
}

Now I suppose that you might also need the user id. So define a view model:

public class SaveUsersRolesViewModel
{
    public Guid SelectedUserId { get; set; }
    public int[] Roles { get; set; }
}

And then have your controller action take this view model:

[HttpPost]
public ActionResult SaveUsersRoles(SaveUsersRolesViewModel model)
{
    ...
}

and of course don't forget to include the user id as part of the form:

@using (Html.BeginForm("SaveUsersRoles", "Index", FormMethod.Post))
{    
    @Html.HiddenFor(x => x.SelectedUserId)
    @Html.CheckBoxList(
        "Roles",
        x => x.Roles,
        x => x.RoleId,
        x => x.Code + " " + x.Description,
        x => x.RolesForUser,                       
        new HtmlListInfo(HtmlTag.table, 1)
    )
}