iT邦幫忙

2024 iThome 鐵人賽
DAY 27
0
自我挑戰組

asp.net可以變出那些功能系列 第 27 篇

簡約風

16th鐵人賽
70 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/Contact19

https://ithelp.ithome.com.tw/upload/images/20241004/20119035Vpd51aBtjh.png
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
加入資料庫
要在 MSSQL 中生成一張包含 name 和 message 字段的表，可以使用以下 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 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22202 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