0

我已经阅读了很多帖子，但无法解决我的问题。

我有一个视图，点击时有添加按钮，我正在显示部分视图，该部分视图有一个用于添加记录的表单，它不验证客户端。我正在使用 jquery 验证，并且我在打开部分视图的主视图中添加了 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>

我的观点：

 <div id="Div1">
   <a id="lnkAdd">
      <div>Add</div>
   </a>
 </div>

$("#lnkAdd").click(function () {
       $.ajax({
            url:  '@Url.Action("MethodName", "ControllerName")',
       type: "POST",
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
    }).done(function () {
    }).success(function (dv) {
        $("#Div1").html(dv);
    })
    });

控制器：

[Authorize]
    public PartialViewResult MethodName()
    {
        return PartialView("_PartialViewName");
    }

部分视图：

<div id="UsersDiv">

<div class="grid-background" style="border: 1px solid #8dc2f5;">

    @using (Html.BeginForm("AddRecord", "ControllerName"))
    {
      <div class="form-bg" style="border: 0px; margin-top: 0px; width: 966px;">
     <div class="form-field-bg">
      @Html.LabelFor(m => m.FirstName)
      @Html.TextBoxFor(m => m.FirstName, new { @class = "label-class" })
      @Html.ValidationMessageFor(m => m.FirstName, "", new { @class = "validation-class" })
    </div>

  <input type="submit" value="Save" id="btnSaveUsers" name="AddRecord" class="signup-button" />
     }

4

4 回答 4

2

验证器仅在触发 document.ready 事件时才连接，对于动态内容，您必须手动触发它们。

将您的成功处理程序更改为：

.success(function (dv) {
    $("#Div1").html(dv);

    $("form").data("validator", null);
    $.validator.unobtrusive.parse($("form"));
})
于 2013-06-20T08:17:27.310 回答
1

您可以在服务器端验证模型并在客户端附加错误 

 public PartialViewResult _CreateSupplier()
        {
            return PartialView(new Supplier());
        }

    [HttpPost]
    public JsonResult _CreateSupplier(Supplier model)
    {
    //Validation
    return Json(new
                    {
                        status = transactionStatus,
                        modelState = ModelState.GetModelErorrs()
                    }, JsonRequestBehavior.AllowGet);
    }

表单post jquery方法

$('#create-supplier').submit(function (e) {
    e.preventDefault();
    var $form = $(this);
    if (!ModelIsValid($form))
        return;
    AjaxPost($form.serialize(), '@Url.Action("_CreateSupplier")', function (result) {
        if (result.status == 0) {
            $form[0].reset();
            //Success
            var grid = $("#gridSupplier").data("kendoGrid");
            grid.dataSource.read();
        } else if (result.status == 1)
            AddFormErrors($form, result);
        else if (result.status == 2)
           //error;
    });
});

检查模型方法是否有效，如果无效，则向表单添加错误

function ModelIsValid(form) {
    var validator = $(form).validate(); // obtain validator
    var anyError = false;
    form.find("input").each(function () {
        if (!validator.element(this)) { // validate every input element inside this step
            anyError = true;
        }
    });

    if (anyError)
        return false; // exit if any error found    
    return true;
}

function AddFormErrors(form, errors) {
    for (var i = 0; i < errors.modelState.length; i++) {
        for (var j = 0; j < errors.modelState[i].errors.length; j++) {
            var val = $(form).find("[data-valmsg-for='" + errors.modelState[i].key + "']");
            if (val.html().length > 0) {
                $(form).find("[for='" + errors.modelState[i].key + "']").html(errors.modelState[i].errors[j]);
            } else {
                val.html('<span for="' + errors.modelState[i].key + '" generated="true" class="" style="">' + errors.modelState[i].errors[j] + '</span>');
            }
        }
    }
}

Ajax发布方法：

function AjaxPost(postData, url, callback) {
    $.ajax({
        url: url,
        type: 'POST',
        data: postData,
        dataType: 'json',
        success: function (result) {
            if (callback) callback(result);
        }
    });
}

最后一个检查返回模型状态错误的c#扩展方法

 public static IEnumerable<object> GetModelErorrs(this ModelStateDictionary modelState)
        {
            return modelState.Keys.Where(x => modelState[x].Errors.Count > 0)
                .Select(x => new {
                 key = x,
                 errors = modelState[x].Errors.Select(y => y.ErrorMessage).ToArray()
                });
        }
于 2013-06-20T08:34:43.447 回答
0

您是否包含了 jQuery 文件？

<script src="@Url.Content("~/Scripts/jquery-2.0.0.min.js")" type="text/javascript"></script>
于 2013-06-20T09:05:18.850 回答
0

我修复了在渲染部分后添加下面的代码

@Scripts.Render("~/bundles/jqueryval")
于 2015-08-03T20:13:28.590 回答