Бритвенные страницы jQuery Autocomplete ничего не делая - PullRequest
Новая
       7

Бритвенные страницы jQuery Autocomplete ничего не делая

0 голосов
/ 17 июня 2019

Я реализовал автозаполнение 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{} не вызывается

Код бритвы: 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>

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

Мне удалось наконец заставить его работать после нескольких поисков.Добавление маркера защиты от подделки, возможно, было основной проблемой, поскольку у меня его не было добавлено ранее.Обратите внимание на 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");

0 голосов
/ 17 июня 2019

Измените запрос 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)
           }))
         }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...