iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0

https://laihao2.com/Home/Contact19

https://ithelp.ithome.com.tw/upload/images/20241004/20119035Vpd51aBtjh.png
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
加入資料庫
要在 MSSQL 中生成一張包含 namemessage 字段的表,可以使用以下 SQL 語法:

CREATE TABLE ContactForm (
    Id INT PRIMARY KEY IDENTITY(1,1), -- 自增主鍵
    Name NVARCHAR(100) NOT NULL, -- 姓名字段,最多100字符
    Message NVARCHAR(MAX) NOT NULL, -- 留言字段,存儲較長的文本
    SubmittedAt DATETIME DEFAULT GETDATE() -- 提交時間,默認為當前時間
);

這個 ContactForm 表結構簡單,包含以下字段:

  • Id: 自增主鍵,唯一標識每條記錄。
  • Name: 用戶提交的姓名,使用 NVARCHAR(100) 以支持多種字符集。
  • Message: 用戶提交的留言,使用 NVARCHAR(MAX) 以允許長文本。
  • SubmittedAt: 自動記錄表單提交的時間,默認值為當前時間 (GETDATE())。

在前端提交表單數據後,可以通過 AJAX 將數據傳遞到後端,並將這些數據插入到 ContactForm 表中。
https://ithelp.ithome.com.tw/upload/images/20241004/20119035kq3DQktKMQ.png
識別規則選是才會真的填入~

Controllers裡面的Entities>

程式碼

public ActionResult Contact19()
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
            return View();
        }
        //[AllowAnonymous]
        [HttpPost]


        public ActionResult Contact19(ContactForm cus)
        {
            if (ModelState.IsValid)
            {
                cus.SubmittedAt = DateTime.Now; // 設置當前時間
                      // 添加到數據庫
               _db.ContactForm.Add(cus);
                _db.SaveChanges();                   // 保存更改到數據庫

                return RedirectToAction("Contact19_List");
            }

            return View(cus); // 如果模型驗證失敗,返回表單視圖並顯示錯誤信息
        }

解釋程式碼
這個代碼定義了一個 ASP.NET MVC 控制器中的兩個方法,負責處理 Contact19 視圖的顯示和表單提交。以下是詳細的解釋:

1. Contact19 (GET 請求)

public ActionResult Contact19()
{
    ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
    return View();
}
  • 作用: 這個方法響應一個 GET 請求,用於顯示 Contact19 視圖頁面。
  • ViewBag.Layout: 這行代碼設定了頁面的布局文件為 ~/Views/Shared/_Layout.cshtml,確保該視圖使用共享的布局文件。
  • 返回值: return View(); 返回 Contact19 視圖給用戶。這個視圖會是一個表單頁面(假設),用於用戶輸入信息。

2. Contact19 (POST 請求)

[HttpPost]
public ActionResult Contact19(ContactForm cus)
{
    if (ModelState.IsValid)
    {
        cus.SubmittedAt = DateTime.Now; // 設置當前時間
        // 添加到數據庫
        _db.ContactForm.Add(cus);
        _db.SaveChanges(); // 保存更改到數據庫

        return RedirectToAction("Contact19_List");
    }

    return View(cus); // 如果模型驗證失敗,返回表單視圖並顯示錯誤信息
}
  • [HttpPost] 屬性: 指定這是一個處理 POST 請求 的方法。POST 請求通常用於提交表單數據。

  • 參數 ContactForm cus: 方法接受一個 ContactForm 類型的對象 cus,這個對象包含從表單中提交的數據。

  • ModelState.IsValid:

    • 這個條件檢查傳遞的表單數據是否滿足模型驗證要求。如果數據有效(通過了所有驗證規則),則執行後續操作。
  • cus.SubmittedAt = DateTime.Now;:

    • 這行代碼設置 SubmittedAt 字段為當前時間,用於記錄表單提交的時間。
  • _db.ContactForm.Add(cus);_db.SaveChanges();:

    • 這兩行代碼負責將用戶提交的 cus 對象添加到數據庫中,並調用 SaveChanges() 將更改保存到數據庫。這里的 _db 是數據庫上下文,負責與數據庫進行交互。
  • RedirectToAction("Contact19_List"):

    • 數據保存成功後,用戶會被重定向到另一個頁面(Contact19_List),可能是一個列表頁,顯示所有提交的聯系表單記錄。
  • 返回表單視圖:

    • 如果表單數據驗證失敗(ModelState.IsValid 返回 false),則重新返回表單視圖,並將已經輸入的數據顯示出來,方便用戶修正錯誤。

