使用 asp net 将数据插入 select2
inserting data into select2 with asp net
我需要在 asp 网络项目中使用 ajax 获取数据库中的 ID 和名称以及 link select2 中的这些数据,有人可以帮助我吗?
I need to get the id and name in the database and link this data in a select2
select2model 必须有id
和text
两个属性,否则无法识别
这是一个您可以关注的工作演示:
型号:
public class TestModel
{
public int Id { get; set; }
public string Name { get; set; }
}
查看(Index.cshtml):
<select id="SelectItem" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;"></select>
@section Scripts
{
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$(function () {
$("#SelectItem").select2({
ajax: {
url: '/Home/GetSelect2',
data: function (params) {
return {
q: params.term// search term
};
},
processResults: function (data) {
console.log(data);
return {
results: data.items
}
},
}
});
});
</script>
}
控制器:
public class HomeController : Controller
{
[HttpGet]
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult GetSelect2(string q)
{
//for easy testing, i just hard coded
//you can get data from database
List<TestModelInAspDotnet> model = new List<TestModelInAspDotnet>();
model.Add(new TestModelInAspDotnet() { Id = 1, Name = "aa" });
model.Add(new TestModelInAspDotnet() { Id = 2, Name = "ac" });
model.Add(new TestModelInAspDotnet() { Id = 3, Name = "ab" });
model.Add(new TestModelInAspDotnet() { Id = 4, Name = "bc" });
model.Add(new TestModelInAspDotnet() { Id = 5, Name = "bd" });
model.Add(new TestModelInAspDotnet() { Id = 6, Name = "dc" });
if (!(string.IsNullOrEmpty(q) || string.IsNullOrWhiteSpace(q)))
{
model = model.Where(x => x.Name.ToLower().StartsWith(q.ToLower())).ToList();
}
//select2 only recognize Id and Text property
var list = new List<object>();
foreach (var item in model)
{
list.Add(new { Id = item.Id, Text = item.Name });
}
return Json(new { items = list });
}
}
我需要在 asp 网络项目中使用 ajax 获取数据库中的 ID 和名称以及 link select2 中的这些数据,有人可以帮助我吗?
I need to get the id and name in the database and link this data in a select2
select2model 必须有id
和text
两个属性,否则无法识别
这是一个您可以关注的工作演示:
型号:
public class TestModel
{
public int Id { get; set; }
public string Name { get; set; }
}
查看(Index.cshtml):
<select id="SelectItem" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;"></select>
@section Scripts
{
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$(function () {
$("#SelectItem").select2({
ajax: {
url: '/Home/GetSelect2',
data: function (params) {
return {
q: params.term// search term
};
},
processResults: function (data) {
console.log(data);
return {
results: data.items
}
},
}
});
});
</script>
}
控制器:
public class HomeController : Controller
{
[HttpGet]
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult GetSelect2(string q)
{
//for easy testing, i just hard coded
//you can get data from database
List<TestModelInAspDotnet> model = new List<TestModelInAspDotnet>();
model.Add(new TestModelInAspDotnet() { Id = 1, Name = "aa" });
model.Add(new TestModelInAspDotnet() { Id = 2, Name = "ac" });
model.Add(new TestModelInAspDotnet() { Id = 3, Name = "ab" });
model.Add(new TestModelInAspDotnet() { Id = 4, Name = "bc" });
model.Add(new TestModelInAspDotnet() { Id = 5, Name = "bd" });
model.Add(new TestModelInAspDotnet() { Id = 6, Name = "dc" });
if (!(string.IsNullOrEmpty(q) || string.IsNullOrWhiteSpace(q)))
{
model = model.Where(x => x.Name.ToLower().StartsWith(q.ToLower())).ToList();
}
//select2 only recognize Id and Text property
var list = new List<object>();
foreach (var item in model)
{
list.Add(new { Id = item.Id, Text = item.Name });
}
return Json(new { items = list });
}
}