ASP.NET MVC3 JQuery的对话框，局部视图 [英] ASP.NET MVC3 JQuery dialog with partial view

问题描述

我不能让我围绕如何做到这一点头正确：

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

我正在用于应用程序角色分配给用户一个简单的用户会员资格申请。所有我想要做的是弹出一个与所有可用的应用程序和一个动态复选框列表，将列出可用角色选择的应用程序DropdownBox的jQueryUI的对话框。

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!):

我设法得到对话框中正确显示感谢Richard Covo酒店的教程<一个href=\"http://ricardocovo.com/2012/04/06/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms-razor-version/\"相对=nofollow>此处。

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

在code为DropDownList的是这样的：

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

使用MVC的CheckBoxList扩展所产生的复选框列表：

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

弹出正确显示和角色被填充正确，但我的困惑来保存时出现。我假设有只应为这种情况的视图模型（我目前有2个），像这样：

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

}

当来自不同的控制器不同的形式产生pressing保存我进入指数控制器，但复选框列表的编辑方法对话框上的按钮，这样我怎么能成功的模式绑定？有没有一种简单的方法来做到这一点？

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?

让我知道如果你想看到更多的code，这样你可以指出进一步的我要去哪里错了！

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!

编辑： Save按钮目前挂接到索引器上编辑操作

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

编辑观点：

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

和jQuery用户界面对话框：

and the jQuery UI dialog:

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

因此​​下拉是目前EditUserRoles形式，而复选框列表是一个单独的形式 - 这是做正确的方式，应该我宁愿被提交复选框列表形式

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?

感谢

推荐答案

您POST控制器动作可以直接拿选定角色ID列表：

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

现在我想你可能还需要用户ID。所以定义视图模型：

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)
{
    ...
}

，当然不要忘了包括用户ID作为格式的一部分：

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

这篇关于ASP.NET MVC3 JQuery的对话框，局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！