Remplir Select2 zone de liste déroulante à partir de la base de données en MVC 4

J'ai besoin d'aide pour rédiger le jquery/ajax pour remplir un Select2 zone de liste déroulante.

Pour ceux qui ne savent pas ce Select2 est, c'est un javascript extension de fournir Twitter Bootstrap regards et de la recherche /type-ahead de la fonctionnalité html, sélectionnez la liste déroulante de la boîte. Pour plus d'informations, regardez les exemples ici: Select2 page Github

Mise à JOUR - Résolu!

Donc j'ai finalement mis tous ensemble, et la solution à mon problème était que j'étais en manque de fonctions pour formater les résultats et la liste de sélection. Le code ci-dessous génère un fonctionnement Select2 dropbox de la frappe parfaitement.

Json Méthode du Contrôleur:

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
}

Le Json contrôleur de la méthode ci-dessus renvoie une liste de sérialisés objets Json, dont le nom de l'élément contient la chaîne "query" fourni (cette "requête" de la boîte de recherche dans le Select2 boîte de dépôt).

Le code ci-dessous est le code Javascript dans la vue(ou de mise en page si vous préférez) pour l'alimentation de l' Select2 de la boîte de dépôt.

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; }
});

Ensuite dans le corps de la vue que vous avez besoin d'un caché élément d'Entrée, qui Select2 rendu de la dropbox.

Html:

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

Ou joindre un MVC, Razor html.élément masqué pour votre modèle de vue pour vous permettre de publier choisi l'Id de l'élément vers le serveur.

Html (MVC, Razor):

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

J'ai juste fait ça hier, bien que normale à la liste déroulante. Vous utilisez SelectListItem. Je peux donner le code mais qu'est-ce que "Select2"?
Select2 est un plugin supplémentaire qui donne des zones de liste déroulante avec v. nice fonctionnalités dans un Bootstrap de style. ivaynberg.github.com/select2

OriginalL'auteur Whiplash450 | 2013-02-13

Résolu! Enfin.

La pleine jquery est ci-dessous, ce qui était nécessaire ont deux fonctions pour formater les résultats retournés par le contrôleur. C'est parce que la dropbox besoins de certaines balises html pour être enroulé autour de la résultats, afin d'être en mesure de les afficher.

Aussi contractID a besoin d'un attribut dans le contrôleur que sans elle, les résultats ont été montrés dans la liste déroulante, mais ils ne pouvaient pas être sélectionné.

$("#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;
}

Content que tu ai eu de travail à l'aide de formatResult. Tout comme un FYI (et au cas où quelqu'un d'autre s'exécute dans ce problème) la partie de la question est que, par défaut, select2 attend éléments clés nommé text et id dans la réponse json. Vous étiez de retour name et id c'est pourquoi select2 n'était pas rendu les résultats automatiquement. Quelque chose comme cela dans votre contrôleur aurait probablement travaillé: select new { text = contract.ContractName, id = contract.ContractID };

OriginalL'auteur Whiplash450

1

Le problème, c'est que vous êtes de retour d'une List<Contract> à partir de cette méthode de contrôleur, mais le runtime MVC ne sais pas comment la main que pour le navigateur. Vous avez besoin de retourner un JsonResult à la place:
```
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);
}
```
Maintenant, le data param de l'AJAX : le Succès de la fonction sera le JSON à partir du contrôleur. Je ne suis pas familier avec la façon dont ce plugin fonctionne, mais vous devez être en mesure de faire une boucle par le json dans data manuellement si vous en avez besoin.

Ok merci. Cela me donne quelque chose à faire. Je vais l'installer et voir ce que je reçois.

OriginalL'auteur Graham

Sélectionnez 2 semble être un standard sélectionner avec jquery attacher, cela devrait fonctionner:

Modèle:

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

Contrôleur:

 [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
  };
}

Vue:

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

Cant donner une explication en suis au travail, mais si vous laissez un message malade ramasser ce soir

Je vois comment cela pourrait fonctionner comme un travail, mais j'ai besoin d'utiliser la fonctionnalité Select2 (par exemple, la recherche dans la dropbox)
Oui désolé, j'ai été de répondre à un plus question générique sur le remplissage des ddl. Je pense que Grahams réponse vaut la peine d'explorer. Bonne chance!

OriginalL'auteur DavidB

Vous devez vous connecter pour publier un commentaire.