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

Question

我需要帮助。我有一个用户注册表，我必须映射 "Customer" 与用户。

现在我想验证来自另一个来源的用户 "customer" 我将 "customer" 放在 Select 列表中 "customer" 超过 2000 这就是为什么我使用 JQuery 选择的插件在 select 列表中搜索但是 "customer" 字段依赖于 "roles" 这就是为什么在页面加载时 "customer" 字段在我更改角色 "customer" 字段（选择 select 列表）显示时默认隐藏当我 Selecting 客户时，它不会触发远程验证。我试图让它在 "inspect element" 上可见，我将 display:none 更改为 display:bock 并尝试更改所选的值，当我将原始 select 列表值从单击 select 列表然后它工作正常我的意思是它触发我的远程验证器方法这里是我正在做的完整代码示例。请帮助我在选择 select 列表值更改时进行验证。

这是 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; }

    }

这是我的视图 cshtml 在这个文件中还有 js 代码来显示角色更改时选择的客户 Select 列表。

//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 选择的插件，所有代码都可以正常工作。简而言之，当我使用 chosen plugin for select list 远程验证时，问题是停止验证值。如果你们需要，我可以分享图片，现在我的帐户有限，所以我无法上传快照.... 请帮助我。

Answer 1

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

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

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

asp.net mvc remote validation with jquery

c#

asp.net-mvc

jquery

jquery-validate

jquery-chosen