使用 jquery 进行 asp.net mvc 远程验证

Question

我需要帮助。 我有一个用户注册表单，我必须将“客户”与用户映射。

现在我想验证来自另一个来源的用户“客户”，我将“客户”放在选择列表中“客户”超过 2000，这就是我使用 JQuery Chosen 插件在选择列表中搜索的原因 但是“客户”字段取决于“角色”，这就是为什么在页面加载时，当我更改角色“客户”字段（选择的选择列表）显示时默认隐藏“客户”字段，并且当我选择客户时，它不会触发远程验证。 我试图让它在“检查元素”上可见，我将 display:none 更改为 display:bock 并尝试从选择的值更改它不工作，当我通过单击选择列表更改原始选择列表值然后它工作正常我意味着它在这里触发我的远程验证器方法是我正在做的完整代码示例。 请帮助我验证何时选择选择列表值更改。

这是 RegisterViewModel

    public class RegisterViewModel
    {
        [Required]
        [Display(Name = "Role")]
        public string Role { get; set; }

        //for edit view model additionalFields which will only require for edit mode
        //[System.Web.Mvc.Remote("DoesCustomerCodeExist", "Account", AdditionalFields = "OldCustomerCode")]
        [Required(AllowEmptyStrings = false, ErrorMessage = "Customer Code is required.")]
        [Display(Name = "Customer Code", Description = "A customer code come from our oracle system.")]
        [System.Web.Mvc.Remote("DoesCustomerCodeExist", "Account")]
        [Range(0, int.MaxValue, ErrorMessage = "Please enter valid Customer Code in number only.")]
        public string CustomerCode { get; set; }

    }

Here is my view cshtml 此文件中还有 js 代码，用于在角色更改时显示客户选择的选择列表。

//select Role
<div class="form-group">
    @Html.LabelFor(m => m.Role, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(x => x.Role, ViewBag.Roles as SelectList,"", new { @class = "form-control chosen-select", data_placeholder = "Select a Role" })
        @Html.ValidationMessageFor(m => m.Role, "", new { @class = "text-danger" })
    </div>
</div>

//Customer Code
<div class="form-group condition-div user hidden ">
    //this hidden field is only for edit mode
    //@Html.Hidden("OldCustomerCode", Model.CustomerCode)
    @Html.LabelFor(m => m.CustomerCode, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(x => x.CustomerCode, (SelectList)ViewBag.Customers, "", new { @class = "form-control  chosen-customers", data_placeholder = "Select Customer" })
        @Html.ValidationMessageFor(m => m.CustomerCode, "", new { @class = "text-danger" })
    </div>
</div>


@section    Styles{
    @Styles.Render("~/Content/chosen")
}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/chosen")

<script type="text/javascript">
        $('input[type=text]').tooltip(
                 {
                     placement: "right",
                     trigger: "focus"
                 }
            );

        $(".chosen-select").chosen({ allow_single_deselect: true});

        $('#Role').change(function () {

            if (this.value == "") {
                $('.condition-div').addClass('hidden'); // hide all the conidional divs
            } else if (this.value == "NBP User" || this.value == "NBP Head" ) {
                $('.condition-div.admin').addClass('hidden'); /// hide admin conditional divs
                $('.condition-div.user').removeClass('hidden'); // show user role conditioanl div
                //configure selectlist to Chosen select and if i remove this line and show orignal select list its working fine mean remote validating on change  but if i use this is not working on change.
                $(".chosen-customers").chosen({ allow_single_deselect: true, search_contains: true }); 
                $.validator.setDefaults({ ignore: ":hidden:not(.chosen-customers)" });
            } else if (this.value == "ICIL User" || this.value == "ICIL Head" || this.value == "FIO User" ) {
                $('.condition-div.user').addClass('hidden'); /// hide user role conditional divs
                $('.condition-div.admin').removeClass('hidden'); // show admin role conditional divs
                $(".chosen-branch").chosen({ allow_single_deselect: true });
                $.validator.setDefaults();
            }
        });
</script>
}

控制器操作验证客户代码

    public ActionResult DoesCustomerCodeExist(string CustomerCode, string OldCustomerCode)
    {
        //the oldCustomerCode will come null in this case cause its register view and in edit view OldCustomerCode will be use
        if (CustomerCode == OldCustomerCode)
            return Json(true, JsonRequestBehavior.AllowGet);

        if (DbContext.Users.Any(x => x.CustomerCode == CustomerCode))
            return Json("Customer code already exists in application. Please verify user details.", JsonRequestBehavior.AllowGet);

        if (DbOracle.IsCustomerCodeExist(CustomerCode))
            return Json(true, JsonRequestBehavior.AllowGet);
        else
            return Json("The customer code does not exist in database.", JsonRequestBehavior.AllowGet);
    }

如果我不使用 jquery 选择的插件，所有代码都可以正常工作。 简而言之，当我使用选择的插件进行选择列表远程验证时，停止验证值。 如果你们现在需要我可以分享图片我有一个有限的帐户所以我不能上传快照...... 请帮帮我。

Answer 1

当客户字段更改时，您应该在客户端放置一些 JQuery 来跟踪“CustomerCode”字段，例如调用“CustomerCode”的“focusout()”事件：

    $('#CustomerCode').change(function () {
        $(this).focusout();
    });