MVC
前主頁webform ADO.NET Entity Fromwork增刪修實作
MVC 現在課還是很貴30小時4萬，
壓縮起來
跟不上直接抓
到時候會是一個個專案
PreMVC
WebForm 轉為
Entity Fromework 操作資料庫
VS伺服器總管可以當作簡易的SQL Server
康內訊?
前情提要
有資料庫後利用 entity framework ado.net建立模型
一個實體 屬性
軟體業 架構不變但3%會快速變動才會覺得跟不上
預響應式做準備Bootstrap 鞋帶 版本很重要
版根 3.4 4.3 第一個字為版本 第二個字是修正
所以3 跟 4是不同版本且在bs裡面3與4不相容
介面美化與響應式功能
首頁Index 不使用了要使用index2因為套了主板Site.Master，
框架頁面概念
接下來補足新刪修
Gridview型態 bootstrap樣式
Creat 使用主板頁面的webform
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Create.aspx.cs" Inherits="MVC1.Create" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
自動鏈結主板
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
實作create
畫面做得再漂亮都不一定會操作 UI
只有曾經用過的經驗或是直覺UX才能告訴你怎麼做
寫回資料庫通常
1.datasql
2.ado.net 宣告 contion …
3.MVC方式 ( MVC書裡面有
圖片資料型態複雜 先用 try 看有沒有上傳檔案 才可以上傳
轉型態 邏輯對實體
一般來說在使用者上傳檔案後會把上傳檔案檔名處理才歸檔
圖存進伺服器 檔名存資料庫
操作entitiy fromwork
Using MVC1.Models
DbProductEntities 類別
鑄造db物件
利用entitiy fromwork 寫回去
tProduct 資料表結構寫成類別
如此可直接指定資料進去 ( 但還是要注意轉型 要相對資料型態
decimal 表現範圍比 int 多 比long大
上傳圖片2種方式 1.檔名放資料庫檔案放伺服器分開放 2.檔案值接進資料庫拿出來要用泛型轉回
Entity 建立資料庫物件 在把資料物件傳回model ， 在真的寫進資料庫，重新導向index2
Try 沒發生例外時會 catch 發生例外時 回傳 lblerror 錯誤訊息 ， 寫過 C#所以要編譯
前端
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Create.aspx.cs" Inherits="MVC1.Create" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h2>產品新增</h2>
<div class="form-horizontal">
<hr />
<div class="form-group">
<label for="id" class="control-label col-md-2">編號</label>
<div class="col-md-10">
<asp:TextBox ID="txtId" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-md-2">品名</label>
<div class="col-md-10">
<asp:TextBox ID="txtName" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="price" class="control-label col-md-2">單價</label>
<div class="col-md-10">
<asp:TextBox ID="txtPrice" runat="server" class="form-control" TextMode="Number"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="img" class="control-label col-md-2">圖</label>
<div class="col-md-10">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<asp:Button ID="btnCreate" runat="server" Text="新增" class="btn btn-primary" OnClick="btnCreate_Click" />
<asp:Label ID="lblError" runat="server"></asp:Label>
</div>
</div>
</div>
<div>
<a href="Index2.aspx">返回產品列表</a>
</div>
</asp:Content>
後端
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MVC1.Models;
namespace MVC1
{
public partial class Create : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
//按下[儲存]按鈕
protected void btnCreate_Click(object sender, EventArgs e)
{
try
{
string fileName = "";
//圖片上傳儲存
if (FileUpload1.HasFile)
{
FileUpload1.SaveAs(Server.MapPath("images/" + FileUpload1.FileName));
fileName = FileUpload1.FileName;
}
//新增資料進資料庫
dbProductEntities db = new dbProductEntities();
tProduct product = new tProduct();
product.fId = txtId.Text;
product.fName = txtName.Text;
product.fPrice = Convert.ToDecimal(txtPrice.Text);
product.fImg = fileName;
db.tProduct.Add(product);
db.SaveChanges();
Response.Redirect("Index2.aspx");
}
catch (Exception ex)
{
lblError.Text = ex.Message;
}
}
}
}
發生例外 找不到model實體
把 model 開啟 右鍵 從資料庫更新模型 ( 重建
Entity fromwork 方式 model <-> db 通常就可以
老師接下來會在mvc註記因為 到時 m v c 是跳著做的 (有講義
下課後上課 實作 edit delete
新增create頁面是個空的表單去寫出來的但
編輯edit頁面必須要有原來的值才能讓人有辦法更改
所以新增頁面後將原本的頁面內容複製過來並改為編輯相關
不能編集的內容 有兩種方式 1 直接砍掉 2 readonly
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Edit.aspx.cs" Inherits="MVC1.Edit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h2>產品編輯</h2>
<div class="form-horizontal">
<hr />
<div class="form-group">
<label for="id" class="control-label col-md-2">編號</label>
<div class="col-md-10">
<asp:TextBox ID="txtId" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-md-2">品名</label>
<div class="col-md-10">
<asp:TextBox ID="txtName" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="price" class="control-label col-md-2">單價</label>
<div class="col-md-10">
<asp:TextBox ID="txtPrice" runat="server" class="form-control" TextMode="Number"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="img" class="control-label col-md-2">圖</label>
<div class="col-md-10">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div class="col-md-10">
<asp:Image ID="Image1" runat="server" />
<asp:Label ID="lblShowImg" runat="server"></asp:Label>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<asp:Button ID="btnSave" runat="server" Text="儲存" class="btn btn-warnning" />
</div>
</div>
</div>
<div>
<a href="Index2.aspx">返回產品列表</a>
</div>
</asp:Content>
介面弄好後重點是要怎樣把資料讀過來?
必須要先給產品編號去要產品資料
回到index2將編輯扭下commandname 判斷 編輯或刪除
Commamdargument=帶值去後端
databydingas????dafqwke 資料繫結??
<asp:LinkButton ID="lnkEdit" runat="server" CommandName="Edit" CommandArgument='<%# Eval("fId") %>'>編輯</asp:LinkButton>
在index2新增 onrowcommand 並到後製程式碼寫邏輯，
<asp:GridView ID="GridView1" runat="server" CssClass="table" AutoGenerateColumns="False" GridLines="None" OnRowCommand="GridView1_RowCommand">
接收前面資料編號，在去弄成url轉值去edit頁面，就能讓 edit頁面知道要編輯哪一筆資料
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
string fId = e.CommandArgument.ToString();
if(e.CommandName=="Edit")
{
Response.Redirect("Edit.aspx?fId="+ fId);
}
}
在回到 edit 後製程式碼，建立db物件，在load時就要讀產品資料出來，
所以 字串變數去取得網址 request.querystring裡面的
產品代號附加欄位aspx?後面的
protected void Page_Load(object sender, EventArgs e)
{
//由url取得產品代號
string fId = Request.QueryString["fId"].ToString();
透過entityfromwork不用寫sql那要怎要資料呢?
Linq 架構寫法操作資料庫
Lambda 為 Linq的擴充寫法 類似相對 linq vs lambda = js vs jq
//Lambda
var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();
新版的c#類似像js可以用以下方式
Var 資料庫.資料表.方法(參數).否則()
方法where
(參數)=(變數資料表 => 變數資料表.id == 資料表.id)
=>箭頭 ->指表 ©
改動了 img 變成 label ????
好像是要偷吃步不知道吃啥
現在步驟是 把model資料塞進 要顯示出來的前面的html的id的變數
Model抓出來的值餵給變數欄位
然後就能測試顯示了
圖片檔案如果有問題很多時候是路徑問題 結果是單引號錯
前端
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Edit.aspx.cs" Inherits="MVC1.Edit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h2>產品編輯</h2>
<div class="form-horizontal">
<hr />
<div class="form-group">
<label for="id" class="control-label col-md-2">編號</label>
<div class="col-md-10">
<asp:TextBox ID="txtId" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-md-2">品名</label>
<div class="col-md-10">
<asp:TextBox ID="txtName" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="price" class="control-label col-md-2">單價</label>
<div class="col-md-10">
<asp:TextBox ID="txtPrice" runat="server" class="form-control" TextMode="Number"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="img" class="control-label col-md-2">圖</label>
<div class="col-md-10">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div class="col-md-10">
<asp:Label ID="lblShowImg" runat="server"></asp:Label>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<asp:Button ID="btnSave" runat="server" Text="儲存" class="btn btn-warning" />
</div>
</div>
</div>
<div>
<a href="Index2.aspx">返回產品列表</a>
</div>
</asp:Content>
後端
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//00-4-1 using MVC1.Models
using MVC1.Models;
namespace MVC1
{
public partial class Edit : System.Web.UI.Page
{
//00-4-2 使用Entity建立DB物件
dbProductEntities db = new dbProductEntities();
protected void Page_Load(object sender, EventArgs e)
{
//00-4-3 讀出要修改的產品資料並放入表單欄位中
//由url取得產品代號
string fId = Request.QueryString["fId"].ToString();
//Lambda
var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();
txtId.Text = product.fId;
txtName.Text = product.fName;
txtPrice.Text = product.fPrice.ToString();
lblShowImg.Text = "<img src='images/"+product.fImg+"' width='200' />";
}
}
}
題外話:
Signalr
回到正題 ( 現在還都是 webform
邏輯:
按下儲存按鈕後要更新資料庫內容
圖片要多寫一個if判斷有沒有要更新圖，
(( 沒有要更新也要取原來的資料出來改回去
跟新增很像所以複製新增的來改
這邊省時間都沒有加一些驗證判斷實務上必須要
操作方式跟剛剛新增的方式幾乎一樣
刪除邏輯:
按鈕commamdname
傳產品代號
刪除 model裡面的 資料
在savechanges 刪除資料庫
然後更新girdview更新佔存資料庫
重新databind
實務上跳視窗確認要不要刪除
Onclientclick=return confirm(‘您確定要刪除嗎?’)
重複寫的地方值接獨立出一個不用回傳值的函數 loadData() 內聚力高偶合力低
大瑕疵
除了刪除資料庫資料外
檔案也要刪除 ( 圖片檔 )
邏輯 :
抓取檔案路徑然後根據id刪除
中午下課
早上bug
Var 那個老師選擇妥協把db往上放 我猜是新功能觸發的問題
資料無法更新 page load 要加上 !IsPostBack 不然就會post back
所以怎麼取都取到舊的值
如果上傳新的圖片檔案刪除要把既有的圖片檔案刪除
資料刪除可以刪掉但是 onrowdeleting 會觸發的函數
忽略了 commandname = delete 一定會觸發上述
方式為 刪掉 onrowdeleting 改掉 commandname = killme
因為之前 edit是在別頁觸發的好像就沒這個問題
前端 edit ( delete 也在 edit內
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Edit.aspx.cs" Inherits="MVC1.Edit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h2>產品編輯</h2>
<div class="form-horizontal">
<hr />
<div class="form-group">
<label for="id" class="control-label col-md-2">編號</label>
<div class="col-md-10">
<asp:TextBox ID="txtId" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-md-2">品名</label>
<div class="col-md-10">
<asp:TextBox ID="txtName" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="price" class="control-label col-md-2">單價</label>
<div class="col-md-10">
<asp:TextBox ID="txtPrice" runat="server" class="form-control" TextMode="Number"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="img" class="control-label col-md-2">圖</label>
<div class="col-md-10">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
div class="col-md-10">
<asp:Label ID="lblShowImg" runat="server"></asp:Label>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<asp:Button ID="btnSave" runat="server" Text="儲存" class="btn btn-warning" OnClick="btnSave_Click" />
</div>
</div>
</div>
<div>
<a href="Index2.aspx">返回產品列表</a>
</div>
</asp:Content>
後端 edit
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
//00-4-1 using MVC1.Models
using MVC1.Models;
namespace MVC1
{
public partial class Edit : System.Web.UI.Page
{
//00-4-2 使用Entity建立DB物件
dbProductEntities db = new dbProductEntities();
protected void Page_Load(object sender, EventArgs e)
{
//00-4-3 讀出要修改的產品資料並放入表單欄位中
if (!IsPostBack)
{
//由url取得產品代號
string fId = Request.QueryString["fId"].ToString();
//Lambda
var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();
txtId.Text = product.fId;
txtName.Text = product.fName;
txtPrice.Text = product.fPrice.ToString();
lblShowImg.Text = "<img src='images/" + product.fImg + "' width='200' />";
}
}
//按 [儲存] 鈕時執行
protected void btnSave_Click(object sender, EventArgs e)
{
//dbProductEntities db = new dbProductEntities();
string fileName, fId;
fId = txtId.Text;
var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();
fileName = product.fImg;
//圖片上傳儲存
if (FileUpload1.HasFile)
{
FileUpload1.SaveAs(Server.MapPath("images/" + FileUpload1.FileName));
fileName = FileUpload1.FileName;
}
//00-3-4 使用Entity Framework新增資料
product.fName = txtName.Text;
product.fPrice = Convert.ToDecimal(txtPrice.Text);
product.fImg = fileName;//如果使用者沒上傳就用原來的檔名
db.SaveChanges();//回寫結果
Response.Redirect("Index2.aspx");
}
}
}
老師版本的有把程式碼步驟放上去 index2.aspx.cs
//00-1 利用Entity Framework建立Model(DB First)
//00-1-1 建立dbProduct.mdb資料庫Model
// 在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型,名稱輸入"ProductModel",按新增
// 來自資料庫的EF Designer
// 連接dbProduct.mdf資料庫,連線名稱不修改,按下一步按鈕
// 選擇Entity Framework 6.x, 按下一步按鈕
// 資料表勾選"tProuct", 按完成鈕
// 若跳出詢問方法按確定鈕
//00-1-2 在專案上按右鍵,建置
//00-2 撰寫Index2.aspx的後置程式碼
//00-2-1 using MVC1.Models
//00-2-2 使用Entity建立DB物件
//00-2-3 將讀出的資料餵給GridView
//00-2-4 撰寫GridView裡的按鈕被按下時所要做的事
//00-3 撰寫Create.aspx的後置程式碼
//00-3-1 using MVC1.Models
//00-3-2 撰寫"儲存"鈕被按下時要做的事
//00-3-3 使用Entity建立DB物件
//00-3-4 使用Entity Framework新增資料
//00-4 撰寫Edit.aspx的後置程式碼
//00-4-1 using MVC1.Models
//00-4-2 使用Entity建立DB物件
//00-4-3 讀出要修改的產品資料並放入表單欄位中
//00-4-4 撰寫"儲存"鈕被按下時要做的事
//00-4-5 使用Entity Framework更新資料
下午
第五次專題報告 – ERD所衍生的資料庫與關聯圖
第一組
已經時做資料庫與資料上傳頁面串接
更改了一些上次覺得有問題的ermodel內容
第四組
Remodel 增加留言板 然後 檢舉修改 讚的部分修改
老師說明
問題很難問?
工科論文 因為做出來了怎問?
管理面很好問
你們有沒有考慮到什麼?
Member 為何用 email當作主key
可是erd是錯的
Pwd長度 varchar 4000 雜湊
雜湊完不知道本來密碼那怎辦
直接給新的密碼
第五組
log 修改紀錄也要存表
違規分為三種
用使用者 ( 包含管理者 商城與寄信 違規與修改紀錄log
個人會員信息
分為四個關聯 共通資料庫
很多連遊玩實際記錄也會記錄下來
以下組別因為大雷雨所以 …
( 雷聲大雨點小所以就不深入記錄了
題外話 經濟
本益比 越小越好
本夢比
Dos 時帶 很多遊戲都是 大宇做的
台灣的盤都是外資盤操盤寡ˇ
佔獨占性競爭等等
看來要去看經濟學
市場機制 颱風沒來菜還是很貴 中華電信 寡占市場 不賺錢打趴對手 價格歌喉戰
個體撿到便宜 但總體經濟降低 市場不活絡 消費者剩餘 市場GG
拿不出綜效 只會持續一年
EX劉兆玄 企業主都知道但有利益都不講
