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

问题描述

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

我是Razor页面的新手。

我使用上面的代码创建了一个基本应用程序。我创建了具有以下三个字段的注册表单-

1. 用户名
2. 用户电子邮件地址
3. 验证码

有两个按钮-

1. 发送代码
2. 注册

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

问题 当用户单击“发送代码”按钮时，将发送代码，但 表单数据将被清除，即“用户名”和“用户电子邮件地址”字段值将被清除 。我使用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调用后，剃刀页面中的表格数据仍被删除的原因是什么？

解决方法

当用户单击“发送代码”按钮时，将发送代码，但表单数据将被清除，即“用户名”和“用户电子邮件地址”字段值将被删除。

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

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

要解决此问题，您可以尝试为type="button"按钮明确指定btn1。

<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();
    //...