基本的網站架設跟資料庫架設
接續著專案建立之後，接著開始建立資料庫
參考複習ASP.NET MVC的第一天製作一個MVC專案
需要特別注意的是，建立專案時這次要選擇空白，核心選擇MVC
．建立資料庫
在方案總管下方的App_Date資料夾按右鍵，選擇「加入」→「新增項目」
建立好之後右方的App_Date資料夾下方就會出現該資料庫
點擊資料庫進入資料庫內部，在「伺服器總管」中點擊該資料庫，並在下方的「資料表」資料夾中點擊右鍵，選擇「加入新的資料表」
進入編輯資料表的頁面，輸入需要的資料
．資料表讀取作業
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using prjToDo.Models;//呼叫Models的命名空間namespace prjToDo.Controllers{public class HomeController : Controller{dbToDoEntities db = new dbToDoEntities();// GET: Homepublic ActionResult Index(){var todos = db.tToDo.OrderByDescending(m => m.fDate).ToList(); //透過fDate標籤遞減排序後指定成todos變數return View(todos); //將所有代辦事項回傳到Index.cshtml的view檢視頁面}}}
建立Inedx.cshtml代辦事項檢視頁面
編輯Index內部程式碼
@model IEnumerable<prjToDo.Models.tToDo>@{ViewBag.Title = "代辦事項";}<h2>代辦事項</h2><p>@Html.ActionLink("代辦事項新增", "Create")</p><table class="table"><tr><th>編號</th><th>標題</th><th>圖示</th><th>結案日</th><th></th></tr>@foreach (var item in Model) {<tr><td>@item.fId</td><td>@Html.DisplayFor(modelItem => item.fTitle)</td><td><img src="~/images/@item.fImage" width="32" /></td><td>@DateTime.Parse(item.fDate.ToString()).ToShortDateString()</td><td>@Html.ActionLink("Edit", "Edit", new { id=item.fId }) |@Html.ActionLink("Delete", "Delete", new { id=item.fId })</td></tr>}</table>
執行後畫面
．修改Layout頁面進行頁面修改與合併
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>@ViewBag.Title - 代辦事項管理網站</title><link href="~/Content/Site.css" rel="stylesheet" type="text/css" /><link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /><script src="~/Scripts/modernizr-2.8.3.js"></script></head><body><div class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>@Html.ActionLink("代辦事項管理網站", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })</div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"></ul></div></div></div><div class="container body-content">@RenderBody()<hr /><footer><p>© @DateTime.Now.Year - 代辦事項管理網站</p></footer></div><script src="~/Scripts/jquery-3.4.1.min.js"></script><script src="~/Scripts/bootstrap.min.js"></script></body></html>
．製作新增作業
在HomeController頁面下進行編寫
[HttpPost]public ActionResult Create(string fTitle, string fImage, DateTime fDate){tToDo todo = new tToDo();todo.fTitle = fTitle;todo.fImage = fImage;todo.fDate = fDate;db.tToDo.Add(todo);db.SaveChanges();return RedirectToAction("Index");}
新增以上程式碼
@model prjToDo.Models.tToDo@{ViewBag.Title = "代辦事項新增";}<h2>代辦事項新增</h2>@using (Html.BeginForm()){@Html.AntiForgeryToken()<div class="form-horizontal"><hr />@Html.ValidationSummary(true, "", new { @class = "text-danger" })<div class="form-group"><label class="control-label col-md-2">標題</label><div class="col-md-10">@Html.EditorFor(model => model.fTitle, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.fTitle, "", new { @class = "text-danger" })</div></div><div class="form-group"><label class="control-label col-md-2">圖示</label><div class="col-md-10"><select class="fImage" name="fImage" class="form-control"><option value="0.png">重要</option><option value="1.png">普通</option></select></div></div><div class="form-group"><label class="control-label col-md-2">結案日</label><div class="col-md-10">@Html.EditorFor(model => model.fDate, new { htmlAttributes = new { @class = "form-control",type="date",required="required" } })@Html.ValidationMessageFor(model => model.fDate, "", new { @class = "text-danger" })</div></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>}<div>@Html.ActionLink("返回代辦事項", "Index")</div>
新增以上功能表
執行Layout，主畫面執行「新增代辦事項」
．刪除作業製作
在HomeControllers新增以下程式碼
public ActionResult Delete(int id){var todo = db.tToDo.Where(m => m.fId == id).FirstOrDefault(); //透過傳入id將要刪除的代辦物件指定給ToDodb.tToDo.Remove(todo);db.SaveChanges();return RedirectToAction("index");}
並修改Index.cshtml
執行畫面
．製作修改作業
在HomeControllers下方新增以下程式碼
public ActionResult Edit(int id){var todo = db.tToDo.Where(m => m.fId == id).FirstOrDefault(); //透過傳入id將要刪除的代辦物件指定給ToDoreturn View(todo);}[HttpPost]public ActionResult Edit(int fId, string fTitle, string fImage, DateTime fDate){var todo = db.tToDo.Where(m => m.fId == fId).FirstOrDefault();todo.fTitle = fTitle;todo.fImage = fImage;todo.fDate = fDate;db.SaveChanges();return RedirectToAction("Index");}
接著在Edit反白後右鍵，選擇新增檢視
在Index執行，並選擇Edit選項
修改Edit內部程式碼
@model prjToDo.Models.tToDo@{ViewBag.Title = "代辦事項修改";}<h2>代辦事項修改</h2>@using (Html.BeginForm()){@Html.AntiForgeryToken()<div class="form-horizontal"><hr />@Html.ValidationSummary(true, "", new { @class = "text-danger" })@Html.HiddenFor(model => model.fId)<div class="form-group"><label class="control-label col-md-2">標題</label><div class="col-md-10">@Html.EditorFor(model => model.fTitle, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.fTitle, "", new { @class = "text-danger" })</div></div><div class="form-group"><label class="control-label col-md-2">圖示</label><div class="col-md-10"><select class="fImage" name="fImage" class="form-control"><option value="0.png">重要</option><option value="1.png">普通</option></select></div></div><div class="form-group"><label class="control-label col-md-2">完成日</label><div class="col-md-10">@Html.EditorFor(model => model.fDate, new { htmlAttributes = new { @class = "form-control",type="date",required="required" } })@Html.ValidationMessageFor(model => model.fDate, "", new { @class = "text-danger" })</div></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>}<div>@Html.ActionLink("返回代辦事項", "Index")</div>
執行查看解果