如何解决ASP.NET Core 3.1 Razor Pages Web应用程序:即使使用Ajax调用后,仍然删除了Razor Pages表单数据的原因是什么?
我正在使用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调用后,剃刀页面中的表格数据仍被删除的原因是什么?
解决方法
当用户单击“发送代码”按钮时,将发送代码,但表单数据将被清除,即“用户名”和“用户电子邮件地址”字段值将被删除。
<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();
//...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。