我正在尝试使用asp.net mvc4填充使用Select2 Jquery插件的下拉列表。我已经搜索了stackoverflow并找到了相关主题，如下所示;
Fill Select2 dropdown box from database in MVC 4
但是在我的项目中，我无法完成这项工作。
在我的视图中
<div class="control-group">
<label class="control-label">Proje Adı</label>
<div class="controls">
<select id="PROJECTID">
</select>
</div>
</div>
In my controlle我写了我的动作，它返回了JSON，我用manuel条目测试了这个动作，就可以了。我可以看到JSON结果。
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
}
在select2.js文件中，我实现了代码的Jquery部分。
$(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; }
});
});
我无法填充我的下拉列表，似乎我无法在jquery的ajax部分调用我的url：“/ AddNewOpp / FetchItems”。
答案 0 :(得分：1)
我在js文件中使用以下代码：
jquery的：
function getEoOrgPositions() {
$.ajax({
url: "/GetDataHandler/GetEoOrgPosition",
type: "POST",
data: { action: '1' },
dataType: "json",
success: function (data) {
$.each(data, function (key, value) {
$('#selectListOrg')
.append($("<option></option>")
.attr("value", key)
.text(value));
options.push({ value: key, text: value });
});
}
});
}
我的控制器名称是GetDataHandler：
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult GetEoOrgPosition(string action)
{
return Json(_db.GetEoOrgPosition(action), JsonRequestBehavior.AllowGet);
}
Context DB：
public Dictionary<string, string> GetEoOrgPosition(string action)
{
var data = new DataTable();
var postlist=new Dictionary<string, string>( );
using (var connection = new SqlConnection(_connectionString))
{
using (var command = new SqlCommand())
{
command.Connection = connection;
command.CommandText = string.Format(
"select PosSysCode , PosParentSysCode , EOSysNum , PosName + ' : ' + PrsName + ' ' + PrsLastName as FullPostName " +
"FROM EOOrgPosition " +
"inner join EOPersons on EOOrgPosition.CA_Persons = EOPersons.CA_Persons " +
"left outer join vwEOUsers usr on (usr.UsrPrsCode = EOPersons.PrsCode) and (usr.UsrState <> 'active') " +
"WHERE usr.EOSysNum IN (select WhichCode from EOPermAssign WHERE OwnerCode = {0} AND Status = 4) order by FullPostName",
action);
using (var da = new SqlDataAdapter(command))
{
try
{
da.Fill(data);
postlist =
data.Rows.Cast<DataRow>()
.ToDictionary(item => item["PosSysCode"].ToString(),
item => item["FullPostName"].ToString());
}
catch
{
}
}
}
}
return postlist;
}
答案 1 :(得分：0)
<强>解决
查看： 的 你需要输入一个输入元素wih type =“hidden”属性。
@Html.HiddenFor(m => m.CUSTOMERID, new { id = "CUSTOMERID", @class = " input-block-level bigdrop", placeholder = "Search for customer" })
的 CONTROLLER 的： 目标是获取要填充下拉列表的数据，并以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; }
});