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

时间:2016-10-27 10:53:24

标签: c# jquery asp.net-mvc jquery-validate jquery-chosen

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

现在我想验证来自其他来源的用户“customer”,并将“customer”放在Select list“customer”中超过2000,这就是为什么我使用JQuery Chosen插件在选择列表中搜索 但“客户”字段依赖于“角色”,这就是为什么页面加载“客户”字段默认隐藏在我更改角色“客户”字段(选择的选择列表)显示时以及当我选择客户时未激活远程验证。 我试图让它在“检查元素”上可见,我更改显示:无显示:bock并尝试更改选择它的值不工作当我更改orignal选择列表值从点击选择列表然后它工作正常我意味着它在这里触发我的远程验证器方法是完整的代码示例我在做什么。 请帮助我想在选择的选择列表值更改时验证。

这是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 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选择的插件,所有代码都正常工作。 简而言之,当我使用选择的插件进行选择列表时,远程验证就是停止验证值。 我可以分享图像,如果你们现在需要我有一个有限的帐户,所以我不能上传快照镜头.... 请帮帮我。

1 个答案:

答案 0 :(得分:1)

你应该在客户端放置一些JQuery来跟踪&#34; CustomerCode&#34;客户字段jsut调用&#34; focusout()&#34; &#34; CustomerCode&#34; e.g:

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