asp.net 如何在显示模态框的同时触发OnClick事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了asp.net 如何在显示模态框的同时触发OnClick事件相关的知识，希望对你有一定的参考价值。
代码如下：
<asp:LinkButton ID="Test" runat="server" OnClientClick="getdata(Hidden.value)">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true" style="cursor: pointer; margin-left: 10px" title="Detail" data-toggle="modal" data-target="#employeeModal" ></span>
</asp:LinkButton>
直接触发模态框，后台的事件不被调用，怎么解决？
还有一种就是用服务器控件，写两个事件，一个js事件 一个后台事件 参考技术A 1.确保onclick与Button控件绑定了；2.看下判断条件出问题没追问
不加模态框：
能进OnClick；
ASP.NET Core 5 MVC：在模态窗口之前验证表单
【中文标题】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 如何在显示模态框的同时触发OnClick事件的主要内容，如果未能解决你的问题，请参考以下文章
python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件