Question

我已经以以下格式实现了JQuery Autocomplete： AddApplication.cshtml

@page
@model AddApplicationModel
@{

}




<div>
    <form>
        <div>
            <input type="text" name="appName" placeholder="Enter Application Name">
            <select asp-items="Model.ministryItems">
                <option>Select Ministry</option>
            </select>
        </div>

        <div>
            <input type="text" name="url" id="url" placeholder="Search for a URL" autocomplete="on">
        </div>

    </form>
</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


    <script type="text/javascript">
        $(function () {
            $("#url").autocomplete({
                source: function (request, response) {
                    console.log("in funct");
                    $.ajax({
                            url: "@Url.Action("GetURL","AddApplication")",
                            data: ({ term: request.term}),
                            dataType: "json",
                            type: "GET",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                            Console.log("success");
                            response($.map(data, function (item) {
                                Console.log("response"+item)
                                return item;
                            }))
                            }
                    });
                },
                select: function (e, i) {
                    $("#url").val(i.item.val);
                },
                minLength: 0
            }).focus(function () {
                $(this).autocomplete("search");
            });
        });
    </script>

当我在文本框中输入内容时，什么也没有发生。经过一些调试后，我知道一个事实，即函数$("url").autocomplete被调用，但是success: function()data{}没有被击中

后端剃须刀代码： AddApplication.cshtml

        [System.Web.Mvc.HttpGet]
        public System.Web.Mvc.JsonResult GetURL(string term)
        {
            Console.WriteLine("===============IN GETURL====================");
            System.Web.Mvc.JsonResult result = new System.Web.Mvc.JsonResult();


             var list = (from c in db.Url
                        where c.UrlName.Contains(term)
                        select c.UrlName).ToList();

            Console.WriteLine(list.Count());

            result.Data = list;
            result.JsonRequestBehavior =  JsonRequestBehavior.AllowGet;
            Console.WriteLine("---------"+result.Data.ToString());
            return result;
        }

GetURL我已经通过从OnGet调用它来测试此功能，只是为了查看它是否确实有效，并且它是否已成功查询数据，不能100％确定其是否正确返回JSONResult。。但是，自动完成功能不会调用它。

我不确定这是否是路径问题，我不相信这是我事先解决的问题

我也尝试过使用以下JQuery代码段，并且产生相同的结果

<script type="text/javascript">
    $(function () {
    console.log("function");
    $("#url").autocomplete({
        source: "@Url.Action("GetURL","AddApplication")",
        minLength: 1,
        select: function (event, ui) {
        if (ui.item) {
        console.log("-----"+ui.item);
        $("#url").val(ui.item.value);
        $("form").submit();
            }
        }
    });
});
</script>

用于文本框搜索的“响应”选项卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> - LookupTool</title>


        <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="/css/site.css" />



        <script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>



</head>
<body>
    <!-- <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-page="/Index" class="navbar-brand">LookupTool</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-page="/Index">Home</a></li>
                    <li><a asp-page="/About">About</a></li>
                    <li><a asp-page="/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav> -->





    <div class="container-fluid body-content">
       <div style="margin-left: 5%; margin-right: 5%">




<div>
    <form>
        <div>
            <input type="text" name="appName" placeholder="Enter Application Name">
            <select>
                <option>Select Ministry</option>
                <options> - cant display this information
            </select>
        </div>

        <div>
            <input type="text" name="url" id="url" placeholder="Search for a URL" autocomplete="on">
        </div>

    </form>
</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


    <script type="text/javascript">
        $(function () {
            $("#url").autocomplete({
                source: function (request, response) {
                    console.log("in funct");
                    $.ajax({
                            url: "/AddApplication?action=GetURL&amp;controller=AddApplication",
                            data: ({ term: request.term}),
                            dataType: "json",
                            type: "GET",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                            Console.log("success");
                            response($.map(data, function (item) {
                                Console.log("response"+item)
                                return item;
                            }))
                            }
                    });
                },
                select: function (e, i) {
                    $("#url").val(i.item.val);
                },
                minLength: 0
            }).focus(function () {
                $(this).autocomplete("search");
            });
        });
    </script>

            <hr />
            <footer>
                footer
            </footer>
        </div>
    </div>


</body>
</html>

Answer 1

修改ajax请求以正确包含查询字符串参数：

$.ajax({
        url: "AddApplication/GetURL",
        data: ({ term: request.term}),
        dataType: "json",
        type: "GET",
        success: function (data) {
           response($.map(data, function (item) {
               return item;
               Console.log("response"+item)
           }))
         }
});

Answer 2

经过更多搜索，我终于能够使它工作。添加防伪令牌可能是潜在的问题，因为我之前没有添加过。注意URL，根据多种来源，这是在剃刀中引用URL的正确方法。

尽管由于某种原因其工作仅会调用已完成的功能，但它永远不会成功。目前，这不会引起问题。

AddApplication.cshtml

<script>
    $(document).ready(function(){
        $("#UrlQueBtn").click(function(e)
        {
            e.preventDefault();
            var url = $('#urlSelect').val();
            console.log(url);
            $.ajax({
                    url: "AddApplication?handler=AddUrlToQue",
                    type: "POST",
                    dataType: "json",
                    data: { urlSelect: url },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    success: function () {
                        alert("success");
                    },
                    complete: function () {
                        alert("complete")
                    },
                    failure: function () {
                        alert("failure");
                    }
                })
        });
    });
</script>

需要将防伪令牌添加到启动类 startup.cs

在ConfigureServices下 services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

剃刀页面jQuery Autocomplete什么都不做

2 个答案: