客户端验证在Ajax.BeginForm中对我不起作用
这是我的代码：
<div id="report">
<div id="projectReport">
<div >
@{
Html.EnableClientValidation();
}
@using (Ajax.BeginForm("AnalyticsDates",new AjaxOptions
{
InsertionMode = InsertionMode.Replace,UpdateTargetId = "reportContent"
}))
{
@Html.LabelFor(m => m.StartDate)
@Html.TextBoxFor(m => m.StartDate,new { id = "start" })
@Html.ValidationMessageFor(model => model.StartDate)
@Html.LabelFor(m => m.EndDate)
@Html.TextBoxFor(m => m.EndDate,new { id = "end" })
@Html.ValidationMessageFor(model => model.EndDate)
<input id="btnsearch" type="submit" value=@Titles.Search class="iconHeader"/>
}
</div>
</div>
<div id="reportContent">
</div>
</div>
我在web.config页面中启用了验证：
<add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
第二个问题与第一个相关,
我的行动是
[HttpPost]
[Authorize(Roles = "XXXReport")]
public async Task<ActionResult> AnalyticsDates(ReportRequestVM reportRequestVM)
{
if (!ModelState.IsValid)
{
return View("**MainReports**",reportRequestVM);
}
// fill reportRequestVM with data
return View("**PartialReport**",reportRequestVM);
}
如果模型有效,我返回一个局部视图,页面看起来很好,否则我返回主视图,使用表单,但在此页面呈现自己两次.问题是,如果客户端验证失败,如何返回带有验证错误的主窗体？
任何帮助,将不胜感激,
10x Rony
解决方法
我想到了…
你应该对结果和查询有部分的看法.
你应该对结果和查询有部分的看法.
如果失败,您应该返回“http错误请求”并使用以下内容在搜索部分视图上设置验证.
这是它应该看起来的样子：
@using (Ajax.BeginForm("CloudAnalyticsDates",new AjaxOptions
{
InsertionMode = InsertionMode.Replace,UpdateTargetId = "reportContent",OnFailure = "OnCloudAnalyticsFailure",OnBegin = "ValidateForm",}))
{
@Html.LabelFor(m => m.StartDate)
@Html.TextBoxFor(m => m.StartDate,new { id = "start" })
@Html.ValidationMessageFor(model => model.StartDate)
@Html.LabelFor(m => m.EndDate)
@Html.TextBoxFor(m => m.EndDate,new { id = "end" })
@Html.ValidationMessageFor(model => model.EndDate)
<input id="btnsearch" type="submit" value=@Titles.Search class="iconHeader"/>
}
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#datePicker").kendoDatePicker();
$("#start").kendoDatePicker().data("kendoDatePicker");
$("#end").kendoDatePicker().data("kendoDatePicker");
});
function OnCloudAnalyticsFailure(parameters) {
$('#projectReport').html(parameters.responseText);
$('#reportContent').empty();
CleanValidationError('form');
}
</script>
并在服务器上它应该看起来像：
[HttpPost]
public async Task<ActionResult> CloudAnalyticsDates(ReportRequestVM reportRequestVM)
{
if (!ModelState.IsValid)
{
Response.StatusCode = (int)HttpStatusCode.BadRequest;
return PartialView("_ReportQuery",reportRequestVM);
}
reportRequestVM.BomTotals = await CommonRequestsHelper.GetBomTotalAnalytics(bomTotalRequest);
return PartialView("_ProjectReport",reportRequestVM);
}