總結:

  • Contact19(GET 請求)負責顯示表單視圖。
  • Contact19(POST 請求)負責處理表單提交的數據,進行驗證,將數據保存到數據庫,並在成功後重定向到另一個頁面。

ProductDBContext也要記得加入,參考前幾天

產生畫面View程式碼

@model WebApplication5.Models.ContactForm

@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{
    ViewBag.Title = "Contact19";
}

<div class="farm-wrapper">

    <h3>作品-簡約風網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <!DOCTYPE html>
            <html lang="zh-TW">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>簡約風網站</title>
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="Content/css/reset.css">
                <link rel="stylesheet" href="Content/css/farm-style.css">
                <style>
                    body {
                        font-family: sans-serif;
                        margin: 0;
                        padding: 0;
                    }

                    header, footer {
                        background-color: #f0f0f0;
                        text-align: center;
                    }

                    header {
                        padding: 20px;
                    }

                    footer {
                        padding: 10px;
                    }

                    nav ul {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                    }

                    nav li {
                        display: inline-block;
                        margin: 0 10px;
                    }

                    main {
                        padding: 20px;
                    }
                </style>
            </head>
            <body>
                <header>
                    <h1>我的網站</h1>
                    <nav>
                        <ul>
                            <li><a href="#">首頁</a></li>
                            <li><a href="#">關於我</a></li>
                            <li><a href="#">作品</a></li>
                            <li><a href="#">聯絡</a></li>
                        </ul>
                    </nav>
                </header>

                <main>
                    <h2>歡迎來到我的網站</h2>
                    <p>這是一個簡潔風格的網站範例。</p>
                </main>
                @*<form id="contactForm">
                    <label for="name">姓名:</label>
                    <input type="text" id="name" name="name" required>
                    <label for="message">留言:</label>
                    <textarea id="message" name="message" required></textarea>
                    <button type="submit">提交</button>
                </form>*@

                <form asp-action="Contact19" method="post">
                    <label for="name">姓名:</label>
                    <input type="text" id="name" name="Name" value="@Model" required>

                    <label for="message">留言:</label>
                    <textarea id="message" name="Message" required>@Model</textarea>

                    <button type="submit">提交</button>
                </form>
                <section id="about-me">
                    <h2>關於我</h2>
                    <p>你好,我是[你的名字]。我是一名[你的職業或興趣],專註於[相關領域]。這個網站展示了我的作品和對[相關主題]的熱情。</p>
                    <p>我擁有[相關經驗或技能],並且一直在[相關領域]努力提升自己。我相信[某種理念或信念],並且希望通過這個平台與更多志同道合的人交流。</p>
                </section>
                <section id="portfolio">
                    <h2>我的作品</h2>
                    <p>在這裏你可以找到我過去的一些項目和作品。我致力於[描述你的工作風格或專長],並且每個項目都體現了我對[相關領域]的熱情。</p>
                    <ul>
                        <li>
                            <h3>項目名稱 1</h3>
                            <p>簡要描述項目的目標、過程和結果。你可以在這裏展示你在項目中扮演的角色和所使用的技術。</p>
                        </li>

                        <!-- 更多項目 -->
                    </ul>
                </section>
                <section id="contact">
                    <h2>聯繫我</h2>
                    <p>如果你有任何問題或想要進一步了解我的工作,請隨時通過以下方式聯繫我:</p>
                    <ul>
                        <li>電子郵件:<a href="mailto:your.email@example.com">your.email@example.com</a></li>
                        <li>電話:[你的電話號碼]</li>
                        <li>社交媒體:<a href="[你的社交媒體鏈接]">[你的社交媒體平台]</a></li>
                    </ul>
                </section>
                <section id="faq">
                    <h2>常見問題</h2>
                    <dl>
                        <dt>問題 1</dt>
                        <dd>答案 1。你可以詳細解答一些常見問題。</dd>
                        <dt>問題 2</dt>
                        <dd>答案 2。提供有用的來解答訪問者可能遇到的問題。</dd>
                    </dl>
                </section>


                <script>
                    // script.js
                    document.addEventListener('DOMContentLoaded', () => {
                        const navLinks = document.querySelectorAll('nav a');

                        navLinks.forEach(link => {
                            link.addEventListener('mouseover', () => {
                                link.style.color = 'blue';  // 鼠標懸停時變色
                            });

                            link.addEventListener('mouseout', () => {
                                link.style.color = '';  // 鼠標移開時恢覆原色
                            });
                        });
                    });
                    // script.js
                    document.addEventListener('DOMContentLoaded', () => {
                        const form = document.getElementById('contactForm');

                        form.addEventListener('submit', (event) => {
                            event.preventDefault();  // 防止表單的默認提交行為

                            const formData = new FormData(form);
                            const data = {};
                            formData.forEach((value, key) => {
                                data[key] = value;
                            });

                            console.log('表單數據:', data);

                            // 可以在這里進行 AJAX 請求,將數據發送到服務器
                        });
                    });

                </script>
            </body>
        </html>


解釋程式碼
這個視圖文件使用 Razor 語法和 HTML 來創建一個 ASP.NET MVC 頁面,包含多個部分的靜態內容和表單提交邏輯。以下是代碼的詳細解釋:

1. Razor 模型聲明和布局

@model WebApplication5.Models.ContactForm
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{ ViewBag.Title = "Contact19"; }
  • @model WebApplication5.Models.ContactForm: 定義該視圖使用 ContactForm 模型類。這個模型類包含了表單的字段數據,例如姓名和留言。
  • Layout = "~/Views/Shared/_Layout.cshtml": 指定該視圖使用共享的布局文件 _Layout.cshtml
  • ViewBag.Title: 設置頁面標題為 "Contact19"

2. 頁面結構

<div class="farm-wrapper">
    <h3>作品-簡約風網站</h3>
    <h3>建置中</h3>

    <div class="farm-content">
        <head>
            <!DOCTYPE html>
            <html lang="zh-TW">
            <head>
                ...
            </head>
            <body>
                <header>
                    ...
                </header>
                <main>
                    <h2>歡迎來到我的網站</h2>
                    <p>這是一個簡潔風格的網站範例。</p>
                </main>
  • 這里定義了一個包含標題和樣式的簡潔網站頁面結構,包括頭部導航欄、內容區域、頁腳等。
  • h3 標簽: 顯示簡約風網站的標題,並標注“建置中”。
  • <html lang="zh-TW">: 定義頁面的語言為繁體中文。

3. 表單部分

<form asp-action="Contact19" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="Name" value="@Model" required>

    <label for="message">留言:</label>
    <textarea id="message" name="Message" required>@Model</textarea>

    <button type="submit">提交</button>
</form>
  • asp-action="Contact19": 定義表單的提交目標為 Contact19,與控制器中的 POST 方法綁定。
  • <input><textarea>: 用於接收用戶輸入的姓名和留言。@Model 是 Razor 表達式,用於綁定模型數據到表單字段中。
  • required 屬性: 表示姓名和留言是必填字段。
  • <button>: 提交按鈕,當用戶點擊時,表單將提交到服務器。

4. 關於我、作品展示、聯系、常見問題部分

這些部分主要展示網站內容,分別介紹了作者的信息、作品集、聯系信息和常見問題。

  • #about-me: 展示關於作者的介紹。
  • #portfolio: 展示作者的作品和項目,提供詳細的項目描述。
  • #contact: 提供聯系方式,如電子郵件、電話和社交媒體鏈接。
  • #faq: 列出常見問題及其答案。

5. JavaScript 邏輯

document.addEventListener('DOMContentLoaded', () => {
    const navLinks = document.querySelectorAll('nav a');

    navLinks.forEach(link => {
        link.addEventListener('mouseover', () => {
            link.style.color = 'blue';  // 鼠標懸停時變色
        });

        link.addEventListener('mouseout', () => {
            link.style.color = '';  // 鼠標移開時恢覆原色
        });
    });
});

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('contactForm');

    form.addEventListener('submit', (event) => {
        event.preventDefault();  // 防止表單的默認提交行為

        const formData = new FormData(form);
        const data = {};
        formData.forEach((value, key) => {
            data[key] = value;
        });

        console.log('表單數據:', data);

        // 可以在這里進行 AJAX 請求,將數據發送到服務器
    });
});
  • 第一段 JavaScript 添加了鼠標懸停效果,當用戶將鼠標移到導航鏈接上時,鏈接的顏色會變為藍色,移開後恢覆原狀。
  • 第二段 JavaScript 負責處理表單提交事件:
    • event.preventDefault() 防止表單的默認提交行為。
    • 使用 FormData 收集表單數據,並將其轉換為一個對象。
    • 最後,表單數據被打印到控制台,實際場景中可用於 AJAX 請求。

總結

這段代碼是一個基於 ASP.NET MVC 的視圖文件,展示了一個簡潔風格的網站頁面,包含靜態的內容部分和一個表單提交功能。JavaScript 提供了一些交互效果和表單數據處理邏輯。

大家明天見~/images/emoticon/emoticon01.gif


上一篇
現在很流行的VUE
下一篇
簡約風首頁看留言的地方
系列文
asp.net可以變出那些功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言