asp.net-mvc 客户端表单验证不适用于 MVC 中的模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23889819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Client form validation not working with modal dialog in MVC
提问by lawphotog
I am changing a create form to become a modal dialog and jquery Unobtrusive validation stops working and don't know how to fix it.
我正在将创建表单更改为模式对话框，而 jquery Unobtrusive 验证停止工作，不知道如何修复它。
Index.cshtml has a link to trigger a modal dialog.
Index.cshtml 有一个触发模态对话框的链接。
<a href="#" id="createCustomer">Create</a>
@section scripts{
<script type="text/javascript">
$('#createCustomer').on('click', function () {
$.get('/Customer/Create', function (data) {
$('#modalContainer').html(data);
$('#myModal').modal({});
});
});
Create.cshtml is a partial view.
Create.cshtml 是一个局部视图。
@model Demo.Web.Models.CustomerVm
@using (Html.BeginForm("Create", "Customer", FormMethod.Post, new { @id="createForm" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Customer</h4>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
On the controller there is an actionmethod which returns a partial view for create form.
在控制器上有一个 actionmethod，它返回创建表单的部分视图。
public ActionResult Create()
{
return PartialView("Create");
}
view modal
查看模态
public class CustomerVm
{
[Required]
public int Id { get; set; }
[Required]
public string Name { get; set; }
}
before i changed it to be a modal dialog .. everything was working but now i don't know how to fix it. How can i make validation work with dialog? Obviously, I don't want to rewrite validation rules on client script .. i want to get it working from view model .. thanks.
在我将其更改为模态对话框之前.. 一切正常，但现在我不知道如何修复它。如何使用对话框进行验证？显然，我不想在客户端脚本上重写验证规则..我想让它从视图模型中工作..谢谢。
回答by cadrell0
Because the form is not added to the page when the page loads, the unobtrusive validation will not pick it up. There are two ways to fix this.
因为页面加载时表单没有添加到页面中，所以不显眼的验证不会把它捡起来。有两种方法可以解决这个问题。
- Include the form on the page during the initial load. This will cause the form to be recognized and validation will occur. You can throw the partial view in a hidden div. Then your JavaScript will just show the modal dialog.
- Manually register the form with the unobtrusive validation after adding it to the page. Something like
$.validator.unobtrusive.parse("#id-of-the-form");
- 在初始加载期间在页面上包含表单。这将导致表单被识别并进行验证。您可以将局部视图扔到隐藏的 div 中。然后您的 JavaScript 将只显示模态对话框。
- 将表单添加到页面后，使用不显眼的验证手动注册表单。就像是
$.validator.unobtrusive.parse("#id-of-the-form");
回答by ComeIn
If you are loading the dialog dynamically just register the unobtrusive validation in the containing element's change event:
如果您正在动态加载对话框，只需在包含元素的更改事件中注册不显眼的验证：
$('#modal-container').change(
function() {
$.validator.unobtrusive.parse("#your-form-id");
});
回答by Sam
Just add the following scripts in your Create form view:
只需在您的创建表单视图中添加以下脚本：
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript">
</script>
回答by Sanjay
In partialview of create page -> modal-header, model-body, modal-footer and javascript code in the <script>your code </script>- don't put <script>your code</script>in @section Scripts{}and it will work.
在创建页面的部分视图中 -> modal-header、model-body、modal-footer 和 javascript 代码<script>your code </script>- 不要<script>your code</script>输入@section Scripts{}，它会起作用。
