如何在带有 ADO.NET 的 ASP.NET Core MVC 中使用 jQuery Ajax 自动完成

Posted 2023-03-31

【中文标题】如何在带有 ADO.NET 的 ASP.NET Core MVC 中使用 jQuery Ajax 自动完成

【英文标题】：How to use jQuery Ajax autocomplete in ASP.NET Core MVC with ADO.NET

【发布时间】：2021-12-02 06:15:31

【问题描述】：

为自动完成添加了脚本：

$("txtSearch").autocomplete(
                    source: function (request, response) 
                        $.ajax(
                            url: '/ProductSearchDisplay/GetProductDetailsById/',
                            data: "'prefix': '" + request.term + "'",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) 
                                debugger
                                response($.map(data, function (item) 
                                    return item;
                                ))
                            ,
                            error: function (response) 
                                alert(response.responseText);
                            ,
                            failure: function (response) 
                                alert(response.responseText);
                            
                        );
                    ,
                    select: function (e, i) 
                        $("#txtSearch").val(i.item.val);
                    ,
                    minLength: 1
                );
            )

控制器中发送列表数据的方法：

public JsonResult GetProductDetailsById(String prefix)

    List<ProductMaster> ObjProduct = new List<ProductMaster>();
    ObjProduct = objProductData.SearchProductData(prefix).ToList();
    ViewBag.data = ObjProduct;            
    return Json(ObjProduct);

该代码也不适用于自动完成搜索添加的脚本。

【问题讨论】：

“不工作”非常广泛。您是否进行了调试，并查看了错误是否在您的 C# 或 js 代码中？

欢迎来到 Stack Overflow。返回的 JSON 必须是数组列表或对象数组，其中至少有 label, value 对。请提供返回数据的示例或最小的、可重现的示例：***.com/help/minimal-reproducible-example

检查后端控制器的响应数据，我的意思是success: function (data)中的数据

【参考方案1】：

恐怕问题缺少“#”

这是我的测试代码

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<input id="txtSearch" />
<script>
    $("#txtSearch").autocomplete(
    //source: ["c++", "java", "php", "coldfusion", "javascript"],
    source: function (request, response) 
        var param =  "prefix": request.term;
        $.ajax(
            url: '/test/getData/',
            //data: "'prefix': '" + request.term + "'",
            data: JSON.stringify(param),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) 
                console.log(data);
                response($.map(data, function (item) 
                    return item;
                ))
            ,
            error: function (response) 
                alert(response.responseText);
            ,
            failure: function (response) 
                alert(response.responseText);
            
        );
    ,
    select: function (e, i) 
        $("#txtSearch").val(i.item.val);
    ,
    minLength: 1
);
</script>

这是我的控制器，我没有完成过滤器：

[HttpPost]
public JsonResult getData([FromBody] TestModel model)

    List<string> res = new List<string>
    
        "c++", "java", "php", "coldfusion", "javascript"
    ;
    return Json(res);

【讨论】：

即使在搜索时它不显示列表但显示空白列表

首先尝试使用//source: ["c++", "java", "php", "coldfusion", "javascript"], 以确保自动完成方法运行良好。

那么你可以检查你的后端api是否返回了正确的数据，我猜blank list来自后端，也许'前缀'没有传递到后端

@sonaliborekarr 使用var param = "prefix": request.term; 作为数据并在ajax 请求中将数据设置为data: JSON.stringify(param),。我刚刚修改了我的答案，请点击您问题后面的edit 按钮更新您的问题，但不要将您的更新作为答案。