ASP.NET中如何将JavaScript收集的邮箱列表传递给Controller函数

我来给你一步步搞定这个需求，刚好之前在项目里实现过类似的功能，咱们从前端到后端拆解清楚：

1. 前端模态框与邮箱列表管理 #

先搞定模态框的HTML结构，包含输入框、添加按钮、邮箱列表展示，再用JS维护邮箱数组：

<!-- 模态框示例（用Bootstrap风格，你可以根据自己的UI框架调整） -->
<div class="modal fade" id="emailModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">添加收件人邮箱</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <input type="email" class="form-control" id="emailInput" placeholder="请输入邮箱地址">
        </div>
        <button type="button" class="btn btn-primary mb-3" onclick="addEmailToList()">添加邮箱</button>
        <ul id="emailList" class="list-group"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-success" onclick="submitEmailList()">确认提交</button>
      </div>
    </div>
  </div>
</div>

对应的JS逻辑，负责添加、删除邮箱，维护邮箱数组：

// 全局维护的邮箱数组
let selectedEmails = [];

// 添加邮箱到列表
function addEmailToList() {
  const input = document.getElementById('emailInput');
  const email = input.value.trim();
  
  // 简单格式校验
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!email || !emailRegex.test(email)) {
    alert('请输入有效的邮箱地址！');
    return;
  }
  
  // 避免重复添加
  if (selectedEmails.includes(email)) {
    alert('该邮箱已在列表中！');
    input.value = '';
    return;
  }
  
  selectedEmails.push(email);
  renderEmailList();
  input.value = '';
}

// 渲染邮箱列表（带删除按钮）
function renderEmailList() {
  const listContainer = document.getElementById('emailList');
  listContainer.innerHTML = '';
  
  selectedEmails.forEach(email => {
    const listItem = document.createElement('li');
    listItem.className = 'list-group-item d-flex justify-content-between align-items-center';
    listItem.textContent = email;
    
    // 删除按钮
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'btn btn-danger btn-sm';
    deleteBtn.textContent = '删除';
    deleteBtn.onclick = () => removeEmail(email);
    
    listItem.appendChild(deleteBtn);
    listContainer.appendChild(listItem);
  });
}

// 删除指定邮箱
function removeEmail(email) {
  selectedEmails = selectedEmails.filter(e => e !== email);
  renderEmailList();
}

2. 前端通过AJAX传递数组到后端Controller #

这里用原生fetch API（无需依赖jQuery）发送POST请求，注意要带上防伪造令牌和正确的Content-Type：

function submitEmailList() {
  if (selectedEmails.length === 0) {
    alert('请至少添加一个邮箱！');
    return;
  }
  
  // 获取ASP.NET的防伪造令牌（页面里要先通过@Html.AntiForgeryToken()生成）
  const antiForgeryToken = document.querySelector('input[name="__RequestVerificationToken"]').value;
  
  fetch('/Email/SendBulkEmails', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'RequestVerificationToken': antiForgeryToken
    },
    body: JSON.stringify(selectedEmails) // 把数组转为JSON字符串
  })
  .then(response => {
    if (response.ok) {
      alert('邮箱列表已提交，邮件发送任务启动！');
      $('#emailModal').modal('hide'); // 关闭模态框
      selectedEmails = [];
      renderEmailList();
    } else {
      return response.json().then(err => Promise.reject(err));
    }
  })
  .catch(error => {
    console.error('提交失败:', error);
    alert(`提交出错：${error.message || '未知错误'}`);
  });
}

3. 后端Controller接收邮箱列表 #

分ASP.NET Core和传统ASP.NET MVC两种场景给出示例：

ASP.NET Core Controller #

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

public class EmailController : Controller
{
    // 注入你的邮件服务（示例用接口）
    private readonly IEmailService _emailService;

    public EmailController(IEmailService emailService)
    {
        _emailService = emailService;
    }

    [HttpPost]
    [ValidateAntiForgeryToken] // 验证防伪造令牌
    public IActionResult SendBulkEmails([FromBody] List<string> emailList)
    {
        if (emailList == null || !emailList.Any())
        {
            return BadRequest(new { success = false, message = "邮箱列表不能为空" });
        }

        try
        {
            // 调用你的邮件发送逻辑
            _emailService.SendBatchEmails(emailList);
            return Ok(new { success = true, message = "邮件发送任务已启动" });
        }
        catch (Exception ex)
        {
            return StatusCode(500, new { success = false, message = $"发送失败：{ex.Message}" });
        }
    }
}

传统ASP.NET MVC Controller #

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

public class EmailController : Controller
{
    private readonly IEmailService _emailService;

    public EmailController(IEmailService emailService)
    {
        _emailService = emailService;
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public JsonResult SendBulkEmails(List<string> emailList)
    {
        if (emailList == null || emailList.Count == 0)
        {
            return Json(new { success = false, message = "邮箱列表不能为空" });
        }

        try
        {
            _emailService.SendBatchEmails(emailList);
            return Json(new { success = true, message = "邮件发送任务已启动" });
        }
        catch (Exception ex)
        {
            return Json(new { success = false, message = $"发送失败：{ex.Message}" });
        }
    }
}

关键注意事项 #

• 防伪造令牌：必须在页面中通过@Html.AntiForgeryToken()生成隐藏输入框，前端请求时带上，后端用[ValidateAntiForgeryToken]验证，防止CSRF攻击。
• Content-Type：前端必须设置为application/json，否则后端无法正确解析JSON格式的数组。
• 格式校验：前后端都要做邮箱格式和空列表校验，避免无效请求。

内容的提问来源于stack exchange，提问作者Cesar Augusto