如何提交表单,然后在完成时调用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");
    }

以上是我的操作,最重要的部分是"返回"关键字,我只是想看到,在我看来,即使结果为真,不仅当结果为假时,此操作应该只调用一次而不是重定向。谢谢。

如何提交表单,然后在完成时调用jquery函数而不重定向MVC / C # / Jquery

你有<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>
    }