如何使用 JavaScript 完全重置/清除 ASP.NET Core MVC 表单？

Question

我需要使用 JS（或 jQuery）来重置表单。如果填写字段并单击重置，它会正常工作。当我提交至少有一个字段存在模型错误的表单时，问题就开始了。当返回带有模型错误的表单并单击重置时，没有模型错误的字段不会重置。

这里发生了什么？如何让所有字段始终重置，无论是否存在任何模型错误？此外，我希望模型错误在重置时也消失。

下面的 Gif 显示了我突出显示的字段未重置：

HTML

@model SampleViewModel
@{
    ViewData["Title"] = "Home Page";
}


<script>
    function ResetFormWithJS() {
        document.getElementById('FormEyeDee').reset();
    }
</script>

<center>
    <form id="FormEyeDee"asp-action="Index" method="post">
        Name:
        <input asp-for="Name" />
        <span asp-validation-for="Name" class="text-danger"></span>
        <hr />
        Email:
        <input asp-for="Email" />
        <span asp-validation-for="Email" class="text-danger"></span>
        <hr />
        <input type="submit" value="Submit" />
        <input type="reset" onclick="ResetFormWithJS();" />
    </form>
    <br>
</center>

控制器：

public class HomeController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Index(SampleViewModel Model)
    {
        if (!ModelState.IsValid)
        {
            return View("Index", Model);
        }

        return RedirectToAction("Index");
    }
}

型号

public class SampleViewModel
{
    [Required]
    public string Name { get; set; }
    [Required]
    public string Email { get; set; }
}

Answer 1

这里发生了什么？如何让所有字段始终重置，无论是否存在任何模型错误？此外，我希望模型错误在重置时也消失。

为达到要求，您可以尝试引用_ValidationScriptsPartial.cshtml 来支持客户端验证，这也有助于避免不必要的服务器往返。

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

测试结果

Answer 2

如果您正在寻找纯 JavaScript 解决方案，试试这个：

function ResetFormWithJS() {
    document.querySelector("[asp-for='Name']").value = "";
    document.querySelector("[asp-for='Email']").value = "";
}

或者使用 JQuery：

function ResetFormWithJS() {
    $("[asp-for='Name']").val("");
    $("[asp-for='Email']").val("");
}