https://laihao2.com/Home/Contact_Create
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
資料表>
USE [ProductDB]
GO
/****** Object: Table [dbo].[ChineseJapaneseTable] Script Date: 2024/10/3 下午 06:16:42 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[ChineseJapaneseTable](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Chinese] [nvarchar](max) NULL,
[Japanese] [nvarchar](max) NULL,
[Note] [nvarchar](max) NULL,
[Category] [nvarchar](50) NULL,
CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
這段 SQL 代碼用於在名為 ProductDB
的數據庫中創建一個名為 ChineseJapaneseTable
的表。以下是對代碼的逐行解釋:
USE [ProductDB]
GO
這行代碼表示將當前數據庫上下文設置為 ProductDB
,後續的所有 SQL 操作都將在該數據庫中執行。
/****** Object: Table [dbo].[ChineseJapaneseTable] Script Date: 2024/10/3 下午 06:16:42 ******/
這是一個注釋,說明接下來的 SQL 代碼是用於創建 ChineseJapaneseTable
表,並包含了腳本生成的日期和時間。
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_NULLS ON
:當該選項開啟時,任何與 NULL 進行比較的條件(如 column_name = NULL
)都將返回 FALSE。要檢查 NULL 值,應使用 column_name IS NULL
。SET QUOTED_IDENTIFIER ON
:當該選項開啟時,允許使用雙引號 "
來引用標識符(如列名和表名),從而可以使用關鍵字作為標識符。CREATE TABLE [dbo].[ChineseJapaneseTable](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Chinese] [nvarchar](max) NULL,
[Japanese] [nvarchar](max) NULL,
[Note] [nvarchar](max) NULL,
NULL,
CREATE TABLE [dbo].[ChineseJapaneseTable]
:創建一個名為 ChineseJapaneseTable
的表,屬於 dbo
架構。[ID] [int] IDENTITY(1,1) NOT NULL
:定義一個名為 ID
的整數字段,使用 IDENTITY(1,1)
表示該字段是自動遞增的,初始值為 1,每次遞增 1,且該字段不能為空。[Chinese] [nvarchar](max) NULL
:定義一個名為 Chinese
的字段,數據類型為可變長度的 Unicode 字符串,最大長度為 max
,可以為空。[Japanese] [nvarchar](max) NULL
:定義一個名為 Japanese
的字段,類型與 Chinese
相同。[Note] [nvarchar](max) NULL
:定義一個名為 Note
的字段,類型與 Chinese
相同。 NULL
:定義一個名為 Category
的字段,數據類型為可變長度的 Unicode 字符串,最大長度為 50,可以為空。 CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
CONSTRAINT [PK__ChineseJ__3214EC27D468CAC3] PRIMARY KEY CLUSTERED
:定義一個主鍵約束,名為 PK__ChineseJ__3214EC27D468CAC3
,並且該主鍵是聚集索引。([ID] ASC)
:指定以 ID
列為主鍵,並按升序排列。WITH (...) ON [PRIMARY]
:指定了聚集索引的一些選項,如:
PAD_INDEX = OFF
:不填充索引頁。STATISTICS_NORECOMPUTE = OFF
:允許自動重新計算統計信息。IGNORE_DUP_KEY = OFF
:不忽略重覆鍵值錯誤。ALLOW_ROW_LOCKS = ON
和 ALLOW_PAGE_LOCKS = ON
:允許行級和頁級鎖。OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF
:不優化順序鍵。) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
) ON [PRIMARY]
:指定表的存儲位置為主文件組。TEXTIMAGE_ON [PRIMARY]
:指示對 nvarchar(max)
類型的數據使用的存儲位置,也為主文件組。這段代碼創建了一個存儲中文和日文文本的表,便於進行多語言處理和管理,並為 ID
列設置了主鍵以確保每一行數據的唯一性。
產生Models裡面類別檔dao>按:建置>
namespace WebApplication5.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity.Spatial;
using System.Linq;
using System.Web;
using System.Web.Mvc;
[Table("ChineseJapaneseTable")]
public partial class ChineseJapaneseTable
{
[Key]
[Display(Name = "Id")]
public int Id { get; set; }
// 中文字段,允許不限制長度
[Display(Name = "中文")]
[Column(TypeName = "nvarchar(max)")]
public string Chinese { get; set; }
// 日文字段,允許不限制長度
[Display(Name = "日文")]
[Column(TypeName = "nvarchar(max)")]
public string Japanese { get; set; }
// 備註字段,允許不限制長度
[Display(Name = "備註")]
[Column(TypeName = "nvarchar(max)")]
public string Note { get; set; }
// 分類字段,限定最大長度為 50
[Display(Name = "分類")]
[StringLength(50)]
public string Category { get; set; }
}
}
這段代碼定義了一個名為 ChineseJapaneseTable
的模型類,使用 C# 和 Entity Framework(EF)框架。它主要用於表示一個包含中文、日文和其他相關字段的數據庫表。以下是代碼中各部分的詳細解釋:
namespace WebApplication5.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity.Spatial;
using System.Linq;
using System.Web;
using System.Web.Mvc;
}
namespace WebApplication5.Models
: 定義了一個命名空間,包含與 Web 應用程序相關的模型。using
語句:引入了一些必要的類和命名空間,方便後續代碼的使用,例如數據注解、數據庫表的映射等。[Table("ChineseJapaneseTable")]
public partial class ChineseJapaneseTable
[Table("ChineseJapaneseTable")]
: 這個特性指定了這個模型類對應的數據庫表名為 ChineseJapaneseTable
。public partial class ChineseJapaneseTable
: 定義了一個公共的部分類(partial class),這允許類的定義在多個文件中分開。此類表示與 ChineseJapaneseTable
數據庫表相關的實體。[Key]
[Display(Name = "Id")]
public int Id { get; set; }
[Key]
: 這個特性表示 Id
屬性是該表的主鍵。[Display(Name = "Id")]
: 用於在用戶界面中顯示字段名稱的特性,表示這個屬性在視圖中顯示時的名稱為 "Id"。public int Id { get; set; }
: 定義一個名為 Id
的整數字段,代表表的唯一標識符。接下來的字段是用於存儲中文、日文、備注和分類信息的:
[Display(Name = "中文")]
[Column(TypeName = "nvarchar(max)")]
public string Chinese { get; set; }
[Display(Name = "中文")]
: 顯示名稱為 "中文"。[Column(TypeName = "nvarchar(max)")]
: 說明數據庫中的這個字段的類型為 nvarchar(max)
,允許存儲任意長度的字符串。public string Chinese { get; set; }
: 定義一個名為 Chinese
的字符串字段。相同的方式也適用於日文和備註字段:
[Display(Name = "日文")]
[Column(TypeName = "nvarchar(max)")]
public string Japanese { get; set; }
[Display(Name = "備註")]
[Column(TypeName = "nvarchar(max)")]
public string Note { get; set; }
最後是分類字段:
[Display(Name = "分類")]
[StringLength(50)]
public string Category { get; set; }
[StringLength(50)]
: 這個特性限制了 Category
字段的最大長度為 50 個字符。[Display(Name = "分類")]
: 顯示名稱為 "分類"。ChineseJapaneseTable
表映射為一個 C# 對象模型,提供了中文、日文、備注和分類的存儲結構。通過使用數據注解,這些字段還可以在視圖中以人性化的方式展示,方便用戶理解和操作。Controllers裡面的Entities>
public ActionResult Contact_Create()
{
ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
return View();
}
//[AllowAnonymous]
[HttpPost]
public ActionResult Contact_Create(ChineseJapaneseTable cus)
{
if (ModelState.IsValid)
{
// 添加到數據庫
_db.ChineseJapaneseTable.Add(cus);
_db.SaveChanges(); // 保存更改到數據庫
return RedirectToAction("Contact");
}
return View(cus); // 如果模型驗證失敗,返回表單視圖並顯示錯誤信息
}
解釋程式碼
這段 C# 代碼是一個 ASP.NET MVC 控制器的部分,涉及到創建一個聯系表單的功能。以下是對代碼的詳細解釋:
public ActionResult Contact_Create()
:
GET
請求的方法,目的是展示聯系表單的視圖。ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
:設置視圖的布局文件為 _Layout.cshtml
,這個文件通常是共享的布局,用於定義頁面的整體結構。return View();
:返回一個默認的視圖,通常是與方法同名的視圖(Contact_Create.cshtml
),用於展示聯系表單。
HttpPost
方法[HttpPost] public ActionResult Contact_Create(ChineseJapaneseTable cus)
:
POST
請求的方法,目的是處理用戶提交的表單數據。它接收一個參數 cus
,這個參數是 ChineseJapaneseTable
類型的實例,代表表單提交的數據。if (ModelState.IsValid)
:檢查提交的模型(即用戶輸入的數據)是否有效。如果所有驗證通過,則執行以下操作。_db.ChineseJapaneseTable.Add(cus);
:
cus
添加到數據庫上下文中,準備保存到 ChineseJapaneseTable
表。_db.SaveChanges();
:將所有掛起的更改保存到數據庫中,執行實際的插入操作。
return RedirectToAction("Contact");
:
return View(cus);
:如果模型驗證失敗,返回原來的視圖,並將用戶輸入的數據 cus
傳回視圖。這樣可以在視圖中顯示用戶輸入的值以及任何驗證錯誤信息。產生畫面View程式碼
@model WebApplication5.Models.ChineseJapaneseTable
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Contact_Create";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Contact_Create</title>
<style>
.form-control {
width: 100%; /* 或使用具体的宽度,比如 300px */
box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的宽度 */
}
</style>
</head>
<body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>中文和日文資料表:新增</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Chinese, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Chinese, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
@Html.ValidationMessageFor(model => model.Chinese, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Japanese, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Japanese, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
@Html.ValidationMessageFor(model => model.Japanese, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Note, new { htmlAttributes = new { @class = "form-control", style = "width: 100%;" } })
@Html.ValidationMessageFor(model => model.Note, "", new { @class = "text-danger" })
</div>
</div>
@*<div class="form-group">
@Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Category, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
</div>
</div>*@
<div class="form-group">
@Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
@{
var listItemsCategory = new List<SelectListItem>
{
new SelectListItem { Text = "請選擇", Value = "請選擇", Selected = true },
new SelectListItem { Text = "入境審查", Value = "入境審查" },
new SelectListItem { Text = "N2考試內容", Value = "N2考試內容" },
new SelectListItem { Text = "訂單", Value = "訂單" },
new SelectListItem { Text = "職場日文", Value = "職場日文" },
new SelectListItem { Text = "生活日語", Value = "生活日語" },
new SelectListItem { Text = "俚語", Value = "俚語" },
new SelectListItem { Text = "格言", Value = "格言" },
new SelectListItem { Text = "其他", Value = "其他" },
new SelectListItem { Text = "買東西", Value = "買東西" }
};
}
@Html.DropDownList("Category", listItemsCategory, htmlAttributes: new { @class = "form-control", style = "width: 100%;" })
@Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="新增" class="btn btn-default" />
</div>
</div>
</div>
}
</body>
</html>
解釋程式碼
這段代碼是一個 ASP.NET MVC 的 Razor 視圖,主要用於顯示一個表單,允許用戶輸入中文和日文的數據。下面是對代碼的詳細解釋:
@model WebApplication5.Models.ChineseJapaneseTable
:
ChineseJapaneseTable
,這意味著視圖將使用該模型的屬性來生成表單。Layout = "~/Views/Shared/_Layout.cshtml";
:
_Layout.cshtml
,這是一個共享的布局文件,通常定義了頁面的總體結構(例如,導航欄、頁腳等)。ViewBag.Title = "Contact_Create";
:
<title>
標簽和可能的頁面標題。<!DOCTYPE html>
、<html>
、<head>
、<body>
:
<style>
標簽中:
.form-control
的樣式,確保表單控件寬度為 100%,並且設置 box-sizing: border-box;
以避免在添加 padding
和 border
時寬度變化。@Scripts.Render("~/bundles/jquery")
和 @Scripts.Render("~/bundles/jqueryval")
:
@using (Html.BeginForm())
:
POST
動作。@Html.AntiForgeryToken()
:
表單的整體結構為 .form-horizontal
,表示使用水平排列的表單。
<h4>中文和日文資料表:新增</h4>
:
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
:
text-danger
類樣式顯示為紅色。對於每個輸入字段(如 Chinese
、Japanese
和 Note
),都使用以下結構:
@Html.LabelFor(...)
:生成標簽。@Html.EditorFor(...)
:生成輸入控件,帶有 form-control
類樣式,確保寬度為 100%。@Html.ValidationMessageFor(...)
:顯示特定字段的驗證錯誤信息(如果有的話)。分類下拉框:
@Html.DropDownList(...)
生成下拉列表,包含多個選項,允許用戶選擇分類。List<SelectListItem>
創建的,包含不同的分類。<input type="submit" value="新增" class="btn btn-default" />
:
}
:關閉 using
語句,結束表單的 HTML 結構。這段代碼創建了一個表單,用於輸入中文和日文的數據,並提供了分類選擇。表單中包括了適當的驗證信息,確保用戶輸入的數據有效。整體設計上,使用了 ASP.NET MVC 的 Razor 語法來動態生成 HTML,結合了表單控件的樣式和驗證功能。
大家明天見~