Ajax.BeginForm和验证 [英] Ajax.BeginForm and validation

问题描述

客户端验证不适用于Ajax.BeginForm

Client side validation is not working for me in 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页面中启用了验证:

And I enabled validation in the web.config page:

<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>

与第一期有关的第二期， 我的动作是

second issue related to the first one, my action is

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


        }

如果模型有效，则返回部分视图，页面看起来不错，否则返回主视图，其形式为，但是在此页面中，它两次自我渲染.问题是，如果客户端验证失败，如何返回带有验证错误的主表单?

If the model is valid I return a partial view and the page looks fine , otherwise I return the main view , with the form , but in this the page renders it self twice. the question is, in case the client validation fails,how to return the main form with the validation errors ?

任何帮助，我们将不胜感激， 10倍Rony

Any help would be appreciated, 10x Rony

推荐答案

我知道了... 您应该对结果和查询有部分看法.

I figured it out... you should have partial view on the result and on the query.

，如果失败，您应该返回"http错误请求"，并使用以下内容在搜索局部视图上设置验证.

and on failure you should return "http bad request" and use the following to set the validation on the search partial view.

这是它的外观:

        @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>

，在服务器上，它应该像这样:

and on the server it should look like:

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

这篇关于Ajax.BeginForm和验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！