如何提交表单,然后在完成时调用jquery函数而不重定向MVC / C # / Jquery
本文关键字:函数 jquery 重定向 MVC Jquery 调用 完成时 提交 何提交 表单 然后 | 更新日期: 2023-09-27 18:35:11
我有一个问题,我试图在提交表单后在同一页面上显示一条消息,但我的结果总是错误的,因为我在控制器中的操作被调用了两次,当我单击提交按钮时,第一次调用我的操作时,数据被传递到具有正确信息的操作并保存到数据库中, 第二次每个参数都是空的,因此返回 false。
我想要一种方法,只提交一次并在同一页面中返回适当的 Json 结果而不重定向,我希望有人可以帮助我,这是我的代码:
我试过了:
function PdfHeaderAndFooterManager() {
$('#submitPdf').ajaxSubmit(function (e) {
$.ajax({
url: "/Dashboard/PdfHeaderAndFooterManager",
dataType: "json",
type:"POST",
data: {headerImage: headerImage, footerImage: footerImage},
success: function (data) {
if (data.success) {
alert(data.message);
$('#resultMessage').text(data.message).css("color", "RED");
}
else {
alert(data.message);
$('#resultMessage').text(data.message).css("color", "RED");
}
}
});
e.preventDefault();
});
}
我的观点为简单起见删除了一些代码
@using (Html.BeginForm("PdfHeaderAndFooterManager", "Dashboard", FormMethod.Post, new { enctype = "multipart/form-data", id = "formPdfImages" }))
div id="resultMessage"></div>
}
public ActionResult PdfHeaderAndFooterManager(HttpPostedFileBase headerImage, HttpPostedFileBase footerImage)
{
//some code to declare variables
if (headerImage != null)
{
if (!String.IsNullOrEmpty(headerImage.ContentType))
{
headerImageContentType = imageHelper.IsValidImageType(headerImage.ContentType);
if (headerImageContentType)
{
resizedHeaderImage = imageHelper.ResizeImage(headerImage.InputStream);
}
else
{
return Json(new { success = false, message = "Please Upload an image* file less than 2GB." });
}
}
}
if (footerImage != null)
{
if (!String.IsNullOrEmpty(footerImage.ContentType))
{
footerImageContentType = imageHelper.IsValidImageType(footerImage.ContentType);
if (footerImageContentType)
{
resizedFooterImage = imageHelper.ResizeImage(footerImage.InputStream);
}
else
{
return Json(new { success = false, message = "Please Upload an image* file less than 2GB." });
}
}
}
if (P24DataPrincipal.CurrentIdentity != null)
{
if (resizedHeaderImage != null || resizedFooterImage != null)
{
//add to DB code
return Json(new { success = true, message = "Image(s) Uploaded Successfully." });
}
else
{
return Json(new {success = false, message = "Upload atleast 1 image file." });
}
}
return Json("someview");
}
以上是我的操作,最重要的部分是"返回"关键字,我只是想看到,在我看来,即使结果为真,不仅当结果为假时,此操作应该只调用一次而不是重定向。谢谢。
你有<input type="submit" />
吗? 如果是这样,请将其更改为按钮并将其连接到jQuery ready
中,以便它命中您的函数:
$.ready(function(){
$("#submitButtonId").click(function() {
//put your ajax stuff here
});
});
你的第一个函数实际上看起来接近正确。一些小的调整如下所示。
以下方法是否有效?
$(function() {
$('#formPdfImages').submit(function(event) {
event.preventDefault();
event.stopPropagation();
$.post("@(Url.Action("PdfHeaderAndFooterManager", "Dashboard"))", $(this).serialize(), function(data) {
if (data.success) {
$("#resultMessage").text(data.success);
} else {
$("resultMessage").text(data.success);
}
});
});
});
你正在使用@using (Html.BeginForm())
,你不能用这个提交进行Ajax调用,
对于 ajax 调用,您必须使用: @using (Ajax.BeginForm())
,
但是您需要上传图像,因此您必须使用:
@using (Html.BeginForm("PdfHeaderAndFooterManager", "Dashboard", FormMethod.Post, new { enctype = "multipart/form-data", id = "formPdfImages" }))
因此,Ajax调用是不可能的。要在同一页面上显示消息,请使用另一种替代方法,可能是:
public ActionResult PdfHeaderAndFooterManager(HttpPostedFileBase headerImage, HttpPostedFileBase footerImage)
{
//some code to declare variables
if (headerImage != null)
{
if (!String.IsNullOrEmpty(headerImage.ContentType))
{
headerImageContentType = imageHelper.IsValidImageType(headerImage.ContentType);
if (headerImageContentType)
{
resizedHeaderImage = imageHelper.ResizeImage(headerImage.InputStream);
}
else
{
ViewBag.ReturnMessage="<span style='color:red'> Please Upload an image* file less than 2GB.</span>";
return View();
}
}
}
if (footerImage != null)
{
if (!String.IsNullOrEmpty(footerImage.ContentType))
{
footerImageContentType = imageHelper.IsValidImageType(footerImage.ContentType);
if (footerImageContentType)
{
resizedFooterImage = imageHelper.ResizeImage(footerImage.InputStream);
}
else
{
ViewBag.ReturnMessage="<span style='color:red'>Please Upload an image* file less than 2GB.</span>";
return View();
}
}
}
if (P24DataPrincipal.CurrentIdentity != null)
{
if (resizedHeaderImage != null || resizedFooterImage != null)
{
//add to DB code
ViewBag.ReturnMessage="<span style='color:green'>Image(s) Uploaded Successfully.</span>";
return View();
}
else
{
ViewBag.ReturnMessage="<span style='color:red'>Upload atleast 1 image file.</span>";
return View();
}
}
在视野中:
@using (Html.BeginForm("PdfHeaderAndFooterManager", "Dashboard", FormMethod.Post, new { enctype = "multipart/form-data", id = "formPdfImages" })){
<div id="resultMessage">
@ViewBag.ReturnMessage
</div>
}