我正在使用带有aspx视图引擎的MVC 2。
在一个局部视图中，我使用“bootstrap-modal.js”打开一个模态弹出窗口。
在客户端验证不起作用。
当我渲染我的视图时，如“＆lt;％Html.RenderPartial（”Myview“）;％＆gt;”和＆lt;％Html.RenderAction（“Myview”）; ％GT; ，客户端验证工作正常。但是，当我动态地使用jquery加载我的局部视图时，它无法正常工作。
我阅读了以下讨论并按照指南申请，但没有成功。
https://stackoverflow.com/a/9324173/1752787
Unobtrusive validation doesn't work with Ajax.BeginForm
http://forums.asp.net/t/1716864.aspx/1
我的小错误是什么？
我的主要观点：
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<link href="../../Content/BoroTheame/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/bootstrap-responsive.min.css" rel="stylesheet"
type="text/css" />
<link href="../../Content/BoroTheame/colorbox.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/fullcalendar_beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/datatables_beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/TableTools.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/ModelPopupcss.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-modal.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-modalmanager.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.debug.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<%--<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>--%>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function loadPartialViewForManageUser() {
// alert('ajax..');
$.ajax({
type: "POST",
cache: false,
url: 'Home/test',
success: function (html) {
$("#divContactInfo").html(html);
$.validator.unobtrusive.parse($("#divContactInfo"));
// var form = $("#divContactInfo").closest("form");
// form.removeData('validator');
// form.removeData('unobtrusiveValidation');
// $.validator.unobtrusive.parse(form);
},
error: function (e, args) {
}
});
return false;
}
</script>
<h2>
<%: ViewData["Message"] %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal" onclick="return loadPartialViewForManageUser();">
Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Modal header</h3>
</div>
<div class="modal-body">
<p>
One fine body…</p>
<%-- <% Html.RenderPartial("test"); %>--%>
<div id="divContactInfo">
<%--<% Html.RenderAction("test"); %>--%>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
我的部分观点：
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DataAnnotation.Models.TestDA>" %>
<script type="text/javascript">
// $.validator.unobtrusive.parse("form");
// $.validator.unobtrusive.parse(document);
var onSuccess = function (divContactInfo) {
// enable unobtrusive validation for the contents
// that was injected into the <div id="result"></div> node
//$.validator.unobtrusive.parse($(divContactInfo));
// var form = $('#testform')
// .removeData("validator") /* added by the raw jquery.validate plugin */
// .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin */
// $.validator.unobtrusive.parse(form);
};
</script>
<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("Index", "Home", new AjaxOptions
{
OnBegin = "onSuccess",
UpdateTargetId = "divContactInfo"
}, new { @id = "testform" }))
{%>
<%: Html.ValidationSummary(true)%>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.name)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.name)%>
<%: Html.ValidationMessageFor(model => model.name)%>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
这是我的控制器：
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
[HttpPost]
public ActionResult Index(TestDA model)
{
if (ModelState.IsValid)
{
}
else
{
}
return View("test", model);
}
public ActionResult test()
{
return PartialView("test");
}
}
这是我的模特：
public class TestDA
{
[Required]
[DisplayName("Your Name")]
public string name { get; set; }
}
答案 0 :(得分：0)
我通过添加以下脚本博客来解决它：
<script type="text/javascript">
Sys.Mvc.FormContext._Application_Load();
$("#form0").submit(function (e) {
if (!Sys.Mvc.FormContext.getValidationForForm(this).validate('submit').length) {
$.post("/ManageUser/SaveContactInfo", $(this).serialize(), function (data) {
$("#divContactInfo").html(data);
});
}
e.preventDefault();
});
</script>
欲了解更多信息，请阅读：