显示基于组合框 asp.net core 3.5.1 的其他表单元素

Question

我正在尝试根据 UserRole 组合框在注册表单中显示其他字段。根据角色，我在用户中创建不同的对象。这是我的注册 html：

@page
@model RegisterModel
@{
    ViewData["Title"] = "Register";
    var roles = (List<IdentityRole>)ViewData["roles"];
    Layout = "~/Areas/Identity/Pages/_AuthLayout.cshtml";
}

<h1>@ViewData["Title"]</h1>

<div class="col">
    <div class="col-md-4">
        <form asp-route-returnUrl="@Model.ReturnUrl" method="post">
            <h4>Create a new account.</h4>
            <hr />
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Input.Email"></label>
                <input asp-for="Input.Email" class="form-control" />
                <span asp-validation-for="Input.Email" class="text-danger"></span>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Input.Password"></label>
                        <input asp-for="Input.Password" class="form-control" />
                        <span asp-validation-for="Input.Password" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Input.ConfirmPassword"></label>
                        <input asp-for="Input.ConfirmPassword" class="form-control" />
                        <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
                    </div>
                </div>
            </div>
            <div class="form-group"><!--This is the checkbox based on which I want to add fields-->
                <label asp-for="Input.UserRole"></label>
                <select asp-for="Input.UserRole" class="form-control" asp-items='new SelectList(roles,"Id","Name")'>
                </select>
                <span asp-validation-for="Input.UserRole" class="text-danger"></span>
            </div>
            <button type="submit" class="btn btn-primary">Register</button>
        </form>
    </div>
</div>

@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

它或多或少是创建新身份时生成的默认登录。这是我在 register.cshtml.cs 中的输入模型：

public class InputModel
        {
            [Required]
            [EmailAddress]
            [Display(Name = "Email")]
            public string Email { get; set; }

            [Required]
            [StringLength(100, ErrorMessage = "Das {0} muss minimum {2} und maximum {1} Zeichen lange sein.", MinimumLength = 6)]
            [DataType(DataType.Password)]
            [Display(Name = "Password")]
            public string Password { get; set; }

            [DataType(DataType.Password)]
            [Display(Name = "Confirm ")]
            [Compare("Password", ErrorMessage = "Die Passwörter stimmen nicht überein.")]
            public string ConfirmPassword { get; set; }

            [Required]
            [Display(Name = "Rolle")]
            public string UserRole { get; set; }//based on this checkbox
        }

如果选择的角色是管理员，我不需要任何额外的字段。如果选择的角色是 a，我还需要名字，这应该是必需的。如果选择的角色是 b，我需要名字和名字，两者都需要。我确实设法毫无问题地制作自己的领域。我正在使用 asp.net core mvc 3.5.1。关于如何做到这一点的任何意见？

Answer 1

首先，我自定义了两个验证规则，一个给FirstName，一个给LastName，这样在选择角色admin的时候，即使FirstName和LastName字段没有出现让我们填写，这样ModelState为true和no会报错。对于角色 a ，即使没有输入 LastName ，ModelState 也是 true ，也不会报错。其次，使用JQuery在Register.cshtml中添加客户端验证规则。

1.在Input模型中添加FirstName和LastName，并使用Custom Attribute进行验证。

            [FirstName]
            [Display(Name = "First Name")]
            public string FistName { get; set; }

           
            [LastName]
            [Display(Name = "Last Name")]
            public string LastName { get; set; }

2.分别创建自定义属性：FirstNameAttribute、LastNameAttribute

