c# - 带有局部 View 的 ASP.NET MVC3 JQuery 对话框

Question

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

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

它需要看起来像这样(简单!):

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

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

弹出窗口显示正确，角色填充正确，但保存时出现了我的困惑。我假设这种情况应该只有一个 View 模型(我目前有 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 Controller 上输入了 Edit 方法，但是复选框列表是在来自不同 Controller 的不同表单上生成的，那么我如何才能成功地进行模型绑定(bind)？有没有简单的方法可以做到这一点？

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

编辑:保存按钮当前连接到索引 Controller 上的编辑操作。

编辑 View :

@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 Controller 操作可以直接获取所选角色 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。所以定义一个 View 模型:

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

然后让你的 Controller Action 采用这个 View 模型:

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