自动完成MVC无法正常工作

时间:2017-10-05 08:47:19

标签: javascript jquery asp.net-mvc autocomplete

我正在尝试使用自动完成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>
}

0 个答案:

没有答案