umki umki - 1 month ago 7
Ajax Question

Filling Select2 Dropdown using ASP.net MVC4

I am trying to fill a dropdown which use Select2 Jquery add-on using asp.net mvc4. I have already search the stackoverflow and found the related topic as below ;

Fill Select2 dropdown box from database in MVC 4

But in my project i cant get this work.

In my View

<div class="control-group">
<label class="control-label">Proje Adı</label>
<div class="controls">
<select id="PROJECTID">

</select>
</div>
</div>


In my controlle
r i wrote my action which returns the JSON and i have tested this action with manuel entries and it is OK. I can see the JSON result.

public JsonResult FetchItems(string query)
{
List<CRM_PROJECTS> projectList = db.CRM_PROJECTS.Where(p => p.IS_VALID == 1 && p.NAME != null).ToList(); //fetch list of items from db table
List<CRM_PROJECTS> resultProjectList = new List<CRM_PROJECTS>(); //create empty results list
foreach (var item in projectList)
{
//if any item contains the query string
if (item.NAME.IndexOf(query, StringComparison.OrdinalIgnoreCase) >= 0)
{
resultProjectList.Add(item); //then add item to the results list
}
}
//resultProjectList.Sort(delegate(Item c1, Item c2) { return c1.ItemName.CompareTo(c2.ItemName); }); //sort the results list alphabetically by ItemName
var serialisedJsonProjects = from result in resultProjectList //serialise the results list into json
select new
{
name = result.NAME, //each json object will have
id = result.ID //these two variables [name, id]
};
return Json(serialisedJsonProjects, JsonRequestBehavior.AllowGet); //return the serialised results list
}


In the select2.js file i have implemented the Jquery part of code.

$(document).ready(function () {
$("#PROJECTID").select2({

placeholder: "Type to find a Contract",
allowClear: true,
minimumInputLength: 2,
ajax:{
cache: false,
dataType: "json",
type: "GET",
url: "/AddNewOpp/FetchItems",
data: function (searchTerm) {
return { query: searchTerm };
},
results: function (data) {
return {results: data};
}
},
escapeMarkup: function (m) { return m; }
});

});


I could not populate my drop-down and it seems i am unable to call my url:"/AddNewOpp/FetchItems" in the ajax part of the jquery .

Answer

SOLVED

VIEW: You need to put an input element wih type="hidden" attribute.

@Html.HiddenFor(m => m.CUSTOMERID, new { id = "CUSTOMERID", @class = " input-block-level  bigdrop", placeholder = "Search for customer" })

CONTROLLER: Aim is getting data which you want to fill the dropdown with, and return in json.

public JsonResult FetchItemsCustomer(string query)
        {
            List<CRM_CUSTOMERS> projectList = db.CRM_CUSTOMERS.Where(p => p.IS_VALID == 1 && p.NAME != null).ToList(); //fetch list of items from db table
            List<CRM_CUSTOMERS> resultProjectList = new List<CRM_CUSTOMERS>(); //create empty results list
            foreach (var item in projectList)
            {
                //if any item contains the query string
                if (item.NAME.IndexOf(query, StringComparison.OrdinalIgnoreCase) >= 0)
                {
                    resultProjectList.Add(item); //then add item to the results list
                }
            }
            //resultProjectList.Sort(delegate(Item c1, Item c2) { return c1.ItemName.CompareTo(c2.ItemName); }); //sort the results list alphabetically by ItemName
            var serialisedJsonProjects = from result in resultProjectList //serialise the results list into json
                                         select new
                                         {
                                             name = result.NAME, //each json object will have 
                                             id = result.ID      //these two variables [name, id]
                                         };
            return Json(serialisedJsonProjects, JsonRequestBehavior.AllowGet); //return the serialised results list
        }

JQUERY AJAX PART:

$("#CUSTOMERID").select2({
        minimumInputLength: 4,
        ajax: {
            url: "/AddNewOpp/FetchItemsCustomer/",
            dataType: 'json',
            quietMillis: 100,
            data: function (searchTerm) {
                return { query: searchTerm };
            },
            results: function (data) {
                return { results: data };
            }
        },
        formatNoMatches: function () {
            $("#addAsCustomer").fadeIn(1000);
            return "Aradığınız müşteri sistemde kayıtlı değil,\"Yeni Ekle\" butonuna tiklayiniz";
        },
        formatInputTooShort: function (input, min) {
            $("#addAsCustomer").fadeOut(500);
            var n = min - input.length; return "" + n + " karakter daha giriniz" + (n == 1 ? "" : "");
        },

        formatResult: contractFormatResult,
        formatSelection: contractFormatSelection,
        escapeMarkup: function (m) { return m; }
    });