在视图中不使用 BeginForm 验证多个分部视图
Validate multiple Partial view without BeginForm in a View
我有一个 View (Index.cshtml)
它有两个模态(Bootstrap 模态)。
我在每个modal
里加载了一个Partial View
。所以在这个 View
中,我有两个 Partial Views
(AddContractHistory.cshtml
和 AddCompany.cshtml
)。
我有一个模型,它的字段应该在每个 Partial Views
中进行验证。
我需要分别验证每个局部视图。
在同一个问题中,使用了 Html.BeginForm
但我在 MVC
模块和 DNN 8 上工作 Html.BeginForm
或 Ajax.Html.BeginForm
不受支持。
为了在没有 BeginForm
的情况下完成这项工作,我测试了下面的许多方法,但我无法正确完成。
ASP.NET MVC Validation Groups?
ASP.NET MVC Multiple form in one page: Validation doesn't work
Index.cshtml(查看)
@using MyProject.BusinessLogic
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-success" onclick="$('#AddContractHistory').modal('show');">
<i class="fa fa-plus"></i>
New ContractHistory
</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-success" onclick="$('#AddCompany').modal('show');">
<i class="fa fa-plus"></i>
New Company
</button>
</div>
</div>
<div id="AddContractHistory" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" id="mymodal">
@Html.Partial("AddContractHistory", new ContractHistory())
</div>
</div>
<div id="AddCompany" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" id="mymodal">
@Html.Partial("AddCompany", new Company())
</div>
</div>
AddContractHistory.cshtml(局部视图)
@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.ContractHistory>
<div id="myform">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">contract</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="panel-body">
<div class="form-horizontal">
@Html.ValidationSummary()
@Html.HiddenFor(c => c.ID)
<div class="form-group">
<div class="col-sm-6">
@Html.LabelFor(c => c.PlaceName)
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</span>
@Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
</div>
</div>
<div class="col-sm-6">
@Html.LabelFor(c => c.ActivityDescription)
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</span>
@Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" formaction="AddContractHistory">
submit
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
AddCompany.cshtml(局部视图)
@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.Company>
<div id="myform">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Company</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="panel-body">
<div class="form-horizontal">
@Html.ValidationSummary()
@Html.HiddenFor(c => c.ID)
<div class="form-group">
<div class="col-sm-6">
@Html.LabelFor(c => c.PlaceName)
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</span>
@Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
</div>
</div>
<div class="col-sm-6">
@Html.LabelFor(c => c.ActivityDescription)
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</span>
@Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" formaction="AddCompany">
submit
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
提前致谢!
总的来说,我建议您在您的视图中集成更多的 JS 代码 (JQuery ?)。通过这种方式,您将不受某些不支持您习惯的基本 MVC 功能的框架 (DNN) 的限制。毕竟 - 一个网络应用程序归结为 HTML+JS+CSS,所以你对 JS 的了解越多 - 你获得的控制力和灵活性就越好。
关于你的问题,MVC注入JS代码为你处理提交时的验证错误。你可以自己模仿这种行为。这将花费您一些时间,但您将完全控制此过程。
当页面加载(JS 事件)时,您可以通过 JS 完成一些工作,比如用您想要的 <form>
标记包装您的部分视图,and/or 绑定到提交事件。
就如此容易。
但是常规表单提交会刷新您的页面,从而丢失其他部分视图 data/state。因此,如果您需要,您可以通过 AJAX(再次 JQuery?)post/get 您的数据并相应地更新您的页面。
<form data-reza-ajaxform="true"
data-reza-targetId="#your-htmlcontrol-id"
action="@Url.Action("Your Action")"
method="POST/GET">
<div class="input-group">
<input type="text" ...>
...
<button class="btn btn-default" type="submit">Go!</button>
</div>
</form>
然后,在您的脚本中,您可以执行如下操作:
$('form[data-reza-ajaxform]').on('submit', submitAjaxForm);
...
function submitAjaxForm(e) {
var $form = $(this);
var options = {
url: $form.action,
method: $form.method,
data: $form.serialize()
};
$.ajax(options)
.success(function(res) {
var $target = $($form.attr('data-reza-targetId'));
$target.html(res);
$target.effect('highlight', 'slow');
});
e.preventDefault();
}
通过这种方式,您将获得对您的页面及其部分的完全控制。无论您将使用哪个框架。什么可以更好? :)
您可以用另一种方式实现 Html.BeginForm
,Dotnetnuke
不支持它。
1。更改您的按钮属性
您应该更改 buttons
,这会导致将数据发布到操作,如下所示:
<button id="btnAddContractHistory" type="button" class="btn btn-success">
submit
</button>
<button id="btnAddCompany" type="submit" class="btn btn-success">
submit
</button>
2。添加事件点击按钮
两次点击事件要求提供数据以执行所需的操作。在此事件中,url
、action
属性 form
不同,由您的 url
更改,之后 form.submit()
导致将数据(模型)传递给相关行动。最后,您将在两个不同的操作中验证属性值。
<script>
$('.modal').find('#btnAddContractHistory').on('click', function () {
var url = 'AddContractHistory action url'; // It depends on your AddContractHistory action url
var form = $(this).closest('form');
form.prop('action', url);
form.submit();
});
$('.modal').find('#btnAddCompany').on('click', function () {
var url = 'AddCompany action url'; // It depends on your AddCompany action url
var form = $(this).closest('form');
form.prop('action', url);
form.submit();
});
</script>
我有一个 View (Index.cshtml)
它有两个模态(Bootstrap 模态)。
我在每个modal
里加载了一个Partial View
。所以在这个 View
中,我有两个 Partial Views
(AddContractHistory.cshtml
和 AddCompany.cshtml
)。
我有一个模型,它的字段应该在每个 Partial Views
中进行验证。
我需要分别验证每个局部视图。
在同一个问题中,使用了 Html.BeginForm
但我在 MVC
模块和 DNN 8 上工作 Html.BeginForm
或 Ajax.Html.BeginForm
不受支持。
为了在没有 BeginForm
的情况下完成这项工作,我测试了下面的许多方法,但我无法正确完成。
ASP.NET MVC Validation Groups?
ASP.NET MVC Multiple form in one page: Validation doesn't work
Index.cshtml(查看)
@using MyProject.BusinessLogic
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-success" onclick="$('#AddContractHistory').modal('show');">
<i class="fa fa-plus"></i>
New ContractHistory
</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-success" onclick="$('#AddCompany').modal('show');">
<i class="fa fa-plus"></i>
New Company
</button>
</div>
</div>
<div id="AddContractHistory" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" id="mymodal">
@Html.Partial("AddContractHistory", new ContractHistory())
</div>
</div>
<div id="AddCompany" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" id="mymodal">
@Html.Partial("AddCompany", new Company())
</div>
</div>
AddContractHistory.cshtml(局部视图)
@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.ContractHistory>
<div id="myform">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">contract</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="panel-body">
<div class="form-horizontal">
@Html.ValidationSummary()
@Html.HiddenFor(c => c.ID)
<div class="form-group">
<div class="col-sm-6">
@Html.LabelFor(c => c.PlaceName)
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</span>
@Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
</div>
</div>
<div class="col-sm-6">
@Html.LabelFor(c => c.ActivityDescription)
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</span>
@Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" formaction="AddContractHistory">
submit
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
AddCompany.cshtml(局部视图)
@inherits DotNetNuke.Web.Mvc.Framework.DnnWebViewPage<MyProject.BusinessLogic.Company>
<div id="myform">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Company</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="panel-body">
<div class="form-horizontal">
@Html.ValidationSummary()
@Html.HiddenFor(c => c.ID)
<div class="form-group">
<div class="col-sm-6">
@Html.LabelFor(c => c.PlaceName)
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</span>
@Html.EditorFor(c => c.PlaceName, new { htmlAttributes = new { @class = "form-control requierd-field" } })
</div>
</div>
<div class="col-sm-6">
@Html.LabelFor(c => c.ActivityDescription)
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</span>
@Html.EditorFor(c => c.ActivityDescription, new { htmlAttributes = new { @class = "form-control requierd-field" } })
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" formaction="AddCompany">
submit
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
提前致谢!
总的来说,我建议您在您的视图中集成更多的 JS 代码 (JQuery ?)。通过这种方式,您将不受某些不支持您习惯的基本 MVC 功能的框架 (DNN) 的限制。毕竟 - 一个网络应用程序归结为 HTML+JS+CSS,所以你对 JS 的了解越多 - 你获得的控制力和灵活性就越好。
关于你的问题,MVC注入JS代码为你处理提交时的验证错误。你可以自己模仿这种行为。这将花费您一些时间,但您将完全控制此过程。
当页面加载(JS 事件)时,您可以通过 JS 完成一些工作,比如用您想要的 <form>
标记包装您的部分视图,and/or 绑定到提交事件。
就如此容易。
但是常规表单提交会刷新您的页面,从而丢失其他部分视图 data/state。因此,如果您需要,您可以通过 AJAX(再次 JQuery?)post/get 您的数据并相应地更新您的页面。
<form data-reza-ajaxform="true"
data-reza-targetId="#your-htmlcontrol-id"
action="@Url.Action("Your Action")"
method="POST/GET">
<div class="input-group">
<input type="text" ...>
...
<button class="btn btn-default" type="submit">Go!</button>
</div>
</form>
然后,在您的脚本中,您可以执行如下操作:
$('form[data-reza-ajaxform]').on('submit', submitAjaxForm);
...
function submitAjaxForm(e) {
var $form = $(this);
var options = {
url: $form.action,
method: $form.method,
data: $form.serialize()
};
$.ajax(options)
.success(function(res) {
var $target = $($form.attr('data-reza-targetId'));
$target.html(res);
$target.effect('highlight', 'slow');
});
e.preventDefault();
}
通过这种方式,您将获得对您的页面及其部分的完全控制。无论您将使用哪个框架。什么可以更好? :)
您可以用另一种方式实现 Html.BeginForm
,Dotnetnuke
不支持它。
1。更改您的按钮属性
您应该更改 buttons
,这会导致将数据发布到操作,如下所示:
<button id="btnAddContractHistory" type="button" class="btn btn-success">
submit
</button>
<button id="btnAddCompany" type="submit" class="btn btn-success">
submit
</button>
2。添加事件点击按钮
两次点击事件要求提供数据以执行所需的操作。在此事件中,url
、action
属性 form
不同,由您的 url
更改,之后 form.submit()
导致将数据(模型)传递给相关行动。最后,您将在两个不同的操作中验证属性值。
<script>
$('.modal').find('#btnAddContractHistory').on('click', function () {
var url = 'AddContractHistory action url'; // It depends on your AddContractHistory action url
var form = $(this).closest('form');
form.prop('action', url);
form.submit();
});
$('.modal').find('#btnAddCompany').on('click', function () {
var url = 'AddCompany action url'; // It depends on your AddCompany action url
var form = $(this).closest('form');
form.prop('action', url);
form.submit();
});
</script>