.Net Core 2.0 MVC中如何实现支持增删操作的下拉框？

嘿，这个需求挺实用的，我刚好在.NET Core 2.0 MVC里实现过类似的功能！完全可以搞出一套优雅的方案，结合前端自定义交互和后端逻辑就能满足你说的所有要求——点击名称选中项、红色叉号调用WCF删除、「其他」选项触发新增输入。下面一步步给你拆解：

1. 前端自定义下拉组件（HTML+CSS+JS） #

原生<select>很难实现删除和动态新增的交互，所以我们用自定义容器模拟下拉框，灵活性更高：

HTML结构（结合Razor渲染初始数据） #

<div class="custom-dropdown">
    <!-- 下拉头部，显示选中项 -->
    <div class="dropdown-header" id="selectedLabel">请选择一项</div>
    <!-- 下拉选项列表，默认隐藏 -->
    <div class="dropdown-options" style="display: none;">
        @foreach (var option in Model.Options)
        {
            <div class="dropdown-option">
                <span class="option-text">@option.Text</span>
                <button class="delete-btn" data-id="@option.Id">×</button>
            </div>
        }
        <!-- 「其他」选项 -->
        <div class="dropdown-option other-option">
            <span class="option-text">其他</span>
        </div>
    </div>
    <!-- 新增项输入框，默认隐藏 -->
    <div class="new-item-input" style="display: none;">
        <input type="text" id="newItemValue" placeholder="输入新值">
        <button id="submitNewItem">添加</button>
    </div>
    <!-- 隐藏域：存储选中项ID，用于表单提交绑定 -->
    <input type="hidden" id="selectedOptionId" name="SelectedOptionId" value="">
</div>

CSS美化（让组件看起来像原生下拉） #

.custom-dropdown {
    position: relative;
    width: 220px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}
.dropdown-header {
    padding: 8px 12px;
    cursor: pointer;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ddd;
    border-top: none;
    background-color: #fff;
    z-index: 100;
}
.dropdown-option {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.dropdown-option:hover {
    background-color: #f8f9fa;
}
.delete-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
}
.new-item-input {
    padding: 8px 12px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 8px;
}
.new-item-input input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

JS交互逻辑（jQuery实现） #

$(document).ready(function() {
    // 展开/收起下拉列表
    $('.dropdown-header').click(function() {
        $('.dropdown-options').toggle();
    });

    // 选择常规选项
    $('.dropdown-option .option-text').not('.other-option .option-text').click(selectOption);

    // 点击「其他」显示新增输入框
    $('.other-option .option-text').click(function() {
        $('.dropdown-options').hide();
        $('.new-item-input').show();
        $('#newItemValue').focus();
    });

    // 删除选项（调用后端接口）
    $('.delete-btn').click(deleteOption);

    // 提交新增项
    $('#submitNewItem').click(addNewOption);

    // 提取复用的事件处理函数
    function selectOption() {
        const text = $(this).text();
        const id = $(this).parent().find('.delete-btn').data('id');
        
        $('#selectedLabel').text(text);
        $('#selectedOptionId').val(id);
        $('.dropdown-options').hide();
    }

    function deleteOption(e) {
        e.stopPropagation(); // 避免触发选项选择事件
        const id = $(this).data('id');
        const $optionItem = $(this).parent();

        if (confirm('确定要删除这项吗？')) {
            $.ajax({
                url: '@Url.Action("DeleteDropdownOption", "YourController")',
                type: 'POST',
                data: { id: id },
                success: function(res) {
                    if (res.success) {
                        $optionItem.remove();
                        // 如果删除的是当前选中项，重置选中状态
                        if ($('#selectedOptionId').val() == id) {
                            $('#selectedLabel').text('请选择一项');
                            $('#selectedOptionId').val('');
                        }
                        alert('删除成功');
                    } else {
                        alert(`删除失败：${res.message}`);
                    }
                },
                error: function() {
                    alert('请求失败，请稍后重试');
                }
            });
        }
    }

    function addNewOption() {
        const text = $('#newItemValue').val().trim();
        if (!text) {
            alert('请输入有效的新值');
            return;
        }

        $.ajax({
            url: '@Url.Action("AddDropdownOption", "YourController")',
            type: 'POST',
            data: { text: text },
            success: function(res) {
                if (res.success) {
                    // 把新项插入到「其他」选项之前
                    const newOptionHtml = `<div class="dropdown-option">
                                            <span class="option-text">${text}</span>
                                            <button class="delete-btn" data-id="${res.newId}">×</button>
                                        </div>`;
                    $('.other-option').before(newOptionHtml);
                    
                    // 选中新添加的项
                    $('#selectedLabel').text(text);
                    $('#selectedOptionId').val(res.newId);
                    
                    // 重置输入框并隐藏
                    $('.new-item-input').hide();
                    $('#newItemValue').val('');
                    
                    // 给新项绑定事件
                    $('.dropdown-option .option-text').off('click').click(selectOption);
                    $('.delete-btn').off('click').click(deleteOption);
                    
                    alert('添加成功');
                } else {
                    alert(`添加失败：${res.message}`);
                }
            },
            error: function() {
                alert('请求失败，请稍后重试');
            }
        });
    }
});

