Day-23 ASP.NET MVC 之 SMTP 發送 Email

2023 iThome 鐵人賽

DAY 23

Software Development

ASP.NET MVC基礎修練：從菜開始系列第 23 篇

15th鐵人賽

Nash

2023-10-08 22:11:42

701 瀏覽

分享至

1.在 Content 新增一個 css 取名叫 styles.css

程式碼如下:

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

.button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

    .button:hover {
        background-color: #0056b3;
    }

2.再新增一個 controller 名叫 EmailController.cs

這邊的 host 先用 msr.hinet.net
程式碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net;
using System.Net.Mail;


namespace WebApplication7.Controllers
{
    public class EmailController : Controller
    {
        //
        // GET: /Email/

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult SendMail(string to, string subject, string body)
        {
            try
            {
                // 配置SMTP客戶端
                SmtpClient client = new SmtpClient("msr.hinet.net");
                client.Port = 25; // SMTP伺服器設置PORT號
                //client.UseDefaultCredentials = false;
                //client.Credentials = new NetworkCredential("your_username", "your_password"); // SMTP帳戶設定

                // 創建郵件
                MailMessage message = new MailMessage();
                message.From = new MailAddress("From@SMTP.com"); 
                message.To.Add(new MailAddress(to));
                message.Subject = subject;
                message.Body = body;

                // 發送郵件
                client.Send(message);

                ViewBag.Message = "發送成功！";
            }
            catch (Exception ex)
            {
                ViewBag.ErrorMessage = "發送失敗：" + ex.Message;
            }

            return View("Index");
        }

    }
}

程式碼說明如下

命名空間：這個程式引用了一些不同的命名空間，
包括用於郵件發送的 System.Net 和 System.Net.Mail
以及 ASP.NET MVC 的相關命名空間。

SendMail 方法：這是一個 POST 請求的操作方法，用於實際發送郵件。當用戶提交表單時，該方法將被呼叫。

to、subject 和 body 是作為 POST 請求的參數，包含了收件人地址、主題和郵件內容。

SmtpClient 是用於配置 SMTP 客戶端的類別，它指定了 SMTP 伺服器的地址和PORT號。

MailMessage 是用於創建郵件的類別，它包含了寄件人、收件人、主題和郵件內容。

3.新增一個 View: Index.cshtml

程式碼如下

<head>
    <meta name="viewport" content="width=device-width" />
    <title>SMTP 範例測試</title>
    <link href="~/Content/styles.css" rel="stylesheet" />
</head>

@using (Html.BeginForm("SendMail", "Mail", FormMethod.Post, new { id = "mailForm" }))
{
    <div class="container">
        <h1>SMTP 範例測試</h1>
        <p>
            <div>
                <label for="to">收件人：</label>
                <input type="text" id="to" name="to" required /> <P>
            </div>
            <div>
                <label for="subject">主題：</label>
                <input type="text" id="subject" name="subject" required /><P>
</div>
            <div>
                <label for="body">郵件內容：</label><br>
                <textarea id="body" name="body" required rows="5"></textarea><br>
            </div>
         
        </p>
        <button class="button">發送郵件</button>
    </div>

}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#mailForm").submit(function (e) {
            e.preventDefault(); 

            var formData = $(this).serialize(); 

            $.ajax({
                type: "POST",
                url: "@Url.Action("SendMail", "Email")", 
                data: formData,
                success: function (result) {
                    result = "發送完成";
                    alert(result); 
                },
                error: function () {
                    alert("發送郵件失敗");
                }
            });
        });
    });
</script>

程式說明如下

表單 ()：使用 Html.BeginForm 方法創建了一個表單，
它的 action 屬性指向 SendMail 方法，controller 是 MailController，並使用 POST 方法提交。
表單具有一個 id 為 "mailForm"。

表單元素：在表單中，有三個輸入元素，分別是「收件人」 (to)、「主題」 (subject) 和「郵件內容」 (body)。
它們都具有 required 屬性，表示這些欄位必須填寫。其中「郵件內容」是一個多行文字區域 ()，使用者可以輸入多行文本。

發送郵件按鈕：使用了一個按鈕，具有 "發送郵件" 的標籤文本，當用戶點擊此按鈕時，將觸發 JavaScript 函數。

JavaScript：在區塊中，使用 jQuery（$(document).ready）設置了當網頁載入完成後的事件處理程序。當使用者提交表單時，將執行以下操作：

e.preventDefault(); 防止表單的默認提交行為。
使用 .serialize() 方法將表單數據序列化為字串。
使用 AJAX 技術向指定 URL 發送 POST 請求，URL 是 SendMail 方法的路徑。
在成功時，顯示 "發送完成" 的訊息。
在發送失敗時，顯示 "發送郵件失敗" 的警告框。
這段程式實現了一個具有表單的網頁，允許用戶輸入郵件的收件人、主題和內容，
並使用 AJAX 技術發送 POST 請求以發送郵件。當郵件成功發送時，將顯示成功訊息，否則顯示錯誤訊息。

執行畫面如下