Несколько кнопок отправки на бритвенных страницах не могут найти обработчик pageName? Handler = OnPostUploadImage - PullRequest
Новая
       25

Несколько кнопок отправки на бритвенных страницах не могут найти обработчик pageName? Handler = OnPostUploadImage

0 голосов
/ 15 апреля 2020

Я пытаюсь загрузить изображение, используя Ajax метод в asp. net основных страницах Razor, я являюсь основной формой, в которой все поля ввода сохраняются, и с формой для Fileupload я также добавил кнопку добавления, которая для загрузки файла с использованием Ajax, когда я нажимаю

<input type="submit" value="Upload Image" asp-page-handler="OnPostUploadImage" id="btnUploadImage" />

я хочу, чтобы он вызывал OnPostUploadImage метод в файле pageModel, но он всегда переходит к методу OnPost по умолчанию , когда я переименовываю OnPost в OnPost2 ничего не происходит ..

Как я могу позвонить OnPostUploadImage() на кнопку btnUploadImage событие щелчка.

Когда я нажимаю, нажмите btnUploadImage это генерирует следующую ошибку на консоли браузера

Ошибка в FF

XML Ошибка синтаксического анализа: не найден root элемент Расположение: https://localhost: 44364 / Admin / News / NewsCreate? Handler = OnPostUploadImage Строка № 1, столбец 1:

Ошибка в Chrome

jquery .min. js: 2 POST https://localhost: 44364 / Admin / News / NewsCreateMultipleSubmit? Handler = OnPostUpLoadImage 400 (неверный запрос)

событие, хотя путь выглядит нормально, но не может найти его согласно сообщению об ошибке 

 @page
    @model BookListRazor.Pages.Admin.News.NewsCreateModel
    @{
        ViewData["Title"] = "News Create";
        Layout = "~/Pages/Shared/_LayoutAdmin.cshtml";
    }


     <div class="border container" style="padding:30px;">
            <form method="post" enctype="multipart/form-data">
                <div class="text-danger" asp-validation-summary="ModelOnly"></div>
                <input hidden asp-for="News.NewsImage" />
                <input id="fileName" hidden value="" />

                <div class="form-group row">
                    <div class="col-2">
                        <label asp-for="News.NewsHeading"></label>
                    </div>
                    <div class="col-10">
                        <input asp-for="News.NewsHeading" class="form-control" />

                    </div>
                    <span asp-validation-for="News.NewsHeading" class="text-danger"></span>
                </div>


                <div class="form-group row">
                    <div class="col-2">
                        <label asp-for="News.NewsImage"></label>
                    </div>
                    <div class="col-10">
                        @*<input asp-for="News.NewsImage" type="file" class="form-control" id="NewsImage">*@
                        @*Photo property type is IFormFile, so ASP.NET Core automatically creates a FileUpload control  *@
                        <div class="custom-file">
                            <input asp-for="NewsImageForUpload" class="custom-file-input form-control">
                            <label class="custom-file-label">Click here to change photo</label>
                                                <input type="submit" value="Upload Image" asp-page-handler="OnPostUploadImage" id="btnUploadImage" />

                        </div>
                    </div>
                    <span id="imageStatus" class="text-danger"></span>
                    <span asp-validation-for="NewsImageForUpload" class="text-danger"></span>
                </div>


                <div class="form-group row">
                    <div class="col-3 offset-3">
                        <input id="btnSave" type="submit" value="Create" class="btn btn-primary form-control" />
                    </div>
                    <div class="col-3">
                        <a asp-page="Index" class="btn btn-success form-control">Back to List</a>
                    </div>
                </div>
            </form>
            <script src="~/lib/jquery/dist/jquery.min.js"></script>
            <script src="https://cdn.ckeditor.com/4.14.0/full/ckeditor.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
            <script>

                $(document).ready(function () {

                    $("#btnSave").addClass("disable-button");

                    $('.custom-file-input').on("change", function () {
                        var fileName = $(this).val().split("\\").pop();
                        $(this).next('.custom-file-label').html(fileName);
                        $("#fileName").val(fileName);
                        $("#btnSave").removeClass("disable-button");
                    });

                    if ($("#fileName").val() == "") {
                        //alert("Select Image...");;
                    }
                });

            </script>
        </div>
        @section Scripts{
            <partial name="_ValidationScriptsPartial" />

            <script>
 $(function () {
                $('#btnUploadImage').on('click', function (evt) {
                    console.log("btnUploadImage");
                    evt.preventDefault();
                    console.log("btnUploadImage after evt.preventDefault()");
                    $.ajax({
                        url: '@Url.Page("", "OnPostUploadImage")',
                        //data: new FormData(document.forms[0]),
                        contentType: false,
                        processData: false,
                        type: 'post',
                        success: function () {
                            alert('Uploaded by jQuery');
                        }
                    });
                });
            });
            </script>
            }

.cs КОД файла 

public async Task<IActionResult> OnPost()
        {
            if (ModelState.IsValid)
            {
                return Page();
            }
            else
            {

                return Page();
            }
        }

        public IActionResult OnPostUploadImage()
        {

            //Some code here
        }

1 Ответ

0 голосов
/ 17 апреля 2020
Ошибка

400, потому что Razor Pages разработаны для автоматической защиты от атак подделки межсайтовых запросов (CSRF / XSRF). Вам не нужно писать дополнительный код. Создание и проверка токенов антиподделения автоматически включается в Razor Pages, так как я заметил, что вы добавили FormTagHelper на страницу. Поэтому просто измените ваш ajax, чтобы включить токен в заголовок: 

beforeSend: function (xhr) {
    xhr.setRequestHeader("XSRF-TOKEN",
        $('input:hidden[name="__RequestVerificationToken"]').val());
},

И настройте службу защиты от подделки для поиска заголовка X-CSRF-TOKEN: 

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

Ниже приведена статья для справки:

Обработка Ajax Запросы в ASP. NET Core Razor Pages

И для публикации в функцию OnPostUploadImage в ajax, изменить URL-адрес @Url.Page("", "UploadImage"): 

$.ajax({
    url: '@Url.Page("", "UploadImage")',
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN",
        $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    contentType: false,
    processData: false,
    type: 'post',
    success: function () {
        alert('Uploaded by jQuery');
    }
});
...