これを正しく行う方法について頭を悩ませることはできません。
私は、アプリケーションの役割をユーザーに割り当てるために使用される単純なユーザーメンバーシップアプリケーションに取り組んでいます。私がやろうとしているのは、使用可能なすべてのアプリケーションを含むDropdownBoxと、選択したアプリケーションで使用可能な役割を一覧表示する動的チェックボックスリストを含むJQueryUIダイアログをポップアップすることだけです。
このように見える必要があります(単純です!):
ここにあるRichardCovoのチュートリアルのおかげで、ダイアログボックスを正しく表示することができました。
ドロップダウンリストのコードは次のようになります。
<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))
}
ポップアップは正しく表示され、役割は正しく入力されていますが、保存するときに混乱が生じます。この状況では、ビューモデルは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" }))
およびjQueryUIダイアログ:
$('#AddRolesDialog').dialog({
buttons: {
"Save": function () {
$("#update-message").html('');
$("#EditUserRolesForm").submit();
}
}
});
したがって、ドロップダウンは現在EditUserRolesフォームにあり、チェックボックスリストは別のフォームにあります-これは正しい方法であり、チェックボックスリストフォームを送信する必要がありますか?
ありがとう