如何从 ASP.NET MVC 5 中的 HTTP POST return 到我当前页面中的 div 的单个字符串？

Question

我正在尝试 post 在联系表单后发送一条消息，向用户表明他们的消息已在他们单击提交按钮后发送。我不想重定向到不同的页面或 return 我的 HTTP Post 操作方法中的不同视图。我如何在 ASP.NET MVC 框架中做类似的事情？

下面是我的代码示例：

@*contactus.cshtml*@
            @model MySite.Models.ContactModel
            @using (Html.BeginForm())
            {
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.TextBoxFor(model => model.Name})
                        <p>@Html.ValidationMessageFor(model => model.Name)</p>
                    </div>
                    <div class="form-group">
                        @Html.TextBoxFor(model => model.Email)
                        <p>@Html.ValidationMessageFor(model => model.Email)</p>
                    </div>
                    <div class="form-group">
                        @Html.TextAreaFor(model => model.Message)
                        <p>@Html.ValidationMessageFor(model => model.Message)</p>
                    </div>

                    <div class="col-lg-12">
                        <button type="submit">Send Message</button>
                    </div>
                </div>
            }

@*ContactModel.cs*@
public class ContactModel
{
    [Required(ErrorMessage = "* Please enter your name.")]
    [StringLength(100, MinimumLength=3, ErrorMessage="* Please enter your full name.")]
    public string Name { get; set; }

    [Required]
    [EmailAddress(ErrorMessage="* Not a valid email address.")]
    public string Email { get; set; }

    [Required]
    public string Message { get; set; }
}

我的 home/index 页面上现在只有一个联系我们表单，我不想将它重定向到任何其他页面。我想在 Send Message 按钮正下方显示一条消息，但我不确定如何使用下面的操作方法：

@*HomeController.cs*@
    public ActionResult Index(ContactModel model)
    {
        if (ModelState.IsValid)
        {
            // this is my helper library, for brevity, I'm not copying it.
            EmailHelper emailService = new EmailHelper(); 
            bool success = emailService.SendEmail(model.Name, model.Email, model.Message);
            return Content(success ? "success" : "no...something went wrong :(");
        } else {
            return View(model);
        }
    }

现在这个控制器将 return Content 中的字符串替换我的整个页面，我希望该字符串 return 在我的联系表单下方编辑。另外，我在同一个 html 页面上有两个部分，第二部分是联系表单，当我 return 查看（模型）时，它会自动重定向到第一部分，这并不理想。 . 我如何告诉控制器只将它重定向到 POST 方法之后的第二部分？另外，我觉得如果它不 return 整个页面会更有效率......那么有没有办法只 return 一个消息字符串到 div？

Answer 1

您可以在将包含消息的页面上放置一个隐藏的 div。

然后在提交表单后，捕获按钮的点击事件，并使用它来显示隐藏的消息。

如果您需要代码示例，请告诉我。发布您的表单将有助于我们更具体地回答您。

Answer 2

为了仅在成功发送表单时显示成功消息，我建议在控制器的 POST 操作中的 ViewBag 中设置一个值，然后 returning 同一页面，如果您仍然希望显示相同的页面。然后，您可以在视图本身上放置一个 If 语句来测试 ViewBag 变量是否包含一个值，如果是，则显示消息。

控制器：

[HttpPost]
public ActionResult YourAction(YourModel m)
{
    //Do stuff to send the contact form
    ...
    if(error)
    {
        ViewBag.Message = "There was a problem sending the form.";
    }
    else
    {
        ViewBag.Message = "The form was sent successfully!";
    }
    return View(m);
}

查看：

@if(ViewBag.Message != null)
{
    <div>@ViewBag.Message</div>
}

这让您可以在将结果告诉用户之前检查表单是否在服务器上 post 成功编辑，并且只有在设置了 ViewBag.Message 时才会显示一条消息。请注意，您可以拥有任意数量的 ViewBag 变量，并且可以根据需要为它们命名......只要记住您在哪个地方使用哪个变量即可。

编辑：

根据评论，这也可以使用 AJAX 调用来完成。为了简单起见，我将使用 jQuery .post() 方法。

在脚本中：

<script>
    $(document).on('click', "#buttonId", function() {
        var nameText = $("#IdOfNameField").val();
        var emailText = $("#IdOfEmailField").val();
        var messageText = $("#IdOfMessageField").val();
        $.post('@Url.Content("~/Controller/AJAXPostContactForm")',//the url to post to
            {name: nameText, email: emailText, message: messageText }, //these are values to be sent to the action
            function(){ //this is the success function
                $("#successMessage").val("Form posted successfully.");
            }
        )
        .fail(function() {//failure function
            alert("Something went wrong.");
        });
    }
</script>

控制器：

public void AJAXPostContactForm(string name, string email, string message)
{
    try
    {
        //do stuff with the information passed into the action
    }
    catch(exception e)
    {
        //Handle errors. If error thrown, Ajax should hit fail block in script
    }
    finally
    {
        //do any cleanup actions
    }
}

查看：

<div id="successMessage"></div>

我没有测试过这段代码，但理论上应该可以。单击特定按钮时，它将从表单字段中获取值，post 这些值到控制器中的专门 ActionResult，然后 return 一条关于所发生情况的消息。

如何从 ASP.NET MVC 5 中的 HTTP POST return 到我当前页面中的 div 的单个字符串？

How to return a single string to a div in my current page from HTTP POST in ASP.NET MVC 5?

asp.net-mvc

http-post

actionresult

actionmethod