ASP.NET MVC中如何在弹窗内创建空表单并获取主表单字段？

嘿，我来帮你搞定这个需求！咱们一步步实现这个带空表单的弹窗，同时自动获取主表单的主题和内容字段。

1. 前端弹窗HTML结构（以Bootstrap模态框为例） #

首先在你的主视图里添加弹窗的HTML，这里用Bootstrap模态框（如果没引入Bootstrap，记得先添加相关CSS和JS，用其他弹窗组件逻辑也是相通的）：

<!-- 主表单中的「发送测试邮件」按钮 -->
<button type="button" class="btn btn-primary" id="openTestEmailModal">发送测试邮件</button>

<!-- 测试邮件弹窗 -->
<div class="modal fade" id="testEmailModal" tabindex="-1" role="dialog" aria-labelledby="testEmailModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="testEmailModalLabel">发送测试邮件</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      @using (Html.BeginForm("SendTestEmail", "YourControllerName", FormMethod.Post, new { @class = "test-email-form" }))
      {
        <div class="modal-body">
          <!-- 隐藏字段：存储主表单的Subject和Body -->
          @Html.Hidden("Subject", "", new { id = "modalSubject" })
          @Html.Hidden("Body", "", new { id = "modalBody" })

          <!-- 收件人邮箱输入框 -->
          <div class="form-group">
            <label for="RecipientEmail">收件人邮箱</label>
            @Html.TextBox("RecipientEmail", "", new { @class = "form-control", placeholder = "请输入收件人邮箱", required = "required" })
          </div>

          <!-- 发件人邮箱输入框 -->
          <div class="form-group">
            <label for="SenderEmail">发件人邮箱</label>
            @Html.TextBox("SenderEmail", "", new { @class = "form-control", placeholder = "请输入发件人邮箱", required = "required" })
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">发送测试邮件</button>
        </div>
      }
    </div>
  </div>
</div>

2. JavaScript逻辑：获取主表单字段并触发弹窗 #

接下来写JS代码，监听按钮点击事件，把主表单的主题和内容赋值给弹窗的隐藏字段，再显示弹窗：

<script>
$(document).ready(function() {
  // 点击「发送测试邮件」按钮时的逻辑
  $("#openTestEmailModal").click(function() {
    // 获取主表单的Subject和Body值（假设主表单元素ID为Subject、Body）
    var mainSubject = $("#Subject").val();
    var mainBody = $("#Body").val();

    // 赋值给弹窗的隐藏字段
    $("#modalSubject").val(mainSubject);
    $("#modalBody").val(mainBody);

    // 显示弹窗
    $("#testEmailModal").modal("show");
  });

  // 弹窗关闭时清空表单，避免下次打开有残留值
  $("#testEmailModal").on("hidden.bs.modal", function() {
    $(".test-email-form")[0].reset();
  });
});
</script>

3. 后端Action处理邮件发送 #

在你的Controller里添加处理邮件发送的Action，接收弹窗表单的参数并执行发送逻辑（这里用.NET自带的SmtpClient做示例，你可以根据自己的邮件服务调整）：

using System.Net;
using System.Net.Mail;
using System.Web.Mvc;

public class YourControllerName : Controller
{
    // 你已实现的主表单Action
    public ActionResult YourMainFormAction()
    {
        // 现有逻辑
        return View();
    }

    // 处理测试邮件发送的Action
    [HttpPost]
    public ActionResult SendTestEmail(string RecipientEmail, string SenderEmail, string Subject, string Body)
    {
        try
        {
            // 配置SMTP客户端（根据你的邮件服务器调整参数）
            using (var smtpClient = new SmtpClient("your-smtp-server", 587))
            {
                smtpClient.Credentials = new NetworkCredential("your-email-username", "your-email-password");
                smtpClient.EnableSsl = true;

                // 创建邮件消息
                var mailMessage = new MailMessage(SenderEmail, RecipientEmail)
                {
                    Subject = Subject,
                    Body = Body,
                    IsBodyHtml = true // 如果Body是HTML内容设为true，否则false
                };

                // 发送邮件
                smtpClient.Send(mailMessage);

                // 发送成功提示
                TempData["SuccessMessage"] = "测试邮件已成功发送！";
                return RedirectToAction("YourMainFormAction");
            }
        }
        catch (Exception ex)
        {
            // 发送失败提示
            TempData["ErrorMessage"] = $"发送测试邮件失败：{ex.Message}";
            return RedirectToAction("YourMainFormAction");
        }
    }
}

4. 优化建议 #

• 表单验证：前端用HTML5 required做基础验证，也可以用jQuery Validate做复杂校验；后端务必校验邮箱格式等参数合法性。
• 无刷新提交：如果不想页面跳转，可改用AJAX提交表单，示例代码如下：

  $(".test-email-form").submit(function(e) {
    e.preventDefault();
    var formData = $(this).serialize();
    $.post($(this).attr("action"), formData, function() {
      $("#testEmailModal").modal("hide");
      alert("测试邮件发送成功！");
    }).fail(function() {
      alert("发送失败，请重试！");
    });
  });
  

• 配置安全：不要把SMTP用户名、密码硬编码，建议放在Web.config的<appSettings>或<system.net/mailSettings>中。

内容的提问来源于stack exchange，提问作者Dylan West