JQuery UI 自动完成未达到 ActionResult C# MVC

Posted 2023-02-22

【中文标题】JQuery UI 自动完成未达到 ActionResult C# MVC

【英文标题】：JQuery UI Autocomplete not reaching ActionResult C# MVC

【发布时间】：2017-07-05 05:55:10

【问题描述】：

我已经阅读了许多具有相同问题的帖子，但没有任何帮助，因此对重复的问题表示歉意:(我按照 JQueryUI 网站上的简单示例通过硬编码值和自动完成工作，但我需要它来自我的数据库。

查看：

@html.TextBoxFor(model => model.Position, new  @type = "text", @id = "jobtitle", @name = "jobtitle", @placeholder = "Job Title" )

JS：

编辑：我添加了成功警报，并且正在调用警报，但没有数据（即没有从数据库中提取数据）

<script>
$(function () 
            $("#jobtitle").autocomplete(
                source: function (request, response) 
                    $.ajax(
                        url: '@Url.Action("JobsAutoFill", "Account")',
                        data: 
                            Prefix: request.term
                        ,
                        success: function (data) 
                            alert(data);
                            response(data);
                        
                    );
                ,
                minLength: 1
            );

            //$("#jobtitle").autocomplete(
            //    source: "/Account/JobsAutoFill/"
            //);
        );
</script>

我已经添加了所需的链接：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

下面是我的 ActionResult(实际上是一个 JsonResult) & 拉出 Jobs 列表的函数：

    public List<Jobs> GetAllJobs()
    
        List<Jobs> JobsList = new List<Jobs>();

        using (RBotEntities EF = new RBotEntities())
        
            var JobsListQuery = (from ED in EF.EmploymentDetails
                                   select new
                                   
                                       ED.pkiEmploymentDetailID,
                                       ED.Position
                                   );

            foreach (var item in JobsListQuery)
            
                JobsList.Add(new Jobs
                
                    Id = item.pkiEmploymentDetailID,
                    Name = item.Position
                );
            
        

        return JobsList;
    

public JsonResult JobsAutoFill(string Prefix)
        
            //Note : you can bind same list from database  


            List<Jobs> ObjList = new List<Jobs>();

            ObjList = GetAllJobs();

            //Searching records from list using LINQ query  


            var JobNames = (from N in ObjList
                            where N.Name.StartsWith(Prefix)
                            select new  N.Name );
            return Json(JobNames, JsonRequestBehavior.AllowGet);
        

我是否遗漏了什么或做错了什么？

感谢任何帮助，谢谢！

【问题讨论】：

有谁能帮忙吗？

暂时忽略 jquery。这是一个 GET 方法。尝试从 Web 浏览器访问它。它有效吗？ Jobs 是可序列化的吗？你能在服务器上打断点吗？另外，“数据”对象里面是什么？也试试 data.Data

我现在可以访问控制器并看到作业已返回，但现在它没有显示（我只看到弹出的小框没有文本）。我试过 data.Data 它说未定义。

你的绑定错误。

最好从服务器返回正确的模型。客户端没有理由“映射”这些值

【参考方案1】：

我搞定了！

导致问题的第一件事是我需要在我的 ActionResult 上方添加 [AllowAnonymous]。

其次，我将 Ajax 调用更改为：

$(function () 
    $("#jobtitle").autocomplete(
        source: function (request, response) 
            $.ajax(
                url: '@Url.Action("JobsAutoFill", "Account")',
                data: 
                    Prefix: request.term
                ,
                success: function (data) 
                    response($.map(data, function (obj) 
                        return 
                            label: obj.Name,
                            value: obj.Name
                        ;
                    ));
                
            );
        ,
        minLength: 1
    );
);

下面是我的 ActionResult。我添加了一个可以区分大小写的更改：

[AllowAnonymous]
public JsonResult JobsAutoFill(string Prefix)

    //Note : you can bind same list from database  


    List<Jobs> ObjList = new List<Jobs>();

    ObjList = GetAllJobs();

    //Searching records from list using LINQ query  


    var JobNames = (from N in ObjList
                    where N.Name.ToLower().StartsWith(Prefix.ToLower())
                    select new  N.Name );
    return Json(JobNames, JsonRequestBehavior.AllowGet);

【参考方案2】：

Dont Change 允许匿名更改您的 ajax 调用，就像在查询字符串中传递您的参数一样，这将影响您的后端函数。希望对你有帮助

$(function () 
$("#jobtitle").autocomplete(
    source: function (request, response) 
        $.ajax(
            url: '@Url.Action("JobsAutoFill", "Account")?Prefix='+$("#jobtitle").val(),
            data: 
                Prefix: request.term
            ,
            success: function (data) 
                response($.map(data, function (obj) 
                    return 
                        label: obj.Name,
                        value: obj.Name
                    ;
                ));
            
        );
    ,
    minLength: 1
);

);

【参考方案3】：

如果它不必具有公共访问权限，则不应将其设为 AllowAnonymous。 其次，更改您的查询以获得更好的性能：

var JobNames = (from N in ObjList
                where N.Name.ToLower().StartsWith(Prefix.ToLower())
                select N.Name);

显然你需要返回一个字符串数组。但是您的代码返回了一个具有单个字符串属性的对象数组。

并根据更新更改您的脚本代码：

success: function (data) 
                    response($.map(data, function (obj) 
                        return 
                            label: obj,
                            value: obj
                        ;
                    ));