我有一个问题,当提交表单时,它应该在有效时触发模式,如果无效,则应该触发验证脚本。我尝试在论坛中寻找答案,并遇到了一个类似于我的problem。但不幸的是,该模式仍然不会弹出。
我想发生的事情是,当用户单击“提交”按钮时,将运行验证,并且如果所有数据均有效,则将触发弹出模式,如果无效,则验证将像{{3 }}。
模型
public class Reg
{
[Required(ErrorMessage = "Please enter first name")]
public string Firstname { get; set; }
[Required(ErrorMessage = "Please enter MiddleInitial")]
public string MiddleInitial { get; set; }
[Required(ErrorMessage = "Please enter Surname")]
public string Surname { get; set; }
}
CONTROLLER
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Reg reg)
{
return View();
}
查看
@model WebApplication1.Models.Reg
<div class="col-lg-offset-4 col-lg-12">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(model => model.Firstname, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.Firstname) } })
@Html.ValidationMessageFor(model => model.Firstname, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.MiddleInitial, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.MiddleInitial, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.MiddleInitial) } })
@Html.ValidationMessageFor(model => model.MiddleInitial, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Surname, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.Surname) } })
@Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
}
</div>
<div id="modals" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
@Html.Partial("CedulaPartial")
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Submit" class="btn btn-success" />
</div>
</div>
</div>
</div>
JQUERY
<script type="text/javascript">
$('form').submit(function () {
if ($(this).valid()) {
$('#modals').modal('show');
}
});
我也尝试过
$('#myModal').modal("show");
$('#myModal').dialog('open');
$('#myModal').modal();
$('#myModal').show();
$('#myModal').modal('toggle');
但仍然没有运气。
谢谢。
答案 0 :(得分:0)
更新
修改脚本后,发生的事情是无法单击表单。我认为模态正在触发,但没有模态显示。输出如下:
https://media.giphy.com/media/61Z50T2JEpN1Zrk8hZ/giphy.gif
在遇到this之前,我尝试在课堂上删除fade
命令,现在显示模式。我目前正在使用Bootstrap v3.0.0,并且fade命令在此处存在错误。感谢您的支持!