我正在尝试使用自动完成MVC和Jquery,但我找不到我的问题。
我的Java脚本没有启动,我的控制台没有显示任何错误。事实上它根本没有显示任何东西。 我想用相关数据填充我的属性(我从学生编号开始) 当然我的c#功能也没有启动。
谢谢你的帮助
我的控制器功能是:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult AutoCompleteStudentName(string term)
{
//Note : you can bind same list from database
var result = new List<KeyValuePair<string, string>>();
UseClass US = new UseClass();
List<Student> Lstudents = US.SearchStudentsName(term);
IList<SelectListItem> List = new List<SelectListItem>();
foreach (Student s in Lstudents)
{
List.Add(new SelectListItem { Text = s.StudentName, Value = s.StudentNum.ToString() });
}
foreach (var item in List)
{
result.Add(new KeyValuePair<string, string>(item.Value.ToString(), item.Text));
}
return Json(result, JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult GetStudentDetail(int id)
{
Student s;
UseClass US = new UseClass();
s = US.GetStudentDataStudentID(id.ToString());
return Json(s);
}
我的HTML代码是:
<div class="form-group" id="aa">
@Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
insert here
@Html.TextBox("PassId")
@Html.TextBox("StudentID")
</div>
</div>
我的javascript是:
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#PassId").autocomplete({
source: function (request, response) {
var customer = new Array();
$.ajax({
async: false,
cache: false,
type: "POST",
url: "@(Url.Action("AutoCompleteStudentName", "StudentSubscriptions"))",
data: { "term": request.term },
success: function (data) {
for (var i = 0; i < data.length ; i++) {
customer[i] = { label: data[i].Value, Id: data[i].Key };
}
}
});
response(customer);
},minLength: 1,
select: function (event, ui) {
//fill selected customer details on form
$.ajax({
cache: false,
async: false,
type: "POST",
url: "@(Url.Action("GetStudentDetail", " StudentSubscriptions"))",
data: { "id": ui.item.Id },
success: function (data) {
$("#StudentID").html(data.StudentNum)
action = data.Action;
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve states.');
}
});
}
});})
</script>
}