https://laihao2.com/Home/Contact19
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
表中。
識別規則選是才會真的填入~
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
視圖的顯示和表單提交。以下是詳細的解釋:
Contact19
(GET 請求)public ActionResult Contact19()
{
ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
return View();
}
Contact19
視圖頁面。~/Views/Shared/_Layout.cshtml
,確保該視圖使用共享的布局文件。return View();
返回 Contact19
視圖給用戶。這個視圖會是一個表單頁面(假設),用於用戶輸入信息。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 頁面,包含多個部分的靜態內容和表單提交邏輯。以下是代碼的詳細解釋:
@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"
。<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">
: 定義頁面的語言為繁體中文。<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>
: 提交按鈕,當用戶點擊時,表單將提交到服務器。這些部分主要展示網站內容,分別介紹了作者的信息、作品集、聯系信息和常見問題。
#about-me
: 展示關於作者的介紹。#portfolio
: 展示作者的作品和項目,提供詳細的項目描述。#contact
: 提供聯系方式,如電子郵件、電話和社交媒體鏈接。#faq
: 列出常見問題及其答案。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 請求,將數據發送到服務器
});
});
event.preventDefault()
防止表單的默認提交行為。FormData
收集表單數據,並將其轉換為一個對象。這段代碼是一個基於 ASP.NET MVC 的視圖文件,展示了一個簡潔風格的網站頁面,包含靜態的內容部分和一個表單提交功能。JavaScript 提供了一些交互效果和表單數據處理邏輯。
大家明天見~