没有刷新.net核心mvc的发布表单

Question

我在 .NET Core MVC 中有一个简单的应用程序，具有这种简单的形式。当我尝试在不刷新整个页面的情况下发布表单时，只需将表单休息并得到完成的结果。

我的代码试用是：

 <form asp-area="" asp-controller="ContactUs" asp-action="UserMessage" data-ajax="true">
    <h5>Reach us quickly</h5>

    <div class="row">

        <span asp-validation-for="UserName" class="text-danger"></span>
        <div class="col-sm-6 col-12">
            <div class="form-group">
                <input asp-for="UserName" class="form-control" name="UserName" placeholder="Enter name" required="required">
            </div>
        </div>

        <span asp-validation-for="Email" class="text-danger"></span>
        <div class="col-sm-6 col-12">
            <div class="form-group">
                <input asp-for="Email" class="form-control" name="Email" placeholder="Enter email" required="required">
            </div>
        </div>
    </div>
  
    <div class="row">
        <span asp-validation-for="Msg" class="text-danger"></span>
        <div class="col-12">
            <div class="form-group">
                <textarea asp-for="Msg" name="Msg" class="form-control" rows="7" cols="25" placeholder="Message"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 mt-3">
            <button type="submit" class="btn solid-btn" id="btnContactUs">
                Send Message
            </button>
        </div>
    </div>
</form>

我的行动是：

[HttpPost]
public async Task<IActionResult> UserMessage(ContactUs model)
{
    try
    {
        if (ModelState.IsValid)
        {
            _context.Add(model);
            await _context.SaveChangesAsync();
            return NoContent();
        }
    }
    catch (Exception e)
    {
        Console.WriteLine(e);
        throw;
    }

    return NoContent();
}

我想更改return NoContent();，这样我就可以向用户显示他的消息已发送或发送失败的消息，而无需刷新整个页面。

Answer 1

您的表单标签缺少其他一些 ajax 属性：

<form method="post"
        data-ajax="true"
        data-ajax-method="post"
        data-ajax-url="@Url.Page("UserMessage", "ContactUs")"
        data-ajax-loading="#loading"
        data-ajax-mode="replace"
        data-ajax-update="#updateDiv">

    <!-- form controls -->

    <button type="submit" class="btn solid-btn" id="btnContactUs">Send Message</button>
    <span id="loading" style="display:none;"> <i class="fas fa-spinner fa-spin"></i></span>
</form>

<div id="updateDiv">
    <!-- ajax content will load here -->
    <!-- you can put the form inside this div -->
    <!-- so after submit the result will replace the form controls -->
</div>

<!-- include jquery libraries -->
@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-ajax-unobtrusive@3.2.6/dist/jquery.unobtrusive-ajax.min.js"></script>
}

后端方法可以返回如下结果：

public async Task<ContentResult> OnPostUserMessageAsync(ContactUs model)
{
    try
    {
        if (ModelState.IsValid)
        {
            _context.Add(model);
            await _context.SaveChangesAsync();
            return Content("done");
        }
    }
    catch (Exception e)
    {
        Console.WriteLine(e);
        throw;
    }

    return Content("something went wrong...");
}

见Ajax Request Using Inline Attributes

Answer 2

如果您不希望页面被替换，则必须使用 ajax 通过 javascript 发布数据。在浏览器中发布表单会将当前的 html 替换为控制器的结果，这就是表单的工作方式。

将任何成功的 POST 重定向到不同的页面也是常见的做法，这样用户就可以刷新该页面而无需处理两次 POST 请求。

Answer 3

感谢@Laz Ziya，我使用了他的代码并将表单修改为

而不是

 <form method="post"
          data-ajax="true"
          data-ajax-method="post"
          data-ajax-url="@Url.Page("UserMessage", "ContactUs")"
          data-ajax-loading="#loading"
          data-ajax-mode="replace"
          data-ajax-update="#updateDiv">

成为

 <form asp-area="" asp-controller="ContactUs" asp-action="UserMessage" data-ajax-loading="#loading" data-ajax-mode="replace" data-ajax-update="#updateDiv" data-ajax-success="Success" data-ajax-failure="Failure" data-ajax="true">

Answer 4

对于没有刷新的post表单，你需要在你的代码中使用ajax。