ASP.NET MVC3 JQuery的对话框,局部视图(ASP.NET MVC3 JQuery d

2019-09-18 08:27发布

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

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

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

我设法得到对话框中正确显示感谢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的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:

您的文章控制器动作可以直接采取选择的角色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 dialog with partial view