2

我不知道如何正确地做到这一点：

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

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

在此处输入图像描述

感谢 Richard Covo 的教程，我已经成功地让对话框正确显示。

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

<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 复选框列表扩展生成的：

@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

}

当按下对话框上的保存按钮时，我在 Index 控制器上输入了 Edit 方法，但复选框列表是在来自不同控制器的不同表单上生成的，那么我怎样才能成功地模型绑定？是否有捷径可寻？

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

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

编辑视图：

@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 表单上，而复选框列表位于单独的表单上 - 这是正确的方法吗？我是否应该提交复选框列表表单？

谢谢

4

1 回答 1

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)
    )
}
于 2012-06-21T13:04:45.203 回答