10

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

4

2 回答 2

6

我想通了...您应该对结果和查询有部分看法。

如果失败，您应该返回“http bad request”并使用以下内容在搜索部分视图上设置验证。

这应该是这样的：

        @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);
    }
于 2013-05-22T07:13:07.000 回答
3

当您的模型状态无效并且您返回包含错误模型的视图时，服务器发送的响应的 http 状态为 200，表示请求成功。在这种情况下，ajax 表单执行您指示它执行的操作，即将返回的响应插入到部门 repostContent 中（您可以通过检查页面的第二次呈现是否在该 div 内完成来验证）。至于如何让 ajax 提交表单在显示验证消息方面与普通表单提交一样，我还没有找到一种简单直接的方法（也许有人可以在这里为我们指出一个 :)）。我通过以下方式解决了这个问题：

  1. 将部分视图中的表单呈现到主视图的 div (formDiv) 中。
  2. 在 ajax 表单上指定“OnFailure”，将响应文本插入到包含原始表单 (formDiv) 的 div 中
  3. 覆盖 OnActionExecuted（因为我有一个主控制器，我的所有其他控制器都继承自它只在一个地方完成）以检查请求 IsAjax 和 ModelState 是否无效，我将响应状态更改为 4xx。这会导致“OnFailure”被触发，将原始表单替换为 If(!ModelState.Isvalid) 分支中返回的表单。
于 2013-05-19T14:36:34.457 回答