2019/0419/主頁、Webform ADO.NET Entity Fromwork 增刪修實作&第五次專題報告

MVC 前主頁webform ADO.NET Entity Fromwork增刪修實作

entityfromwork - Google SearchGoogle

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

signalr - Google SearchGoogle

回到正題 ( 現在還都是 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");



        }
    }
}