剃刀页面中的多个提交按钮找不到处理程序pageName?handler = OnPostUploadImage [英] Multiple Submit Buttons in Razor Pages not able to find handler pageName?handler=OnPostUploadImage
问题描述
我正在尝试在asp.net核心Razor页面中使用Ajax方法上传图像，我将保留所有输入字段并保留Fileupload表单的主要形式，我还添加了用于使用Ajax上传文件的附加按钮，当我点击
<输入类型="submit" value =上传图片" asp-page-handler ="OnPostUploadImage" id ="btnUploadImage"/>
我希望它在pageModel文件中调用 OnPostUploadImage 方法，但始终使用默认的 OnPost 方法.当我将 OnPost 重命名为 OnPost2 时，没有任何反应.
如何在按钮 btnUploadImage 单击事件上调用 OnPostUploadImage().
当我点击单击 btnUploadImage 时，它会在浏览器控制台上生成以下错误
FF错误
XML解析错误:找不到根元素位置: https://localhost:44364/Admin/News/NewsCreate?handler = OnPostUploadImage 第1行，第1列:
Chrome中的错误
jquery.min.js:2开机自检 https://localhost:44364/Admin/News/NewsCreateNewpleSubmit?handler = OnPostUpLoadImage 400(错误请求)
事件虽然路径看起来不错，但无法根据错误消息找到它
@page@model BookListRazor.Pages.Admin.News.NewsCreateModel@ {ViewData ["Title"] =新闻创建";布局=〜/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><输入隐藏的asp-for ="News.NewsImage"/>< input id ="fileName"隐藏的值="/>< 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"> * @@ *照片属性类型为IFormFile，因此ASP.NET Core会自动创建FileUpload控件* @< div class ="custom-file">< input asp-for ="NewsImageForUpload" class ="custom-file-input form-control">< label class ="custom-file-label">点击此处更改照片</label>< input type ="submit" value =上传图片" 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">< ap-page ="Index" class ="btn btn-success form-control">返回列表</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");});如果($(#fileName").val()=="){//alert(选择图片...");;}});</script></div>@section脚本{< partial name ="_ ValidationScriptsPartial"/>< script>$(函数(){$('#btnUploadImage').on('click'，function(evt){console.log("btnUploadImage");evt.preventDefault();console.log("evt.preventDefault()之后的btnUploadImage");$ .ajax({url:'@ Url.Page("，"OnPostUploadImage")'，//data:新的FormData(document.forms [0])，contentType:false，processData:否，类型:"post"，成功:功能(){alert('由jQuery上传');}});});});</script>} .cs文件CODE
公共异步任务< IActionResult>OnPost(){如果(ModelState.IsValid){返回Page();}别的{返回Page();}}公共IActionResult OnPostUploadImage(){//这里有一些代码} 400错误，因为Razor Pages被设计为可以自动防御跨站点请求伪造(CSRF/XSRF)攻击.您无需编写任何其他代码.由于我注意到您已经在页面上添加了FormTagHelper，因此Razor Pages中会自动包含防伪令牌的生成和验证.因此，只需修改ajax以在标头中包含令牌:
beforeSend:函数(xhr){xhr.setRequestHeader("XSRF-TOKEN"，$('input:hidden [name ="__ RequestVerificationToken"]').val());}， 并配置防伪服务以查找X-CSRF-TOKEN标头:
services.AddAntiforgery(o => o.HeaderName ="XSRF-TOKEN"); 下面的文章供您参考:
然后要发布到ajax中的OnPostUploadImage函数，请将url修改为 @ Url.Page("，"UploadImage"):
$.ajax({url:'@ Url.Page("，"UploadImage")'，beforeSend:函数(xhr){xhr.setRequestHeader("XSRF-TOKEN"，$('input:hidden [name ="__ RequestVerificationToken"]').val());}，contentType:false，processData:否，类型:"post"，成功:功能(){alert('由jQuery上传');}}); I am trying to upload Image using Ajax method in asp.net core Razor pages, I am main form in will all input fields are kept and with the form for Fileupload i am also added addition button which is for file upload using Ajax, When i hit the
<input type="submit" value="Upload Image" asp-page-handler="OnPostUploadImage" id="btnUploadImage" />
i want it to call OnPostUploadImage method in pageModel file but it alway goes to default OnPost method. when i rename the OnPost to OnPost2 nothing happend..
How can i call OnPostUploadImage() on button btnUploadImage click event.
When i hit click btnUploadImage it generates following error on browser console
Error in FF
XML Parsing Error: no root element found Location: https://localhost:44364/Admin/News/NewsCreate?handler=OnPostUploadImage Line Number 1, Column 1:
Error in Chrome
jquery.min.js:2 POST https://localhost:44364/Admin/News/NewsCreateMultipleSubmit?handler=OnPostUpLoadImage 400 (Bad Request)
event though path looks fine but it cant find it as per error message
@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 file CODE
public async Task<IActionResult> OnPost()
{
if (ModelState.IsValid)
{
return Page();
}
else
{
return Page();
}
}
public IActionResult OnPostUploadImage()
{
//Some code here
}
400 error because Razor Pages are designed to be automatically protected from cross-site request forgery (CSRF/XSRF) attacks. You don’t have to write any additional code. Antiforgery token generation and validation is automatically included in Razor Pages since i notice you have add FormTagHelper on page . So just modify your ajax to include token in header :
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
And configure the antiforgery service to look for the X-CSRF-TOKEN header :
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
Below article is for your reference :
Handle Ajax Requests in ASP.NET Core Razor Pages
And to post to OnPostUploadImage function in ajax , modify url to @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');
}
});
这篇关于剃刀页面中的多个提交按钮找不到处理程序pageName?handler = OnPostUploadImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
