ASP.NET MVC项目中实现Bootstrap表单发邮件功能遇阻求助

看起来你卡在了表单提交和邮件发送的环节上，我来一步步帮你搞定这个问题。先把你的Email.cshtml表单补全优化，再配上对应的后端逻辑和配置，确保邮件能正常发送。

第一步：修正前端Bootstrap表单（Email.cshtml） #

你提供的代码里表单部分不完整，我帮你补全并规范Bootstrap的表单结构，同时加入数据验证和防攻击处理：

@{ ViewData["Title"] = "Email"; }

<h2>Send Me An Email!</h2>

@using (Html.BeginForm("SendEmail", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
{
    @Html.AntiForgeryToken()
    
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Your email address" })
            @Html.ValidationMessageFor(m => m.Email)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Subject, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Subject, new { @class = "form-control", placeholder = "Email subject" })
            @Html.ValidationMessageFor(m => m.Subject)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Message, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextAreaFor(m => m.Message, new { @class = "form-control", rows = 5, placeholder = "Your message here" })
            @Html.ValidationMessageFor(m => m.Message)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="submit" class="btn btn-primary">Send Email</button>
        </div>
    </div>

    <!-- 显示发送结果提示 -->
    @if (!string.IsNullOrEmpty(ViewBag.SuccessMessage))
    {
        <div class="col-md-offset-2 col-md-10 alert alert-success">@ViewBag.SuccessMessage</div>
    }
    @if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
    {
        <div class="col-md-offset-2 col-md-10 alert alert-danger">@ViewBag.ErrorMessage</div>
    }
}

这里的关键优化：

• 用Html.BeginForm明确指定提交的Action和控制器，确保表单能正确提交到后端
• 添加AntiForgeryToken防止CSRF攻击
• 绑定ViewModel实现前后端数据验证
• 加入结果提示区域，让用户知道发送状态

第二步：创建邮件ViewModel #

在项目的Models文件夹下新建EmailViewModel.cs，用来统一管理表单数据和验证规则：

using System.ComponentModel.DataAnnotations;

namespace YourProjectName.Models
{
    public class EmailViewModel
    {
        [Required(ErrorMessage = "Please enter your email address")]
        [EmailAddress(ErrorMessage = "Please enter a valid email address")]
        [Display(Name = "Your Email")]
        public string Email { get; set; }

        [Required(ErrorMessage = "Please enter a subject")]
        [Display(Name = "Subject")]
        public string Subject { get; set; }

        [Required(ErrorMessage = "Please enter your message")]
        [Display(Name = "Message")]
        public string Message { get; set; }
    }
}

第三步：后端控制器处理邮件发送 #

在HomeController.cs中添加对应的页面展示和邮件处理方法：

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

public class HomeController : Controller
{
    // 显示邮件表单页面
    public ActionResult Email()
    {
        return View();
    }

    // 处理表单提交，执行邮件发送
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult SendEmail(EmailViewModel model)
    {
        if (ModelState.IsValid)
        {
            try
            {
                // 构建邮件内容
                var mailMessage = new MailMessage();
                mailMessage.From = new MailAddress(model.Email);
                mailMessage.To.Add("your-target-email@example.com"); // 替换成你的目标邮箱
                mailMessage.Subject = model.Subject;
                mailMessage.Body = $"Sender Email: {model.Email}\n\nMessage Content:\n{model.Message}";
                mailMessage.IsBodyHtml = false; // 若需HTML邮件可改为true

                // 配置SMTP客户端（这里以Gmail为例，其他邮箱替换对应参数）
                using (var smtpClient = new SmtpClient("smtp.gmail.com", 587))
                {
                    smtpClient.Credentials = new NetworkCredential("your-smtp-account@gmail.com", "your-smtp-password-or-app-password");
                    smtpClient.EnableSsl = true;
                    smtpClient.Send(mailMessage);
                }

                ViewBag.SuccessMessage = "Email sent successfully! We'll get back to you soon.";
                return View("Email");
            }
            catch (Exception ex)
            {
                ViewBag.ErrorMessage = $"Oops, failed to send email: {ex.Message}";
                return View("Email", model);
            }
        }

        // 验证失败时返回表单，保留用户输入内容
        return View("Email", model);
    }
}

重要提示： #

• 如果你用Gmail，需要开启应用专用密码（若开启了两步验证），或者暂时允许低安全性应用访问（不推荐长期使用）
• 国内邮箱比如QQ、网易，SMTP地址分别是smtp.qq.com、smtp.163.com，端口一般是587或465
• 云服务器（如Azure、阿里云）通常会屏蔽25端口，优先用587端口

第四步：配置Web.config（可选，更优雅的方式） #

把SMTP配置写到Web.config里，避免硬编码：

<configuration>
  <system.net>
    <mailSettings>
      <smtp from="your-smtp-account@gmail.com">
        <network host="smtp.gmail.com" port="587" userName="your-smtp-account@gmail.com" password="your-smtp-password" enableSsl="true" />
      </smtp>
    </mailSettings>
  </system.net>
</configuration>

之后控制器里的SMTP客户端可以简化为：

using (var smtpClient = new SmtpClient())
{
    smtpClient.Send(mailMessage);
}

常见问题排查 #

• 表单没提交：检查Html.BeginForm里的Action和控制器名称是否拼写正确
• 邮件发送失败：核对SMTP地址、端口、账号密码，检查目标邮箱是否把邮件归为垃圾邮件
• 验证不生效：确保项目中引用了jQuery和jQuery Validation脚本（ASP.NET MVC默认会包含，若手动移除需重新添加）

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