2

MVC 4 でこのプラグインを使用して、編集可能な DropDownList を取得しています。

http://coffeescripter.com/code/editable-select/

私がしたことは次のとおりです
。1-スクリプトフォルダーの下にスクリプトを含めます。
2- css ファイルの最後の部分に css 部分を追加します。
3- 画像をコンテンツ フォルダに追加します。
5-関数を部分ビューに追加します。

関数：

$(function () {


        $('#lugar').editableselect(
          {
              bg_iframe: true,

              onselect: function (list_item) {
                  alert('list item text: ' + list_item.text());
                  // 'this' is a reference to the instance of editableselect
                  // object, so you have full access to everything there
                  alert('input value: ' + this.text.val());
              },
              case_sensitive: false, // if set to true, the user has to type in an exact
              // match for the item to get highlighted
              items_then_scroll: 10 // if there are more than 10 items, display a scrollbar
          }
        );
        var select = $('#lugar:first');
        var instances = select.editableselectinstances();
        instances[5].addoption('germany, value added programmatically');
    });

6- クラスをフィールドに追加します。

<div class="editor-field editableSelect">
    @Html.EditorFor(model => model.Lugar)
    @Html.ValidationMessageFor(model => model.Lugar)
</div>

問題
1 - リスト (画像なし) を取得していますが、値が間違っています。それらの値をどこから取得しているのかわかりません。
2- 必要な値をリストに渡す場所がわかりません。正しい方法で教えてもらえますか?

前もって感謝します。

4

1 に答える 1

0

ASP.NET MVC 4 と twitter ブートストラップで、coffeescript を使用して編集可能な選択を表示できました。

詳細は下記をご覧ください。

MVC プロジェクトで、必要な coffeescript および jquery (jquery-1.9.1.js を使用) ファイルへの参照を追加します。

  1. ビューで、次のコードを追加します。
<select id="user_name_ddl" class="editable-select"> 
</select>
  1. プロジェクトで「jquery.editable-select.css」を開き、正しい画像の場所を更新します。
input.editable-select {
  background: #FFF url(images/arrow-down.gif) right center no-repeat;
  padding-right: 13px;
  cursor:pointer;
}

注: 下向き矢印の画像を MVC プロジェクトの画像フォルダーにコピーしました。

  1. カスタム .js ファイル (ない場合は作成) に、次のコード行を追加します。 
$(function () {
  $('.editable-select').editableSelect({
    bg_iframe: true,
    onSelect: function (list_item) {
      $('#results').html('List item text: ' + list_item.text() + '<br/> \
        Input value: ' + this.text.val());
      }
    });
    var select = $('.editable-select:first');
    var instances = select.editableSelectInstances();    
    if (instances != null
        && instances != undefined
        && instances.length > 0) instances[0].addOption("Item 1");
});

それでおしまい。これで、編集可能な選択が表示されます。

于 2013-11-08T23:50:43.697 に答える