自动填充下拉列表无效

时间:2017-03-13 09:28:40

标签: javascript jquery ajax asp.net-mvc

我经历了很多指南和stacloverflow帖子,但我仍然无法使其工作。我仍然是javascript的新手,我很难确定它是否是脚本。
我得到的主要问题是我无法正确地解决它,我的意思是,我找不到它在哪里以及为什么它不起作用,我只是知道它没有。

这是我的控制器:

Entities db = new Entities();

// GET: DynamicListe
public ActionResult Index()
{
    return View();
}
[HttpPost]
public JsonResult Index(string Prefix)
{
    //Searching records from list using LINQ query  
    var client = (from c in db.Clients
                  where c.Nom.Contains(Prefix)
                  select new { c.Nom });
    return Json(client, JsonRequestBehavior.AllowGet);
}

这是我的观点:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
       $("#client").autocomplete({
           source: function (request, response) {
               var customer = new Array();
               $.ajax({
                   url: "/DynamicListe/Index",
                   type: "POST",
                   dataType: "json",
                   data: { Prefix: request.term },
                   success: function (data) {
                       response($.map(data, function (item) {
                           return { label: item.Name, value: item.Name };
                       }))
                       for (var i = 0; i < data.length ; i++) {
                           customer[i] = { label: data[i].Value, Id: data[i].Key }
                       }
                   }
               });
               response(customer);
           },
           messages: {
               noResults: "", results: ""
           }
       });
   })
</script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <hr />
        <div class="client">
            <div class="col-md-12">
                @Html.TextBox("client")
            </div>
        </div>
    </div>
}  

我得到了正确数量的答案(当我按“w”时,我得到了13个根据我的数据库正确的结果),但它都是空的。
我已经尝试了几种方法来显示json数据,但我不知道如何使它工作..

编辑:纠正控制器和视图:

观点:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
       $("#client").autocomplete({
           source: function (request, response) {
               var customer = new Array();
               $.ajax({
                   url: "/DynamicListe/Index",
                   type: "POST",
                   dataType: "json",
                   data: { Prefix: request.term },
                   success: function (data) {
                       response($.map(data, function (item) {
                           return { label: item.Text, value: item.Value};
                       }))
                   }
               });
           },
           messages: {
               noResults: "", results: ""
           }
       });
   })
</script>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <hr />
        <div class="client">
            <div class="col-md-12">
                @Html.TextBox("client")
            </div>
        </div>
    </div>
}  

控制器:

[HttpPost]
public JsonResult Index(string Prefix)
{
    List<SelectListItem> list = new List<SelectListItem>();
    var client = (from c in db.Clients
                  where c.Nom.Contains(Prefix)
                  select c).ToArray();
    for (int i = 0; i < client.Length; i++)
    {
        list.Add(new SelectListItem
        {
            Text = client[i].Nom,
            Value = client[i].ClientID.ToString()
        });
    }
    return Json(list, JsonRequestBehavior.AllowGet);
}

2 个答案:

答案 0 :(得分:0)

您在收到回复之前就已经回复了。

在这里

        source: function (request, response) {
           var customer = new Array();
           $.ajax({
               url: "/DynamicListe/Index",
               type: "POST",
               dataType: "json",
               data: { Prefix: request.term },
               success: function (data) {
                   response($.map(data, function (item) {
                       return { label: item.Name, value: item.Name };
                   }))
                   for (var i = 0; i < data.length ; i++) {
                       customer[i] = { label: data[i].Value, Id: data[i].Key }
                   }
               }
           });
           response(customer);
       },

将行response(customer)移到ajac success回调中。

答案 1 :(得分:-2)

您的文本框没有ID。您必须为yout文本框添加:@ Id =“client”