2012-12-08 20 views
16

Chosenで複数選択したいです。 私は、のようなmvc 4で複数選択を使用するには?

public class Skill 
    { 
     public int Id { get; set; } 
     public string Name { get; set; }   
    } 

をスキルモデルを持っているこれは、私のアプリケーションで動作します:

<select data-placeholder="Choose a Country..." class="chzn-select" multiple > 
      <option value=""></option> 
      <option value="United States">United States</option> 
      <option value="Albania">Albania</option> 
      <option value="Algeria">Algeria</option> 
    </select> 

は、私は私のデータと国データを置き換えたいです。コントローラでは、私は書く:ビューで

 var list = MyService.LoadAllSkills(); 
     ViewBag.Skills = new MultiSelectList(list, "Id", "Name"); 

を:

@Html.ListBox("Name", ViewBag.Skills as MultiSelectList, 
       new { @class = "chzn-select" }) 

Html.ListBox()と@の表示結果Html.DropDownList @()<select>

のようではありません私はその結果を得ます:

enter image description here

しかし、私は私が選んサンプルを変更するにはどうすればよい

enter image description here

として結果を取得したいですか?

+0

そのためのjqueryプラグインを試してみてください。 –

+0

@Kundan Singh Chouhan、他のリンクを共有できますか?他のプラグインの場合 –

答えて

12

ハードコードされた例(あなたが働いていると言います)とListBoxヘルパーで生成した例の間には、data-placeholder属性がないことがわかります。したがって:

@Html.ListBox(
    "Countries", 
    ViewBag.Skills as MultiSelectList, 
    new { @class = "chzn-select", data_placeholder = "Choose a Country..." } 
) 

これは少なくとも、あなたが働いていると同じマークアップを生成する必要があります。それがうまくいかない場合は、プラグインを正しくセットアップしていないか、他のjavascriptエラーがある可能性があります。どのようにセットアップするべきかについて、プラグインのドキュメントを読んでください。

+0

データプレースホルダ属性が不明です。そしてdata_placeholderは動作しません。 –

+2

次に、ASP.NET MVCとはまったく関係のないプラグインの設定には、おそらく他の問題があります。サーバーサイドコードに関する限り、あなたの質問に表示されているものと厳密に同等のマークアップを生成するはずです。また、サーバサイドで 'data_placeholder'を使用するとき、ヘルパーは対応する属性を生成するときに' data-placeholder'に自動的に変換することに注意してください。 –

0

他の人が言ったように、あなたの問題の原因はサーバー側(剃刀)ではないようですが、実際にはクライアントサイド(おそらくJqueryプラグインの初期化)です。

おそらくhtml DOMと呼ばれるプラグインの初期化がまだ生成されていない場合は、プラグインの初期化スクリプトを本文の末尾または$(document).ready()に入れてください。コンソールがあるかどうか確認することを忘れないでくださいエラー

ハッピーコーディング

関連する問題