public class FirstNameAttribute : ValidationAttribute, IClientModelValidator

     {
            protected override ValidationResult IsValid(object value, ValidationContext validationContext)
            {
                bool flag = false;
                object instance = validationContext.ObjectInstance;
                Type type = instance.GetType();
                PropertyInfo property = type.GetProperty("UserRole");
                object propertyValue = property.GetValue(instance);
                if (propertyValue == null)
                {
                    flag = false;
                    
                }
                else
                {
                    switch (propertyValue.ToString())
                    {
                        case "admin":
                            if (value == null)
                            {
                                flag = true;
                            }
                            break;
                        case "a":
                            if (value != null)
                            {
                                flag = true;
                            }
                            break;
                        case "b":
                            if (value != null)
                            {
                                flag = true;
                            }
                            break;
    
                    }
                }
               
                if (!flag)
                {
                    return new ValidationResult("FirstName filed is required.");
               
                }
                    else
                    {
                        return null;
                    }
    
                }
            public void AddValidation(ClientModelValidationContext context)
    
            {
                context.Attributes.Add("data-val", "true");
                context.Attributes.Add("data-val-FirstName", "FirstName filed is required");
    
            } 



public class LastNameAttribute : ValidationAttribute, IClientModelValidator

    {
        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            bool flag = false;
            object instance = validationContext.ObjectInstance;
            Type type = instance.GetType();
            PropertyInfo property = type.GetProperty("UserRole");
            object propertyValue = property.GetValue(instance);
            if (propertyValue == null)
            {
                flag = false;
            }
            else
            {
                switch (propertyValue.ToString())
                {
                    case "admin":
                        if (value == null)
                        {
                            flag = true;
                        }
                        break;
                    case "a":
                        if (value == null)
                        {
                            flag = true;
                        }
                        break;
                 
                    case "b":
                        if (value != null)
                        {
                            flag = true;
                        }
                        break;
                }
            }
            if (!flag)
            {
                ValidationResult result = new ValidationResult
                                ("LastName is Required");
                return result;
            }
            else
            {
                return null;
            }

        }
        public void AddValidation(ClientModelValidationContext context)

        {
            context.Attributes.Add("data-val", "true");
            context.Attributes.Add("data-val-LastName", "LastName filed is required");

        }
    }

3.向RegisterModel 类添加一个新属性，用于存储列表。

 public List<SelectListItem> Roles { get; set; }

4.在构造函数中，创建列表。

Roles = new List<SelectListItem>

        {
            new SelectListItem {Value = "admin", Text ="admin"},
            new SelectListItem {Value = "a", Text = "a"},
            new SelectListItem {Value = "b", Text = "b"},
        };

5.使用JQuery在Register.cshtml中添加客户端验证规则

@page

@model RegisterModel
@{
    ViewData["Title"] = "Register";
}

<h1>@ViewData["Title"]</h1>

<div class="row">
    <div class="col-md-4">
        <form asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form" id="form">

            <h4>Create a new account.</h4>
            <hr />
            <div asp-validation-summary="All" class="text-danger"></div>

            <div class="form-group">
                <label asp-for="Input.Email"></label>
                <input asp-for="Input.Email" class="form-control" />
                <span asp-validation-for="Input.Email" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Input.Password"></label>
                <input asp-for="Input.Password" class="form-control" />
                <span asp-validation-for="Input.Password" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Input.ConfirmPassword"></label>
                <input asp-for="Input.ConfirmPassword" class="form-control" />
                <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
            </div>


            <div class="form-group">
                <label asp-for="Input.UserRole"></label>
                <select asp-for="Input.UserRole" class="form-control" id="UserRole" asp-items="@(Model.Roles)" value="@(Model.Roles)">
                </select>

                <span asp-validation-for="Input.UserRole" class="text-danger"></span>
            </div>


            <div class="admin box">  </select>
                <span asp-validation-for="Input.UserRole" class="text-danger"></span>
            </div>


            <div class="admin box">

            </div>
              <div class="form-group a box b">
                    <label asp-for="Input.FistName"></label>
                    <input asp-for="Input.FistName" class="form-control" />
                    <span asp-validation-for="Input.FistName" class="text-danger"></span>
                </div>
                <div class="form-group b box">
                    <label asp-for="Input.LastName"></label>
                    <input asp-for="Input.LastName" class="form-control" />
                    <span asp-validation-for="Input.LastName" class="text-danger"></span>
                </div>
          <button type="submit" class="btn btn-primary">Register</button>
        </form>
           </div>
</div>



 <script src="~/lib/jquery/dist/jquery.js"></script>

    <script src="https://khaalipaper.com/js/jquery-3.2.1.min.js"></script>
    <script src="https://khaalipaper.com/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://khaalipaper.com/source/bootstrap-multiselect.js"></script>
@section Scripts {
    <partial name="_ValidationScriptsPartial" />
   
}


<script>
    $(document).ready(function () {
        $("select").change(function () {
            $(this).find("option:selected").each(function () {
                var optionValue = $(this).attr("value");
                if (optionValue) {
                    $(".box").not("." + optionValue).hide();
                    $("." + optionValue).show();
                } else {
                    $(".box").hide();
                }
            });
        }).change();
        jQuery.validator.addMethod("firstName",
            function (value, element, param) {

                if (value == "") {
                    return false;
                }
                else {
                    return true;
                }
            }, "FirstName filed is required");

        jQuery.validator.unobtrusive.adapters.addBool("firstName");
        jQuery.validator.addMethod("LastName",
            function (value, element, param) {

                if (value == "") {
                    return false;
                }
                else {
                    return true;
                }
            }, "LastName filed is required");

        jQuery.validator.unobtrusive.adapters.addBool("LastName");
    });

</script>

结果：