Razor 页面 jQuery 自动完成什么都不做

Question

我已经按照以下格式实现了 JQuery 自动完成功能： 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{}没有被击中

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，根据多个来源，这是在 razor 中引用 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

在配置服务下 services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");