9

Select2ドロップダウンボックスに入力するjquery/ajaxの記述についてサポートが必要です。

Select2が何であるかを知らない人のために、これは、TwitterBootstrapの外観と検索/先行入力機能をhtml選択リストのドロップダウンボックスに提供するjavascript拡張機能です。詳細については、こちらの例をご覧ください：Select2Githubページ

更新-解決しました！

だから私はついにこれをすべてまとめました、そして私の問題の解決策は私が結果とリスト選択をフォーマットするための機能を欠いていることでした。以下のコードは、先行入力が完全に機能するSelect2ドロップボックスを生成します。

コントローラーのJsonメソッド：

public JsonResult FetchItems(string query)
{
    DatabaseContext dbContext = new DatabaseContext(); //init dbContext
    List<Item> itemsList = dbContext.Items.ToList(); //fetch list of items from db table
    List<Item> resultsList = new List<Item>; //create empty results list
    foreach(var item in itemsList)
    {   
        //if any item contains the query string
        if (item.ItemName.IndexOf(query, StringComparison.OrdinalIgnoreCase) >= 0) 
        {
            resultsList.Add(item); //then add item to the results list
        }
    }
    resultsList.Sort(delegate(Item c1, Item c2) { return c1.ItemName.CompareTo(c2.ItemName); }); //sort the results list alphabetically by ItemName
    var serialisedJson = from result in resultsList //serialise the results list into json
        select new
        {
            name = result.ItemName, //each json object will have 
            id = result.ItemID      //these two variables [name, id]
        };
    return Json(serialisedJson , JsonRequestBehavior.AllowGet); //return the serialised results list
}

上記のJsonコントローラーメソッドは、シリアル化されたJsonオブジェクトのリストを返します。そのItemNameには、提供された文字列'query'が含まれます（この'query'は、Select2ドロップボックスの検索ボックスから取得されます）。

以下のコードは、 Select2ドロップボックスを強化するためのビュー（または必要に応じてレイアウト）のJavascriptです。

Javascript：

$("#hiddenHtmlInput").select2({
    initSelection: function (element, callback) {
        var elementText = "@ViewBag.currentItemName";
        callback({ "name": elementText });
    },
    placeholder: "Select an Item",
    allowClear: true,
    style: "display: inline-block",
    minimumInputLength: 2, //you can specify a min. query length to return results
    ajax:{
        cache: false,
        dataType: "json",
        type: "GET",
        url: "@Url.Action("JsonControllerMethod", "ControllerName")",
        data: function (searchTerm) {
            return { query: searchTerm };
        },
        results: function (data) { 
            return {results: data}; 
        }
    },
    formatResult: itemFormatResult,
    formatSelection: function(item){
        return item.name;
    }
    escapeMarkup: function (m) { return m; }
});

次に、ビューの本体に、 Select2がドロップボックスをレンダリングする非表示の入力要素が必要です。

HTML：

<input id="hiddenHtmlInput" type="hidden" class="bigdrop" style="width: 30%" value=""/>

または、MVC Razor html.hidden要素をビューモデルにアタッチして、選択したアイテムIDをサーバーにポストバックできるようにします。

Html（MVC Razor）：

@Html.HiddenFor(m => m.ItemModel.ItemId, new { id = "hiddenHtmlInput", @class = "bigdrop", style = "width: 30%", placeholder = "Select an Item" })
4

3 に答える 3

3

解決しました！ついに。

完全な jquery を以下に示します。必要なのは、コントローラーから返された結果をフォーマットする 2 つの関数です。これは、結果を表示できるようにするために、ドロップボックスが結果をラップする HTML マークアップを必要とするためです。

また、contractID がないと結果がドロップダウンに表示されるため、コントローラーの属性としても必要でしたが、選択できませんでした。

$("#contractName").select2({
    placeholder: "Type to find a Contract",
    allowClear: true,
    minimumInputLength: 2,
    ajax: {
        cache: false,
        dataType: "json",
        type: "GET",
        url: "@Url.Action("FetchContracts", "Leads")",
        data: function(searchTerm){
            return { query: searchTerm };
        },
        results: function(data){
            return { results: data };
        }
    },
    formatResult: contractFormatResult,
    formatSelection: contractFormatSelection,
    escapeMarkup: function (m) { return m; }
});


function contractFormatResult(contract) {
    var markup = "<table class='contract-result'><tr>";
    if (contract.name !== undefined) {
        markup += "<div class='contract-name'>" + contract.name + "</div>";
    }
    markup += "</td></tr></table>"
    return markup;
}

function contractFormatSelection(contract) {
    return contract.name;
}
于 2013-02-14T14:00:48.617 に答える
1

Select 2 は、jquery が添付された標準の select のように見えるため、これは機能するはずです。

モデル：

  public class vmDropDown
  {
    public IEnumerable<SelectListItem> DeviceList { get; set; }
    [Required(ErrorMessage = "Please select at least one item")]
    public IEnumerable<int> SelectedItems { get; set; }
  }

コントローラ：

 [HttpGet]
    public ActionResult Assign(int id)
    {
      return View(CreateUnassignedModel(id));
    }

[HttpPost]
public ActionResult Assign(vmDeviceAssign model)
{
  if (ModelState.IsValid)
  {
    _deviceLogic.Assign(model.GroupId, model.SelectedItems);
    return View("ConfirmDevice");
  }
  else // Validation error, so redisplay data entry form
  {
    return View(CreateUnassignedModel(model.GroupId));
  }
}

private vmDeviceAssign CreateUnassignedModel(int id)
{
  return new vmDeviceAssign
  {
    DeviceList = _deviceLogic.GetUnassigned(),
    SelectedItems = null
  };
}

意見：

<div class="editor-field">
    @Html.ListBoxFor(model => model.SelectedItems, new SelectList(Model.DeviceList, "Value", "Text"))
    @Html.ValidationMessageFor(model => model.SelectedItems)
</div>

仕事中なので説明はできませんが、メッセージを残す場合は、今夜取りに来てください

于 2013-02-13T14:55:18.363 に答える
1

問題は、そのコントローラー メソッドから を返していることですList<Contract>が、MVC ランタイムはそれをブラウザーに渡す方法を認識していません。代わりに a を返す必要がありますJsonResult:

public JsonResult FetchContracts() 
{
    TelemarketingContext teleContext = new TelemarketingContext();
    var contracts = teleContext.Contracts.ToList();
    var json = from contract in contracts 
        select new {
            name = contract.ContractName,
            id = contract.ContactID,
        };
    return Json(json, JsonRequestBehavior.AllowGet);
}

これでdata、AJAX : Success 関数のパラメーターは、コントローラーからの JSON になります。dataこのプラグインの仕組みはよくわかりませんが、必要に応じて json を手動でループできるはずです。

于 2013-02-13T13:35:28.640 に答える