时间戳

首页 > 解决方案 > 用组合框替换下拉列表（可编辑的下拉列表）

c# - 用组合框替换下拉列表（可编辑的下拉列表）

问题描述

我有一个网页，我目前在其中使用下拉列表来帮助用户过滤数据：

<div class="col-md-4">
    Sessie datum: <input type="text" id="currentFilterOnSessionDate" class=" form-control text-center d-flex align-items-center justify-content-center" name="currentFilterOnSessionDate" value="@ViewData["CurrentFilterOnSessionDate"]"/>
</div>

<div class="col-md-4">
    Discipline: <select asp-for="SelectedItem" asp-items="ViewBag.Disciplines" class=" form-control text-center d-flex align-items-center justify-content-center" id ="currentFilterOnDiscipline" name="currentFilterOnDiscipline" value="@ViewData["CurrentFilterOnDiscipline"]"></select>    
</div>

在某些情况下，我想用一个组合框替换这个下拉列表，允许用户选择一个预定义的值，或者在他或她自己中键入一个。

我一直在谷歌上搜索这个，但我似乎为 asp .net core 找到的大多数示例都使用像Devexpress或Telerik这样的 3rd 方控件。

其他示例（如asp.mvc 可编辑下拉列表框（组合框））我真的不知道如何适应为 asp .net core MVC 工作。

经典 asp .net 核心中的组合框有什么替代品吗？

接下来的步骤。:-)

使用我在这里收到的答案，并通过谷歌搜索，我设法或多或少地获得了我正在寻找的结果。

我仍然有几个问题。

让我首先从更新当前使用的代码开始。在 html 正文中，我实现了一个经典的选择，如下所示：

<div class="col-md-4">
    Discipline: <select id="disciplineSelect" asp-for="SelectedItem" asp-items="ViewBag.Disciplines"
                        class=" form-control text-center d-flex align-items-center justify-content-center"
                        id="currentFilterOnDiscipline" 
                        name="currentFilterOnDiscipline"
                        value="@ViewData["CurrentFilterOnDiscipline"]">            
                </select>
</div>

然后在@section Scripts中，我添加了以下代码以将其转换为select2控件：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
    $('#disciplineSelect').select2({
        placeholder: "Selecteer een discipline",
        theme: "classic",
        allowClear: true,
    });
</script>

这可以满足我的要求，但是...布局并不是真正的 100%：

加载时

使用时

我想要的是页面上的 2 个控件具有相同的高度，并且组合框跨越从控件开始到箭头按钮的宽度。就目前而言，我认为客户不会批准...

有人有什么想法吗？

标签： c#asp.net-mvcasp.net-core

解决方案

经典 asp .net 核心中的组合框有什么替代品吗？

我认为您可以使用 Select2.js：

<div class="col-md-10">
    <label> Account Number</label>
    <div class="input-group">
        <select id="mySelect2" class="form-control accountSelect">
            <option value="Select" disabled>Select</option>
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
            <option value="ddd">ddd</option>
        </select>
    </div>
</div>

@section Scripts
{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#mySelect2").select2();
        })
    </script>
}

结果：

在此处输入图像描述

如果您的选择列表资源来自后端，您可以更改如下视​​图：

索引.cshtml：

@model TestVM
<div class="col-md-10">
    <label> Account Number</label>
    <div class="input-group">
     
        <select id="mySelect2" asp-items="Model.Select" class="form-control"></select>
    </div>
</div>

模型：

public class TestVM
{
    public IEnumerable<SelectListItem> Select{ get; set; }     
}

控制器：

[HttpGet]
public async Task<IActionResult> Index()
{
    var model = new TestVM()
    {
        Select= new List<SelectListItem>() {
                    new SelectListItem() { Value = "1", Text = "aaa" },
                    new SelectListItem() { Value = "2", Text = "bbb" },
                    new SelectListItem() { Value = "3", Text = "ccc" },
                    new SelectListItem() { Value = "4", Text = "ddd" }
                    }
        
    };
    return View(model);
}

推荐阅读