1

状況

ユーザーのリストがあり、そのリストには、剣道のマルチセレクトで編集可能にしたいロールのリストがあります。

問題

私が持っているコードでは、非常に奇妙であることがわかりました.上部にはたくさんのテキストボックスが表示され(私の意見では)、複数選択ボックスがあるはずの場所には上下の矢印しか表示されません.

これまでの私のコード:

foreach (var u in Model.Users)
{
<div class="form-group">
    <div class="col-sm-2">
        @Html.Label(u.Name)
    </div>
    <div>
        @Html.Kendo().MultiSelectFor(m => u.Roles).BindTo(Model.UserRoles);
    </div>
</div>
}

ビューモデル

public class CompanyViewModel
{
    public IEnumerable<UserDto> Users { get; set; }
    public IEnumerable<UserRoleDto> UserRoles { get; set; }
}

ユーザーDto

public class UserDto
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string MiddleName { get; set; }
    public string LastName { get; set; }
    public string Name
    {
        get
        {
            return string.Format("{0} {1} {2}", FirstName, MiddleName, LastName);
        }
    }

    public IEnumerable<SelectListItem> Roles { get; set; }
}

これは、このようにレンダリングするとページがどのように見えるかのスニペットです

div class="k-widget k-multiselect k-header" unselectable="on" title style>

div class="k-multiselect-wrap k-floatrap" unselectable="on">...</div>

div class="k-widget k-multiselect k-header" unselectable="on" title style>

div class="k-multiselect-wrap k-floatrap" unselectable="on">...</div>

div class="k-widget k-multiselect k-header" unselectable="on" title style>

div class="k-multiselect-wrap k-floatrap" unselectable="on">...</div>

div class="k-widget k-multiselect k-header" unselectable="on" title style>

div class="k-multiselect-wrap k-floatrap" unselectable="on">...</div>

そして、これが何度か繰り返されます。

モデルからの何かではなく、ユーザーに基づいて multiselectfor を作成する方法に問題があると思われますが、剣道の知識が低すぎて、それをどのように行うべきかを理解できません。

どんな助けでも大歓迎です

4

1 に答える 1

2

コードに複数の問題があります。

まず、KendoMultiSelectFor()は html<select multiple>タグを作成します (ただし、それを使用して非表示にしdisplay: none;、独自の html を追加しますが、<select>これはバインディングとコントローラーへのポストバックに使用されます)。A<select multiple>は、複雑なオブジェクトではなく、単純な値の型の配列にのみバインドおよびポストバックできるため、 typeof であるプロパティにバインドすることはできませんIEnumerable<IEnumerable<SelectListItem>。プロパティは、選択したロール ID をポストバックしたいRolesと想定している必要があります。IEnumerable<int> Roles { get; set; }

次に、ヘルパーのメソッドに必要な必要がありますUserRoles。IEnumerable<SelectListItem>SelectList.BindTo()

foreach最後に、ループを使用してコレクション プロパティにバインドすることはできません。モデルと関係のない重複した属性が生成されるnameため、バインドされません (また、id無効な html である重複した属性も生成されます)。コレクションのタイプにカスタムを使用する必要がありEditorTemplateます（通常、forループが適していますが、ループでヘルパーを使用する際の問題により、あなたのケースでは機能しません）

あなたのビューモデルは

public class CompanyViewModel
{
  public IEnumerable<UserViewModel> Users { get; set; }
  public IEnumerable<SelectListItem> RoleList { get; set; }
}
public class UserViewModel
{
  public int Id { get; set; }
  public string FirstName { get; set; }
  ....
  [Display(Name = "Roles")]
  public IEnumerable<int> SelectedRoles { get; set; }
}

次に、部分ビューを作成します/Views/Shared/EditorTemplates/UserViewModel.cshtml

@model yourAssembly.UserViewModel
@Html.HiddenFor(m => m.Id)
....
@Html.LabelFor(m => m.SelectedRoles)
@Html.Kendo().MultiSelectFor(m => u.SelectedRoles)
  .BindTo((IEnumerable<SelectListItem>)ViewData["roleList"])
....

そしてメインビューで

@model yourAssembly.CompanyViewModel
@using (Html.BeginForm())
{
  @Html.EditorFor(m => m.Users, new { roleList = Model.RoleList })
  <input type="submit" .../>
}

ここで起こっていることは、メソッドがテンプレート内の html に基づいてコレクション内のEditorFor()それぞれの html を生成するということです。UserViewModelさらに、追加SelectListとしてテンプレートに渡しますViewData

補足: 標準の MVC リストボックス ヘルパーを使用することから始めることをお勧めします。

@Html.ListBoxFor(m => u.SelectedRoles, (IEnumerable<SelectListItem>)ViewData["roleList"])

テンプレートですべてが機能していることを確認してから、@Html.Kendo().MultiSelectFor()

于 2015-08-15T08:35:45.893 に答える