提交时，Razor自动完成功能不起作用

如何解决提交时，Razor自动完成功能不起作用

我的Razor项目的自动完成功能遇到问题。每当它返回我错误/失败。也许这甚至是愚蠢的事情，但是我是ASP的新手，所以我很难注意到它。 JavaScript代码

 $(function () {
    $('#searchCliente').autocomplete({
        source: function (request,response) {
            $.ajax({
                url: '/Index?handler=Search',data: { "term": request.term },type: "POST",success: function (data) {
                    response($.map(data,function (item) {
                        return item;
                    }))
                },error: function (response) {
                    alert(response.responseText);
                },failure: function (response) {
                    alert(response.responseText);
                }
            });
        },select: function (e,i) {
            $("#idCliente").val(i.item.val);
            $("#idFatt").val(i.item.val);
        },minLength: 3
    });
});

页面模型代码

public IActionResult OnPostSearch(string term)
        {

            var clientefatt = (from cliente in this.context.Arc_Anagrafiche
                               where cliente.Ragionesociale.StartsWith(term)
                               select new
                               {
                                   label = cliente.Ragionesociale,val = cliente.IdAnag
                               }).ToList();

            return new JsonResult(clientefatt);
        }

HTML代码

<input asp-for="intervento.Cliente" class="form-control" id="searchCliente" />
<input asp-for="intervento.IdClienteFatturazione" class="form-control" id="idCliente" type="hidden" />

解决方法

也许您应该分配ajax数据类型属性，并将“ type”属性从post更改为get，如下所示：

            $.ajax({
            url: '/Index?handler=Search',data: { "term": request.term },datatype: 'json'
            type: "GET",success: function (data) {
                response($.map(data,function (item) {
                    return item;
                }))
            },error: function (response) {
                alert(response.responseText);
            },failure: function (response) {
                alert(response.responseText);
            }
        });

还可以在Model代码中尝试以下操作之一，

如同返回json时，JSONRequestBehavior属性应指定为AllowGet：

return Json(new {clientefatt = clientefatt},JsonRequestBehavior.AllowGet);

将Model代码方法的返回类型更改为JsonResult，如下所示

public JsonResult OnPostSearch(string term){
 return new JsonResult(clientefatt);
}

由于您使用的是.net core，因此最有可能的第一个选项是“ ASP.NET Core-名称'JsonRequestBehavior'在当前上下文中不存在”错误

也许问题与AntiForgeryToken有关，请尝试在发送Ajax请求之前在请求标头中添加XSRF-TOKEN属性。

请参考以下示例并修改您的代码：

在ConfigureServices方法中添加AddAntiforgery（）服务：
```
 services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
```

在Ajax beforeSend事件中，从隐藏字段中获取RequestVerificationToken，然后设置请求标头：

 @page
 @model RazorPageSample.Pages.AutocompleteTestModel

 <form method="post">
     @Html.AntiForgeryToken()
     <input type="text" id="txtCustomer" name="label" />
     <input type="hidden" id="hfCustomer" name="val" />
     <br /><br />
     <input type="submit" value="Submit" asp-page-handler="Submit" />
     <br />
 </form> 
 @section Scripts{ 
     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script>
     <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
     <link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />
     <script type="text/javascript">
         $(function () {
             $("#txtCustomer").autocomplete({
                 source: function (request,response) {
                     $.ajax({
                         url: '/AutocompleteTest?handler=AutoComplete',beforeSend: function (xhr) {
                             xhr.setRequestHeader("XSRF-TOKEN",$('input:hidden[name="__RequestVerificationToken"]').val());
                         },data: { "prefix": request.term },type: "POST",success: function (data) {
                             response($.map(data,function (item) {
                                 return item;
                             }))
                         },error: function (response) {
                             alert(response.responseText);
                         },failure: function (response) {
                             alert(response.responseText);
                         }
                     });
                 },position: { collision: "flip" },select: function (e,i) {
                     $("#hfCustomer").val(i.item.val);
                 },minLength: 1
             });
         });
     </script>
 }

.cshtml.cs文件中的代码：

    public IActionResult OnPostAutoComplete(string prefix)
    {
        var customers = new List<Customer>()
        {
            new Customer(){ ID=101,Name="Dillion"},new Customer(){ID=102,Name = "Tom"},new Customer(){ ID=103,Name="David"}
        }; 
        return new JsonResult(customers.Where(c=>c.Name.ToLower().StartsWith(prefix.ToLower())).Select(c=> new { label = c.Name,val = c.ID }).ToList());

    }

    public class Customer
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

然后，截图如下：

参考：jQuery AutoComplete in ASP.Net Core Razor Pages