如何在ASP.NET MVC中实现类似Gmail的收件人邮箱多选文本框

核心实现思路 #

通过前端构建标签化输入区域，结合后端接口获取联系人数据，实现输入联想、选中添加标签、点击模态框其他区域隐藏联想列表的效果，最终将选中的邮箱提交到后端保存。

前端实现 #

1. 模态框HTML结构 #

在视图中添加包含收件人选择区域的模态框：

<div class="modal" id="emailRecipientModal">
    <div class="modal-content">
        <h4>选择收件人</h4>
        <div class="recipient-container">
            <!-- 存放已选中的邮箱标签 -->
            <div class="recipient-tags" id="recipientTags"></div>
            <!-- 输入框用于搜索联系人 -->
            <input type="text" id="recipientInput" placeholder="输入邮箱或联系人姓名..." />
            <!-- 联系人联想列表 -->
            <div class="contact-list" id="contactList"></div>
        </div>
        <button id="saveRecipients">确认选择</button>
    </div>
</div>

2. CSS样式（模拟Gmail/Stack Overflow风格） #

添加样式实现标签、输入框和联想列表的布局：

/* 模态框基础样式，可根据现有样式调整 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 500px;
}

/* 收件人选择区域样式 */
.recipient-container {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    position: relative;
    margin: 15px 0;
}
.recipient-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.recipient-tag {
    background: #e1ecf4;
    padding: 4px 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.recipient-tag .remove-tag {
    cursor: pointer;
    font-weight: bold;
    color: #39739d;
}
#recipientInput {
    border: none;
    outline: none;
    flex-grow: 1;
    min-width: 180px;
    font-size: 14px;
}
.contact-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.contact-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
}
.contact-item:hover {
    background: #f1f3f4;
}

3. JavaScript交互逻辑 #

使用jQuery实现输入联想、标签添加删除、模态框点击事件：

$(document).ready(function() {
    // 输入框输入时，调用后端接口获取匹配的联系人
    $("#recipientInput").on("input", function() {
        const query = $(this).val().trim();
        if (query.length === 0) {
            $("#contactList").hide();
            return;
        }
        $.get("/Email/GetContacts", { query: query }, function(contacts) {
            renderContactList(contacts);
        });
    });

    // 渲染联系人联想列表
    function renderContactList(contacts) {
        const $list = $("#contactList");
        $list.empty();
        if (contacts.length > 0) {
            $list.show();
            contacts.forEach(contact => {
                $list.append(`<div class="contact-item" data-email="${contact.email}">${contact.name} (${contact.email})</div>`);
            });
        } else {
            $list.hide();
        }
    }

    // 点击联系人项，添加为标签
    $(document).on("click", ".contact-item", function() {
        const email = $(this).data("email");
        addRecipientTag(email);
        $("#recipientInput").val("");
        $("#contactList").hide();
    });

    // 添加收件人标签（避免重复）
    function addRecipientTag(email) {
        if ($(`.recipient-tag[data-email="${email}"]`).length === 0) {
            $("#recipientTags").append(`
                <div class="recipient-tag" data-email="${email}">
                    ${email}
                    <span class="remove-tag">&times;</span>
                </div>
            `);
        }
    }

    // 删除标签
    $(document).on("click", ".remove-tag", function() {
        $(this).parent().remove();
    });

    // 点击模态框非输入/列表区域，隐藏联想列表
    $("#emailRecipientModal").on("click", function(e) {
        if (!$(e.target).closest("#recipientInput, .contact-list").length) {
            $("#contactList").hide();
        }
    });

    // 提交选中的收件人到后端
    $("#saveRecipients").click(function() {
        const selectedEmails = [];
        $(".recipient-tag").each(function() {
            selectedEmails.push($(this).data("email"));
        });
        $.post("/Email/SaveRecipients", { emails: selectedEmails }, function(response) {
            if (response.success) {
                $("#emailRecipientModal").hide();
                // 可在此处添加更新页面收件人显示的逻辑
            }
        });
    });
});

后端实现 #

1. 控制器与接口 #

创建EmailController，提供获取联系人、保存收件人的接口：

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace YourNamespace.Controllers
{
    public class EmailController : Controller
    {
        // 获取匹配的联系人数据（实际项目中从数据库读取）
        [HttpGet]
        public JsonResult GetContacts(string query)
        {
            var contacts = new List<Contact>
            {
                new Contact { Id = 1, Name = "张三", Email = "zhangsan@example.com" },
                new Contact { Id = 2, Name = "李四", Email = "lisi@example.com" },
                new Contact { Id = 3, Name = "王五", Email = "wangwu@example.com" },
                new Contact { Id = 4, Name = "赵六", Email = "zhaoliu@example.com" }
            };

            if (!string.IsNullOrEmpty(query))
            {
                contacts = contacts.Where(c => 
                    c.Name.IndexOf(query, System.StringComparison.OrdinalIgnoreCase) >= 0 ||
                    c.Email.IndexOf(query, System.StringComparison.OrdinalIgnoreCase) >= 0
                ).ToList();
            }

            return Json(contacts, JsonRequestBehavior.AllowGet);
        }

        // 保存选中的收件人
        [HttpPost]
        public JsonResult SaveRecipients(List<string> emails)
        {
            try
            {
                // 此处替换为实际业务逻辑，比如存入数据库、关联到当前邮件草稿等
                Session["SelectedRecipients"] = emails;
                return Json(new { success = true });
            }
            catch (System.Exception ex)
            {
                return Json(new { success = false, message = ex.Message });
            }
        }
    }

    // 联系人模型类
    public class Contact
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

内容的提问来源于stack exchange，提问作者Rack Sonn