asp.net-mvc – Ajax.BeginForm和验证

客户端验证在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" />

并添加了js文件

<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);
    }