多表单分别发送邮件至对应邮箱的实现问题求助

我来帮你搞定这个问题！你目前的代码里有几个关键问题导致CloudForm无法正常工作，咱们一步步修正：

问题分析 #

1. 两个表单的输入框ID都是txtEmail，这会导致JS获取值时始终拿到第一个输入框的内容，无法区分是哪个表单的输入
2. 你的AJAX代码只给PrintForm绑定了提交事件，CloudForm完全没被处理
3. 后台Controller的收件邮箱是固定死的，没有区分是来自哪个表单的请求

步骤1：修改HTML，给输入框设置唯一ID #

把两个表单里的输入框ID改成不同的，避免DOM选择冲突：

PrintForm 代码 #

<form id="PrintForm">
  <input type="text" id="txtPrintEmail" placeholder="输入邮箱" />
  <input type="submit" value="Send to Print" />
</form>
<br>

CloudForm 代码 #

<form id="CloudForm">
  <input type="text" id="txtCloudEmail" placeholder="输入邮箱" />
  <input type="submit" value="Send to Cloud" />
</form>

步骤2：修改AJAX代码，处理两个表单的提交事件 #

给两个表单分别绑定提交逻辑，并且传递一个formType参数告诉后台是哪个表单的请求，同时封装重复的AJAX逻辑减少冗余：

<script>
$(document).ready(function () {
    // 处理PrintForm提交
    $("#PrintForm").submit(function (e) {
        e.preventDefault();
        var email = $("#txtPrintEmail").val();
        sendEmail(email, "Print");
    });

    // 处理CloudForm提交
    $("#CloudForm").submit(function (e) {
        e.preventDefault();
        var email = $("#txtCloudEmail").val();
        sendEmail(email, "Cloud");
    });

    // 封装通用的邮件发送AJAX逻辑
    function sendEmail(email, formType) {
        $.ajax({
            type: 'POST',
            url: "/xxx/AjaxMethod",
            dataType: 'json',
            data: { 
                email: email,
                formType: formType // 新增参数，标识当前提交的表单类型
            },
            success: function (status) {
                console.log(`Email sent to ${formType} successfully!`);
            },
            error: function () {
                console.log('Something went wrong - debug it!');
            }
        });
    }
});
</script>

步骤3：修改Controller代码，根据表单类型发送邮件 #

在后台接收formType参数，根据这个参数切换收件邮箱和邮件主题：

[HttpPost]
public JsonResult AjaxMethod(string email, string formType)
{
    var subject = "";
    var sendTo = "";
    var errorMessage = "";

    BookingViewModel Booking book = new Booking { Email = email };

    // 根据表单类型配置收件邮箱和主题
    if (formType == "Print")
    {
        subject = "Print";
        sendTo = "Print@Print.com";
    }
    else if (formType == "Cloud")
    {
        subject = "Cloud";
        sendTo = "Cloud@Cloud.com"; // 替换成你的Cloud指定邮箱
    }
    else
    {
        // 处理未知的表单类型请求
        errorMessage = "Invalid form type";
        return Json(new { book, errorMessage });
    }

    try
    {
        // 初始化WebMail配置
        WebMail.SmtpServer = "smtp";
        WebMail.SmtpPort = 25;
        WebMail.UserName = "email@email.com";
        WebMail.Password = "";
        WebMail.From = "email@email.com";
        WebMail.EnableSsl = true;
        WebMail.SmtpUseDefaultCredentials = false;

        // 发送邮件
        WebMail.Send(
            to: sendTo,
            subject: subject,
            body: $"email: {email}<br>"
        );
    }
    catch (Exception ex)
    {
        errorMessage = ex.Message;
    }

    return Json(new { book, errorMessage });
}

额外优化建议 #

• 可以给输入框加前端邮箱格式校验，比如用正则判断，避免无效请求发送到后台
• 把SMTP配置项放到web.config或专门的配置文件中，不要硬编码在Controller里，方便后续维护和修改

内容的提问来源于stack exchange，提问作者7 seconds