ASP.NET Core 3.1 Razor Pages Web 应用程序：即使在使用 Ajax 调用后，razor 页面表单数据被删除的原因是什么？

Question

我正在使用 ASP.NET Core 3.1 MVC 和 Razor 页面构建 Web 应用程序。

我是 Razor 页面的新手。

我使用上面的方法创建了一个基本应用程序。我创建了一个包含以下三个字段的注册表单 -

用户名
用户电子邮件地址
验证码

有两个按钮 -

发送代码
注册

我提供了一项功能，用户可以在单击“注册”按钮之前验证其电子邮件地址。当用户单击“发送代码”按钮时，验证码将发送到用户的电子邮件地址。然后，用户应在“验证码”字段中输入代码，然后单击“注册”按钮提交表单。

问题当用户点击“发送代码”按钮时，代码被发送但 表单数据被清除，即“用户名”和“用户电子邮件地址”字段值被删除。我用Ajax调用了“发送验证码”功能。以下是代码-

Index.cshtml

<form class="form-horizontal" method="post">

    <div class="form-row">
        <label class="col-sm-2 control-label">Credentials</label>
    </div>

    <div class="form-group row">
        <label asp-for="user.UserName" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input type="text" asp-for="user.UserName" class="form-control" id="UserName"
                   name="UserName" placeholder="Enter Full Name"
                   value="">
        </div>
    </div>

    <div class="form-group row">
        <label asp-for="user.UserEmailAddress" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input type="text" asp-for="user.UserEmailAddress" class="form-control" 
                    value=""
                   name="UserEmailAddress" placeholder="Enter Email Address" id="UserEmailAddress">
            <div class="form-inline">
                <button id="btn1"
                        class="btn btn-primary mb-sm-1">
                    @Model.EmailVerifCodeLabel
                </button>
                <div id="grid" class="col">
                    <input type="text" asp-for="user.EmailVerifCode"
                           class="form-control" id="Emailverifcode" placeholder="Enter code">
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Register</button>
        </div>
    </div>
</form>

@section Scripts {
    <script type="text/javascript">
        $("#btn1").click(function () {
            var UserName = $("#UserName").val();
            var UserEmailAddress = $("#UserEmailAddress").val();
            alert(UserName);
            alert(UserEmailAddress);
        $.ajax({
            url: "@Url.Page("/Register")?handler=SendEmailVerificationCode",
            method: "GET",
            data: { UserName: UserName, UserEmailAddress: UserEmailAddress }
        })
    });
    </script>
}

Index.cshtml.cs

       public JsonResult  OnGetSendEmailVerificationCode(string UserName, string UserEmailAddress)
        {
                Random generator = new Random();
                String verifCode = generator.Next(0, 999999).ToString("D6");
_configuration.GetSection("ConnectionStrings").GetSection("DefaultConnection").Value;
                HttpContext.Session.SetString("verifCode", verifCode);
                _myemailSender = new EmailSender();
                var emailresult = _myemailSender.SendEmailAsync(UserName, UserEmailAddress, verifCode, _configuration);
         
            return null;
        }

问题：使用 Ajax 调用后，razor 页面表单数据被删除的原因是什么？

Answer 1

When user clicks on the "Send Code" button, the code is send but the form data gets cleared i.e. "User name" and "User email address" fields values get erased.

<button id="btn1" class="btn btn-primary mb-sm-1"> Model.EmailVerifCodeLabel</button>

您没有在 <form> 中为上面的 <button> 标签指定 type 属性，它将用作提交按钮，这会导致表单提交和用户输入被清除。

要修复它，您可以尝试为 btn1 按钮明确指定 type="button"。

<button id="btn1" type="button"
        class="btn btn-primary mb-sm-1">
    @Model.EmailVerifCodeLabel
</button>

或者调用preventDefault()方法来阻止它提交表单。

$("#btn1").click(function (evt) {
    evt.preventDefault();
    var UserName = $("#UserName").val();
    //...

ASP.NET Core 3.1 Razor Pages Web 应用程序：即使在使用 Ajax 调用后，razor 页面表单数据被删除的原因是什么？

ASP.NET Core 3.1 Razor Pages Web App: What is the reason for the razor pages form data getting erased even after using Ajax call?

ajax

asp.net-mvc

asp.net-ajax

asp.net-core

razor-pages