MVC技术问询：如何在Controller中获取指定HTML标签内容用于邮件发送

我来给你梳理下完整的实现步骤，分前端和后端两部分，都是实际项目里常用的方法：

前端部分：获取HTML并传递到Controller #

首先要拿到mydiv的完整HTML（包括自身标签），这里用outerHTML属性就刚好能满足需求——它会返回元素本身以及所有子元素的HTML代码，正是你要的<div id="mydiv"><div><a>Click Here</a></div></div>格式。

方式1：通过表单提交（适合简单场景） #

先给页面加一个表单，把HTML内容放到隐藏输入框里：

<form id="myForm" action="/YourController/SendEmail" method="post">
    <input type="hidden" id="htmlContent" name="htmlContent">
    <button type="button" id="sendBtn">发送邮件</button>
</form>
<div id="mydiv">
    <div>
        <a>Click Here</a>
    </div>
</div>

然后写点击按钮的JavaScript逻辑：

document.getElementById('sendBtn').addEventListener('click', function() {
    // 获取目标区域的完整HTML
    const targetHtml = document.getElementById('mydiv').outerHTML;
    // 把HTML内容赋值给隐藏输入框
    document.getElementById('htmlContent').value = targetHtml;
    // 提交表单到Controller
    document.getElementById('myForm').submit();
});

方式2：AJAX异步提交（适合无刷新场景） #

如果不想页面跳转，用异步请求更友好，这里用原生fetch API举例：

<button id="sendBtn">发送邮件</button>
<div id="mydiv">
    <div>
        <a>Click Here</a>
    </div>
</div>

<script>
document.getElementById('sendBtn').addEventListener('click', async function() {
    const targetHtml = document.getElementById('mydiv').outerHTML;
    // 一定要编码HTML内容，避免特殊字符破坏请求格式
    const encodedHtml = encodeURIComponent(targetHtml);
    
    try {
        const response = await fetch('/YourController/SendEmail', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `htmlContent=${encodedHtml}`
        });
        
        const result = await response.json();
        if (result.success) {
            alert('邮件发送成功！');
        } else {
            alert(`发送失败：${result.error}`);
        }
    } catch (err) {
        console.error('请求出错:', err);
        alert('发送请求出错，请检查控制台');
    }
});
</script>

后端部分：接收HTML并发送邮件 #

这里以ASP.NET MVC为例，其他后端框架（比如Java Spring、PHP）逻辑类似，核心是接收HTML字符串，然后作为邮件正文发送：

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

public class YourController : Controller
{
    [HttpPost]
    public JsonResult SendEmail(string htmlContent)
    {
        try
        {
            // 构造邮件对象
            var mail = new MailMessage();
            mail.From = new MailAddress("your-sender-email@example.com");
            mail.To.Add(new MailAddress("recipient-email@example.com"));
            mail.Subject = "来自网站的内容邮件";
            // 把接收的HTML作为邮件正文
            mail.Body = htmlContent;
            // 关键！必须设置为true，否则HTML会被当作纯文本显示
            mail.IsBodyHtml = true;

            // 配置SMTP客户端（根据你的邮件服务商调整参数）
            using (var smtp = new SmtpClient("smtp.example.com", 587))
            {
                smtp.Credentials = new NetworkCredential("your-sender-email@example.com", "your-email-password");
                smtp.EnableSsl = true;
                smtp.Send(mail);
            }

            return Json(new { success = true });
        }
        catch (Exception ex)
        {
            // 捕获异常并返回错误信息
            return Json(new { success = false, error = ex.Message });
        }
    }
}

几个重要注意点 #

• 前端传递HTML时，一定要用encodeURIComponent编码，避免<、>、&这些特殊字符导致请求解析错误
• 后端必须设置IsBodyHtml = true，否则邮件里会直接显示原始HTML代码，而不是渲染后的页面效果
• SMTP的配置参数要对应你的邮件服务商：比如Gmail的SMTP是smtp.gmail.com，端口587；Outlook是smtp.office365.com，端口587
• 如果是ASP.NET Core项目，SmtpClient已经被标记为过时，推荐使用MailKit库，逻辑和上面一致，只是API略有不同

内容的提问来源于stack exchange，提问作者Niang Moore