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

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

我不熟悉剃须刀页面

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

用户名

用户电子邮件地址

验证码

有两个按钮-

发送代码

登记册

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

问题 当用户单击“发送代码”按钮时，代码被发送，但表单数据被清除，即“用户名”和“用户电子邮件地址”字段值被删除。我使用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>
}

问题：即使在使用Ajax调用后，razor页面表单数据也会被擦除的原因是什么

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

或者调用

preventDefault（）

方法来阻止它提交表单

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

---

您对表单输入使用了太多的标记。请从Razor pages应用程序的一个教程应用程序开始。

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

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

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