У меня есть одна форма, в которой есть две кнопки для загрузки изображения с помощью ajax call, а другая - основная кнопка отправки, которая сохраняет все данные.
Я все еще очень плохо знаком с ядром asp. net и пытаюсь научиться чему-то другому asp. net ядро со страницей бритвы.
Я прочитал много статей о отправка нескольких форм, но в большинстве случаев используются две формы с кнопкой отправки для каждого.
Моя проблема в том, что когда я нажимаю кнопку отправки, не удается найти метод обработчика, после полных дней устранения неполадок ничего не работает и последние несколько статей указать на ошибку / отказ от подделки, я не уверен, как реализовать это в приведенном ниже коде, как я пробовал несколько, но они дали ошибку, может быть статья, где старые ссылки на ядро 2.2 et c example1 example2
Я не уверен в том, что именно вызывает проблему, будет полезна любая помощь.
Я пытаюсь загрузить изображение, используя метод Ajax в asp. net core Razor pages, я являюсь главной формой, все поля ввода сохраняются, и с помощью формы для Fileupload я также добавил кнопку добавления, которая предназначена для загрузки файлов с использованием Ajax, когда я нажимаю
* 101 6 *
<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 / Администратор / Новости / 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 файл CODE
public async Task<IActionResult> OnPost()
{
if (ModelState.IsValid)
{
return Page();
}
else
{
return Page();
}
}
public IActionResult OnPostUploadImage()
{
//Some code here
}