Jquery 表单发布后的asp.net核心用户通知

好的，这是我的第一个问题，所以我会尽量澄清，不要重复别人以前问过的问题。在发帖之前，我确实尝试过在论坛上搜索，但没有找到任何可以帮助我解决问题的方法。如果我错过了一个合适的答案，请轻轻地关闭这个问题作为重复

因此，我的目标是在部分视图中发布表单后向用户发送通知，告诉用户该表单是否有效或后端是否存在问题。我也不希望仅仅为了显示通知而重新加载整个视图

我的问题是，在不刷新整个视图的情况下，从后端向UI发送通知的最佳方式是什么

以下是我到目前为止所做的尝试以及失败的原因：

第一次尝试是将数据添加到ViewData字典并将其传递给视图。它可以工作，但会再次加载整个页面，这是不需要的

正如我通过搜索看到的，在返回视图之前重定向到GET请求是一种很好的做法，我创建了一个重定向到成功方法，该方法随后将显示ViewData字典，但我发现它不起作用，因为重定向不允许我通过ViewData传递任何内容

后来我发现我可以使用TempData，因为它通过重定向而存在，而不是ViewData和ViewBag。这个解决方案的问题是存在一些安全问题，而且除了警报之外，我无法在客户端运行javascript，这对用户来说不是很有吸引力

我做的最后一次尝试是使用Ajax请求，这样就不会有页面刷新，只有在服务器响应后，我才能向用户发送通知。这个解决方案的问题是，我似乎无法将表单数据获取到后端，它总是用空值填充。需要注意的是，我尝试在ContactViewModel之前添加[FromBody]属性，因为我在其他帖子中看到它是它不能正确绑定的原因，但它对我不起作用。 以下是我目前掌握的代码：

a。对于控制器：

[HttpPost]
[AjaxOnly]
public async Task<IActionResult>SendContactRequest(ContactViewModel model)
{

    if (ModelState.IsValid)
    {
        string recipientEmailAddresses = anyEmail@anyExtension.com;

            string subject = "Website customer request from " + model.firstName + " " + model.lastName;
            string message = "";
            if (model.jobTitle != null)
            {
                message += "Job title: " + model.jobTitle;
            }
            message += "Request or comment: " + model.requestMsg;

            // Only actually send the message if we are in production/staging or other, anything else than development
            if (!_env.IsDevelopment())
            {
                await _emailSender.SendEmailAsync(model.contactEmail, $"{model.firstName} {model.lastName}", recipientEmailAddresses, subject, message);   //using interpolated string here
            }

            // Sending confirmation via response.writeAsync
            await Response.WriteAsync("success");
        }
        else
        {
            await Response.WriteAsync("the message could not be sent as model is not valid");
        }

        // this method redirects to the good section on page, but cannot pass the model along with it...
        return Redirect("Index#contact");
    }

---

方法4是我推荐的（Ajax）。您的代码中有一个发布表单数据的小错误，这就是为什么它没有绑定到您的模型

// Attach a submit handler to the form
$("#contactForm").submit(function (event) {

    // Stop form from submitting normally
    event.preventDefault();

    // this won't work - take out the indexer
    // var formdata = new FormData(document.querySelector('#contactForm')[0]);

    // this should work
    var formdata = new FormData(document.querySelector('#contactForm'));


    // Send the data using ajax
    $.ajax({
        type: "POST",
        url: $form.attr("action"),
        data: formdata,
        processData: false,
        contentType: false,
        success: function (response) {
            if (response.includes("success")) {
                alert(response);
                document.getElementById("contactRequestForm").reset();
            }
        },
        error: function () {
            alert("Mail not sent, please try again later \n If this error persists, please contact us directly via email @ webmaster@set-ets.com");
        }
    });
});

---

然而，您的控制器代码并不能满足您的需要。您可能真的希望它返回某种类型的带有任何模型错误的

json

类型响应，等等。但是，这段代码应该可以让您正确地绑定到模型，然后您可以调整控制器方法以返回更合理的响应（而不是

重定向

