Question

我无法理解如何正确地做到这一点：

我正在开发一个简单的用户成员资格应用程序，用于为用户分配应用程序角色。我要做的就是弹出一个JQueryUI对话框，其中包含一个包含所有可用应用程序的DropdownBox和一个动态复选框列表，该列表将列出所选应用程序的可用角色。

它需要看起来像这样（简单！）：

enter image description here

由于Richard Covo的教程here，我已设法正确显示对话框。

下拉列表的代码如下所示：

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

这就是我动态加载所选应用程序可用角色的复选框列表的方式：

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

使用MVC checkboxlist扩展名生成复选框列表：

@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个），类似这样：

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

}

当按下对话框上的保存按钮时，我在索引控制器上输入编辑方法，但是复选框列表是在与不同控制器不同的表格上生成的，那么如何成功建模绑定？有一个简单的方法吗？

如果您想查看更多代码，请告诉我，以便您可以进一步指出我出错的地方！

编辑：保存按钮当前已连接到索引控制器上的编辑操作。

修改视图：

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

和jQuery UI对话框：

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

所以下拉列表当前在EditUserRoles表单上，而复选框列表是单独的表格 - 这是正确的方法，我应该提交复选框列表吗？

由于

Answer 1

您的POST控制器操作可以直接获取所选角色ID的列表：

[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。所以定义一个视图模型：

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

然后让您的控制器操作采用此视图模型：

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

当然不要忘记将用户ID包含在表单的一部分中：

@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对话框

1 个答案: