第23章 多选下拉框的渲染显示

1 Core.Domain.Customers.CustomerDefaults

namespace Core.Domain.Customers

{

    /// <summary>

    /// 【用户默认--类】

    /// <remarks>

    /// 摘要：

    ///    该类中的属性成员实例设定一些常量值，为获取1个指定的角色实例提供相应的支撑。

    /// </remarks>

    /// </summary>

    public static class CustomerDefaults

    {

        #region 默认角色名配置设定

        /// <summary>

        /// 【管理员】

        /// <remarks>

        /// 摘要：

        ///     设定“管理员”角色名。

        /// </remarks>

        /// </summary>

        public static string AdministratorsRoleName => "Administrators";

        /// <summary>

        /// 【论坛主持人】

        /// <remarks>

        /// 摘要：

        ///     设定“论坛主持人”角色名。

        /// </remarks>

        /// </summary>

        public static string ForumModeratorsRoleName => "ForumModerators";

        /// <summary>

        /// 【注册用户】

        /// <remarks>

        /// 摘要：

        ///     设定“注册用户”角色名。

        /// </remarks>

        /// </summary>

        public static string RegisteredRoleName => "Registered";

        /// <summary>

        /// 【生产商】

        /// <remarks>

        /// 摘要：

        ///     设定“生产商”角色名。

        /// </remarks>

        /// </summary>

        public static string VendorsRoleName => "Vendors";

        /// <summary>

        /// 【游客】

        /// <remarks>

        /// 摘要：

        ///     设定“游客”角色名。

        /// </remarks>

        /// </summary>

        public static string GuestsRoleName => "Guests";

        #endregion

    }

}

2 重构Services.Customers.CustomerServiceDefaults

/// <summary>

        /// 【1个指定角色名所对应的1个角色缓存键】

        /// <remarks>

        /// 摘要：

        ///     设定一个缓存键实例，用于拼接1个指定的缓存键字符串，该缓存键字符与角色实体1个指定实例两者构建了缓存映射关系。  

        /// {0} :1个指定的角色名字符串。

        /// </remarks>

        /// </summary>

        public static CacheKey RolesByNameCacheKey => new("role.byname.{0}", RolesByNamePrefix);

        /// <summary>

        /// 【1个指定角色名所对应的1个角色前缀】

        /// <remarks>

        /// 摘要：

        ///     设定一个缓存键实例，用于拼接1个指定的缓存键字符串，该缓存键字符与角色实体1个指定实例两者构建了缓存映射关系。  

        /// </remarks>

        /// </summary>

        public static string RolesByNamePrefix => "role.byname.";

3 Services.Customers.CustomerService.GetRoleByNameAsync

/// <param name="name">1个指定的角色名字符串。</param>

        /// <summary>

        /// 【异步通过角色名获取角色】

        /// <remarks>

        /// 摘要：

        ///     直接从角色表中获取1个指定的角色实例；或从分布式缓存数据库获取1个指定角色的所有实例。

        /// </remarks>

        /// <returns>

        ///    1个指定的角色实例。

        /// </returns>

        /// </summary>

        public virtual async Task<Role> GetRoleByNameAsync(string name)

        {

            if (string.IsNullOrWhiteSpace(name))

                return null;

            var key = _staticCacheManager.PrepareKeyForDefaultCache(CustomerServicesDefaults.RolesByNameCacheKey, name);

            var query = from cr in _roleRepository.Table

                        orderby cr.Id

                        where cr.Name == name

                        select cr;

            var role = await _staticCacheManager.GetAsync(key, async () => await query.FirstOrDefaultAsync());

            return role;

        }

4 Web.Areas.Admin.Factories.CustomerModelFactory.PrepareCustomerModelAsync

 /// <param name="model">用户模型纪录的1个指定实例。</param>

        /// <param name="customer">用户实体的1个指定实例。</param>

        /// <param name="excludeProperties">指示是否需要把扩展属性添加到用户添加/编辑视图页面中，默认值：false，即由于该方法中使用的是非操作所以需要添加扩展属性。</param>

        /// <summary>

        /// 【异步预处理用户模型纪录】

        /// <remarks>

        /// 摘要：

        ///     获取用户模型纪录的1个指定实例，为用户添加/编辑视图页面的渲染显示提供支撑。

        /// </remarks>

        /// <returns>

        ///     用户模型纪录的1个指定实例。

        /// </returns>

        /// </summary>

        public virtual async Task<CustomerModel> PrepareCustomerModelAsync(CustomerModel model, Customer customer, bool excludeProperties = false)

        {

            if (customer != null)

            {

            }

            else

            {

                //用户添加/编辑视图页面中所需的扩展属性。

                if (!excludeProperties)

                {

                    //把“注册用户”设定角色下拉框控件的默认角色实例。

                    var registeredRole = await _customerService.GetRoleByNameAsync(CustomerDefaults.RegisteredRoleName);

                    if (registeredRole != null)

                        model.SelectedRoleIds.Add(registeredRole.Id);

                }

            }

            var availableRoles = await _customerService.GetAllRolesAsync();

            model.AvailableRoles = availableRoles.Select(role => new SelectListItem

            {

                Text = role.Name,

                Value = role.Id.ToString(),

                Selected = model.SelectedRoleIds.Contains(role.Id)

            }).ToList();

            return model;

        }

    }

5 Web\Areas\Admin\Views\Customer\Create.cshtml

@model CustomerModel

@{

    ViewData["Title"] = "添加用户";

    Layout = "~/Areas/Admin/Views/Shared/_LayoutPopup.cshtml";

}

@if (ViewBag.RefreshPage == true)

{

    <script type="text/javascript">

        //如果重置按钮定义在查询表单中时，通过下1行语句实现对弹出框的关闭。

        //window.opener.document.forms['@(Context.Request.Query["formId"])'].@(Context.Request.Query["btnId"]).click();

        //如果重置按钮单独定义时，通过下1行语句实现对弹出框的关闭。

        window.opener.document.getElementById("@Context.Request.Query["btnId"]").click();

        window.close();

    </script>

}

<div class="content-header">

</div>

<!-- Main content -->

<div class="content">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-12">

                <div class="card card-primary card-outline">

                    <form asp-action="Create"

                          asp-route-btnId="@Context.Request.Query["btnId"]">

                        <div class="card-body">

                            <div class="mb-3">

                                <label asp-for="Username" class="control-label"></label>

                                <input asp-for="Username" class="form-control" />

                                <span asp-validation-for="Username" class="text-danger"></span>

                            </div>

                            <div class="mb-3">

                                <label asp-for="Email" class="control-label"></label>

                                <input asp-for="Email" class="form-control" />

                                <span asp-validation-for="Email" class="text-danger"></span>

                            </div>

                            <div class="mb-3">

                                <label asp-for="Password" class="control-label"></label>

                                <input asp-for="Password" class="form-control" />

                                <span asp-validation-for="Password" class="text-danger"></span>

                            </div>

                            <div class="mb-3">

                                <label asp-for="Phone" class="control-label"></label>

                                <input asp-for="Phone" class="form-control" />

                                <span asp-validation-for="Phone" class="text-danger"></span>

                            </div>

                            <div class="mb-3">

                                <label asp-for="Phone" class="control-label"></label>

                                <input asp-for="Phone" class="form-control" />

                                <span asp-validation-for="Phone" class="text-danger"></span>

                            </div>

                            <div class="mb-3">

                                <label asp-for="SelectedRoleIds" class="control-label"></label>

                                <select asp-for="SelectedRoleIds" asp-items="Model.AvailableRoles" asp-multiple="true" class="k-dropdownlist k-picker k-picker-md k-picker-solid k-rounded-md"></select>

                                <span asp-validation-for="SelectedRoleIds" class="text-danger"></span>

                            </div>

                        </div>

                        <div class="card-footer text-center">

                            <input type="submit" value="保存" class="btn btn-primary" />

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

@section Scripts {

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script>

        $(document).ready(function () {

            $("#SelectedRoleIds").kendoMultiSelect({

                select: function (e) {

                    var current = this.value();

                    if (this.dataSource.view()[e.item.index()].value === "0") {

                        this.value("");

                    }

                    else if (current.indexOf("0") !== -1) {

                        current = $.grep(current, function (value) {

                            return value !== "0";

                        });

                        this.value(current);

                    }

                },

                change: function (e) {

                    if (this.value().length === 0)

                        this.value(["0"]);

                }

            }).data("kendoMultiSelect");

        });

    </script>

}

    对以上功能更为具体实现和注释见230604_023ShopRazor(多选下拉框的渲染显示)。文章来源地址https://www.toymoban.com/news/detail-471503.html

到了这里，关于第23章 多选下拉框的渲染显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！