）我建议使用方法4（Ajax）。您的代码中有一个发布表单数据的小错误，这就是为什么它没有绑定到您的模型

// Attach a submit handler to the form
$("#contactForm").submit(function (event) {

    // Stop form from submitting normally
    event.preventDefault();

    // this won't work - take out the indexer
    // var formdata = new FormData(document.querySelector('#contactForm')[0]);

    // this should work
    var formdata = new FormData(document.querySelector('#contactForm'));


    // Send the data using ajax
    $.ajax({
        type: "POST",
        url: $form.attr("action"),
        data: formdata,
        processData: false,
        contentType: false,
        success: function (response) {
            if (response.includes("success")) {
                alert(response);
                document.getElementById("contactRequestForm").reset();
            }
        },
        error: function () {
            alert("Mail not sent, please try again later \n If this error persists, please contact us directly via email @ webmaster@set-ets.com");
        }
    });
});

---

然而，您的控制器代码并不能满足您的需要。您可能真的希望它返回某种类型的带有任何模型错误的

json

类型响应，等等。但是，这段代码应该可以让您正确地绑定到模型，然后您可以调整控制器方法以返回更合理的响应（而不是

重定向

）

或使用jquery查询表单数据：

var formdata=new formdata（$（“#contactForm”）[0]）--可能这是您的初衷。谢谢您的输入。对于控制器，它实际上做了我想要的事情，因为模型错误的验证在发布请求之前在客户端完成。至于索引，我不知道为什么，但如果我按照建议删除它，我会在调试控制台（Chrome dev tools）中出现以下错误：“参数非可选”错误发生在哪里？当我在本地测试时，我确实必须将
$form.attr
更改为
$（“#contactForm”）.attr
，但我不确定您是否使用了我没有的插件，所以我在帖子中没有更改。也许就是这样？或者，在我的第一条评论中尝试jquery语法。jquery表单似乎按照预期的方式工作（您所做的第二条评论），我认为我已经尝试过了，但可能在第一次尝试时我有一个拼写错误，这就是为什么我尝试了“香草”javascript方式，并将索引放在那里。总的来说，您认为这是向用户发送通知的最佳方式，还是会有更好的替代方案？考虑到您所需的用户交互（无需重新加载等），ajax对我来说最有意义。或者对表单数据使用jquery:
var formdata=new formdata（$（'#contactForm'）[0]）--可能这是您的初衷。谢谢您的输入。对于控制器，它实际上做了我想要的事情，因为模型错误的验证在发布请求之前在客户端完成。至于索引，我不知道为什么，但如果我按照建议删除它，我会在调试控制台（Chrome dev tools）中出现以下错误：“参数非可选”错误发生在哪里？当我在本地测试时，我确实必须将
$form.attr
更改为
$（“#contactForm”）.attr
，但我不确定您是否使用了我没有的插件，所以我在帖子中没有更改。也许就是这样？或者，在我的第一条评论中尝试jquery语法。jquery表单似乎按照预期的方式工作（您所做的第二条评论），我认为我已经尝试过了，但可能在第一次尝试时我有一个拼写错误，这就是为什么我尝试了“香草”javascript方式，并将索引放在那里。总的来说，您认为这是向用户发送通知的最佳方式，还是会有更好的替代方案？考虑到您希望的用户交互（无需重新加载等），ajax对我来说最有意义。
// Attach a submit handler to the form
$("#contactForm").submit(function (event) {

    // Stop form from submitting normally
    event.preventDefault();

    // this won't work - take out the indexer
    // var formdata = new FormData(document.querySelector('#contactForm')[0]);

    // this should work
    var formdata = new FormData(document.querySelector('#contactForm'));


    // Send the data using ajax
    $.ajax({
        type: "POST",
        url: $form.attr("action"),
        data: formdata,
        processData: false,
        contentType: false,
        success: function (response) {
            if (response.includes("success")) {
                alert(response);
                document.getElementById("contactRequestForm").reset();
            }
        },
        error: function () {
            alert("Mail not sent, please try again later \n If this error persists, please contact us directly via email @ webmaster@set-ets.com");
        }
    });
});