ASP.NET Core 5 MVC：在模态窗口之前验证表单
Posted
技术标签:
【中文标题】ASP.NET Core 5 MVC：在模态窗口之前验证表单【英文标题】：ASP.NET Core 5 MVC : validate form before modal window 【发布时间】：2022-01-22 06:01:31 【问题描述】：我正在开发一个 ASP.NET Core 5 MVC 应用程序，并且我有一个带有验证和提交按钮的表单。我在单击提交时显示一个 jQuery UI 模态窗口。我希望在显示模态窗口之前触发验证。
它在不触发验证的情况下显示模式窗口。请在下面找到我的代码。
@using (html.BeginForm("NewUser", "Login"))
@Html.AntiForgeryToken()
<div style="margin: auto; border-radius: 15px; border:solid; padding: 15px; width: 35%;">
<table>
<tr><td colspan="2" align="center"><span style="color:green; font-weight:bold;">@ViewBag.Result</span></td></tr>
<tr><td colspan="2" align="center">@Html.ValidationSummary(true, "", new @class = "text-danger" )</td></tr>
<tr>
<td colspan="2" align="center">Sign Up<br /><h1>Let's get started.</h1>Fill out the basic information below to set up your account.</td>
</tr>
<tr>
<td colspan="2">
<b>@Html.LabelFor(model => model.PreferredName, htmlAttributes: new @class = "control-label" )</b><br />
Enter your preferred Name (First and Last)<br />
@Html.TextBoxFor(model => model.PreferredName, new @class = "form-control", autocomplete = "off", size = "50", placeholder = "Preferred Name" )
@Html.ValidationMessageFor(model => model.PreferredName, "", new @class = "text-danger" )
</td>
</tr>
<tr>
<td colspan="2">
<b>@Html.LabelFor(model => model.PersonalEmail, htmlAttributes: new @class = "control-label" )</b><br />
Enter your contact details (only one is required)<br />
@Html.TextBoxFor(model => model.PersonalEmail, new @class = "form-control", autocomplete = "off", size = "50", placeholder = "Email", type = "email" )
@Html.ValidationMessageFor(model => model.PersonalEmail, "", new @class = "text-danger" )
</td>
<tr>
<td>
@Html.DropDownListFor(model => model.CountryCode, new List<SelectListItem>
new SelectListItem() Text = "US (+1)", Value ="+1",
new SelectListItem() Text = "IN (+91)", Value ="+91"
, null, new @class = "form-control", style = "width: 120px;" )
</td>
<td>
@Html.TextBoxFor(model => model.Phone, new @class = "form-control", autocomplete = "off", style = "width: 310px;", placeholder = "Phone Number" )
</td>
</tr>
<tr>
<td colspan="2">
@Html.CheckBoxFor(model => model.IsTextORCallingOk, new @class = "form-check-input" ) This number can receive texts
@Html.ValidationMessageFor(model => model.Phone, "", new @class = "text-danger" )
</td>
</tr>
<tr>
<td colspan="2">
<b>@Html.LabelFor(model => model.UserName, htmlAttributes: new @class = "control-label" )</b><br />
Enter your preferred username (min 3 characters)<br />
@Html.TextBoxFor(model => model.UserName, new @class = "form-control", autocomplete = "off", size = "50", placeholder = "Preferred Username" )
@Html.ValidationMessageFor(model => model.UserName, "", new @class = "text-danger" )
</td>
</tr>
<tr>
<td colspan="2">
<b>@Html.LabelFor(model => model.Password, htmlAttributes: new @class = "control-label" )</b><br />
Enter an account password<br />
@Html.PasswordFor(model => model.Password, new @class = "form-control", autocomplete = "off", size = "50", placeholder = "Password" )
@Html.ValidationMessageFor(model => model.Password, "", new @class = "text-danger" )<br />
@Html.PasswordFor(model => model.ConfirmPassword, new @class = "form-control", autocomplete = "off", size = "50", placeholder = "Confirm Password" )
@Html.ValidationMessageFor(model => model.ConfirmPassword, "", new @class = "text-danger" )
</td>
</tr>
<tr>
<td colspan="2">
<b>@Html.LabelFor(model => model.TimeZone, htmlAttributes: new @class = "control-label" )</b><br />
Select your locations timezone<br />
@Html.DropDownListFor(model => model.TimeZone, new List<SelectListItem>
new SelectListItem() Text = "UTC - 08:00", Value ="UTC - 08:00", Selected = true
, null, new @class = "form-control", style = "width: 400px;" )
</td>
</tr>
<tr>
<td colspan="2">
<b>@Html.LabelFor(model => model.Currency, htmlAttributes: new @class = "control-label" )</b><br />
Select your preferred currency<br />
@Html.DropDownListFor(model => model.Currency, new List<SelectListItem>
new SelectListItem() Text = "USD - $", Value ="USD", Selected = true
, null, new @class = "form-control", style = "width: 400px;" )
</td>
</tr>
<tr>
<td colspan="2">
<b>@Html.LabelFor(model => model.Temperature, htmlAttributes: new @class = "control-label" )</b><br />
Select your preferred unit of temparature measurement<br />
@Html.DropDownListFor(model => model.Temperature, new List<SelectListItem>
new SelectListItem() Text = "Fahrenheit (F)", Value ="Fahrenheit", Selected = true,
new SelectListItem() Text = "Celcius (C)", Value="Celcius"
, null, new @class = "form-control", style = "width: 400px;" )
</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td align="left"><button id="btnSignUp" class="btn btn-default" style="background-color:black; color: white; font-size: large;" type="button">Sign Up</button></td>
<td align="right"><a href="/">Cancel</a></td>
</tr>
<tr><td colspan="2" align="left">* Denotes a required field</td></tr>
</table>
</div>
<div style="margin: auto; width: 35%;">
<table style="width:100%;">
<tr><td align="left">Have an account? <a href="#">Sign In</a></td><td align="right">Have an Join Code? <a href="#">Use Join Code</a></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2" align="center"><a href="#">Privacy Policy</a> <a href="#">Terms of Use</a> <a href="#">Contact Support</a></td></tr>
</table>
</div>
<div id="dialog-form" style="margin: auto; border-radius: 15px; border:solid; padding: 15px; width: 40%;">
<table>
<tr><td><h1>Terms of Use</h1></td></tr>
<tr>
<td>
By creating an account, I accept Lorem ipsum dolor sit amet. Qui soluta natus non recusandae repellendus et ducimus ipsa. Ea dolorem cumque et facilis quidem aut corporis iusto aut quis architecto.
Aut quia deserunt ea veritatis laborum ut nostrum ratione et sint sequi aut totam reprehenderit. Ut neque sapiente ab voluptatem quaerat cum tempore enim est quia eaque. Et earum magni ut quas internos non voluptas quia 33 animi labore non doloremque reprehenderit in ipsam unde. In ipsa cupiditate non nesciunt voluptatem ut accusamus corrupti.
</td>
</tr>
<tr>
<td>
<div style="margin: auto; border-radius: 15px; border:solid; padding: 15px; overflow:scroll; height:200px;">
<h3>1.Overview</h3>Welcome to Lorem ipsum dolor sit amet. Qui soluta natus non recusandae repellendus et ducimus ipsa. Ea dolorem cumque et facilis quidem aut corporis iusto aut quis architecto.
Aut quia deserunt ea veritatis laborum ut nostrum ratione et sint sequi aut totam reprehenderit. Ut neque sapiente ab voluptatem quaerat cum tempore enim est quia eaque. Et earum magni ut quas internos non voluptas quia 33 animi labore non doloremque reprehenderit in ipsam unde. In ipsa cupiditate non nesciunt voluptatem ut accusamus corrupti.
</div>
</td>
</tr>
<tr><td> </td></tr>
<tr><td><input id="chkTerms" type="checkbox" /> I have read and understood the terms...</td></tr>
@*<tr><td align="left"><input type="button" value="Agree & Continue" disabled /></td><td align="right"><a href="#">Cancel</a></td></tr>*@
</table>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.0/jquery-ui.min.js"></script>
var dialog = $("#dialog-form").dialog(
autoOpen: false,
height: 650,
width: 500,
modal: true,
buttons:
"Agree & Continue": submitParentForm,
Cancel: function ()
dialog.dialog("close");
,
close: function ()
);
$("#btnSignUp").button().on("click", function ()
dialog.dialog("open");
);
【问题讨论】：
嗨@Mohan Raju，你能显示你的视图代码吗？ 【参考方案1】：@using (Html.BeginForm("NewUser", "Login"))
@Html.AntiForgeryToken()
<div style="margin: auto; border-radius: 15px; border:solid; padding: 15px; width: 35%;">
//change `table` to `form` and add Id
<form id="ssss">
......
<td align="left"><button id="btnSignUp" class="btn btn-default" style="background-color:black; color: white; font-size: large;" type="button">Sign Up</button></td>
......
</form>
</div>
......
@section Scripts
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.0/jquery-ui.min.js"></script>
<script>
var dialog = $("#dialog-form").dialog(
autoOpen: false,
height: 650,
width: 500,
modal: true,
buttons:
"Agree & Continue": submitParentForm,
Cancel: function ()
dialog.dialog("close");
,
close: function ()
);
$("#btnSignUp").click(function()
var validator = $("#ssss").validate();
var flag = validator.form();
if(flag)
dialog.dialog("open");
);
function submitParentForm()
</script>
【讨论】：
我已经添加了这些。它仍然在点击时显示弹出窗口，而不是验证表单。 您能提供您的查看代码吗？ 已更新视图。 嗨@MohanRaju，我已经更新了我的答案，您可以根据我的答案对您的代码进行一些更改。以上是关于ASP.NET Core 5 MVC：在模态窗口之前验证表单的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 asp.net core mvc 在引导模式中加载 AngularJS 代码
模态视图重新加载内容 (Bootstrap MVC ASP.NET)