Вызов метода сервера без перезагрузки страницы с помощью страницы бритвы - PullRequest
Новая
       11

Вызов метода сервера без перезагрузки страницы с помощью страницы бритвы

1 голос
/ 05 апреля 2019

В моем проекте .net core бритвы я хотел бы вызывать методы на стороне сервера из ввода cshtml без перезагрузки страницы. Я все еще новичок с бритвенными страницами. 

.cshtml : 

input type="submit" id="AddCart" asp-page-handler="AddToCart" hidden

Some JS to .click() the input.

.cs :
public async void OnPostAddToCart()
{
//code
}

До сих пор я не нашел способа предотвратить перезагрузку страницы и все еще обращался к моим методам на стороне сервера.

Спасибо

РЕДАКТИРОВАТЬ: Глядя на ссылку, предоставленную Брэдом, мне удалось заставить ее работать.

Я добавил @Page "{handler?}", Чтобы написать URL без обработчика (не уверен, имеет ли это значение для ajax), Я установил свой URL Ajax на "ThePage / theMethod", Я украсил свой класс контроллера бритвы с помощью [ValidateAntiForgeryToken] И упомянул маркер защиты от подделки в ajax: 

$.ajax({
                url: "/mainPage/AddToCart",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                success: function () {
                    alert("success");
                },
                complete: function () {
                    alert("complete")
                },
                failure: function () {
                    alert("failure");
                }
            });

Ответы [ 2 ]

0 голосов
/ 08 апреля 2019

Во-первых, измените имя вашего метода-обработчика, как показано ниже: 

 public async void OnPostAddToCartAsync()
    {
        //code
    }

См. Методы обработчика на страницах Razor для получения дополнительной информации о соглашении об именах.

Во-вторых, если вы хотите использовать ajax в Razor Pages, шаблон URL должен выглядеть как "/ mainPage? Handler = AddToCart". Следует отметить, что Razor Pages предназначены для защиты от ( CSRF / XSRF ) атаки. Следовательно, создание и проверка токенов Antiforgery автоматически включается в Razor Pages. Я считаю, что это проблема здесь. Ваша страница может содержать маркер защиты от подделки, если у вас есть тег формы в вашем HTML. Но вам нужно передать то же самое в вашем запросе Ajax.

  • Добавьте токен защиты от подделки, используя @Html.AntiForgeryToken(), если нет нет.

  • Измените ваш Ajax-запрос, чтобы он отправлялся так же в заголовке запроса, как ниже: 

    <input type="button" id="AddCart"  onclick="clickbtn()" value="Submit"/>
function clickbtn() {
    $.ajax({
        url: "/Test?handler=AddToCart",
        type: 'POST',
        beforeSend: function (xhr) {
            xhr.setRequestHeader("X-XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        success: function ()
        {
            alert("success");
        },
        complete: function ()
        {
            alert("complete")
        },
        failure: function ()
        {
            alert("failure");
        }
    });
}

  • Поскольку скрипт отправляет токен в заголовке с именем X-XSRF-TOKEN, настроить службу защиты от подделки для поиска X-XSRF-TOKEN заголовок: 

    services.AddAntiforgery(option => option.HeaderName = "X-XSRF-TOKEN");

    Прочтите этот пост Обработка запросов Ajax на страницах ASP.NET Core Razor , чтобы узнать больше о выполнении запроса Ajax с помощью страниц ASP.NET Core.

0 голосов
/ 05 апреля 2019

Если вы не хотите перезагружать страницу, вы должны использовать ajax или XMLHttpRequest (первый основан на последнем). 

<script>
window.onload=function()
{
  window.click=function()
  {
        $.ajax({  
            url: '[baseUrl/OnPostAddToCart]',  
            data: JSON.stringify(postData), //your data 
            type: 'POST',  
            contentType: 'application/json',  
            dataType: 'json',  

            success: function (result) {  
                alert(result);  //do something if successful
            },  
            complete: function(){  
                 //do something on complete
            },  
            failure: function (err) {                  
                alert(err); // Display error message  
            }  
        });
   }
}
</script>
<input  onclick="click()" type="button"/>

Использование XMLHttpRequest: 

window.click=function()
{
var xhr = new XMLHttpRequest();
xhr.open("POST", "[Your URL]");
xhr.onload=function()
{
  if(xhr.status==200)
    resolve(xhr.response);
  else
    reject("error:"+xhr.status);
}
var data=JSON.stringify({some_data});
xhr.send(data);
}

Метод контроллера 

 public class MyController:Controller
 {
    [HttPost]
    [Route("/OnPostAddToCart")]
    public async Task AddToCart(object data)
    {

    }
 }

PS Для получения дополнительной информации о ajax

...