2. 后端逻辑（MVC控制器 + WCF调用） #

定义视图模型和数据模型 #

// 下拉选项数据模型
public class DropdownOptionDto
{
    public int Id { get; set; }
    public string Text { get; set; }
}

// 页面视图模型
public class DropdownPageViewModel
{
    public List<DropdownOptionDto> Options { get; set; }
    public int? SelectedOptionId { get; set; }
}

控制器动作方法 #

public class YourController : Controller
{
    // 注入或实例化WCF客户端（注意：.NET Core 2.0需安装System.ServiceModel.Http等相关NuGet包）
    private readonly YourWcfServiceClient _wcfClient;

    public YourController(YourWcfServiceClient wcfClient)
    {
        _wcfClient = wcfClient;
    }

    // 加载页面：从WCF获取初始选项列表
    public IActionResult Index()
    {
        var wcfOptions = _wcfClient.GetAllOptions();
        var viewModel = new DropdownPageViewModel
        {
            Options = wcfOptions.Select(o => new DropdownOptionDto
            {
                Id = o.Id,
                Text = o.Text
            }).ToList()
        };
        return View(viewModel);
    }

    // 删除选项的AJAX接口
    [HttpPost]
    public IActionResult DeleteDropdownOption(int id)
    {
        try
        {
            bool deleteSuccess = _wcfClient.DeleteOption(id);
            return deleteSuccess 
                ? Json(new { success = true }) 
                : Json(new { success = false, message = "WCF服务返回删除失败" });
        }
        catch (Exception ex)
        {
            return Json(new { success = false, message = ex.Message });
        }
    }

    // 添加新选项的AJAX接口
    [HttpPost]
    public IActionResult AddDropdownOption(string text)
    {
        try
        {
            int newOptionId = _wcfClient.AddOption(text);
            return newOptionId > 0 
                ? Json(new { success = true, newId = newOptionId }) 
                : Json(new { success = false, message = "WCF服务返回添加失败" });
        }
        catch (Exception ex)
        {
            return Json(new { success = false, message = ex.Message });
        }
    }
}

3. 关键注意事项 #

• 模型绑定：隐藏域SelectedOptionId会自动绑定到视图模型的SelectedOptionId属性，方便表单提交时获取选中值。
• WCF调用：在.NET Core 2.0中调用WCF需要添加System.ServiceModel.Http、System.ServiceModel.Primitives等NuGet包，可通过SvcUtil工具生成WCF客户端代码。
• 事件复用：新添加的选项需要重新绑定点击/删除事件，所以我们把事件逻辑提取成独立函数，避免重复代码。
• 用户体验：添加删除时的确认提示、选中状态重置等细节，能让交互更流畅自然。

内容的提问来源于stack exchange，提问作者Björn