ASP.NET MVC 3.0 新手起步(一)

ASP.NET MVC 3.0 新手起步(一)

由於以前是寫PHP,也用一些PHP Framework,大部分都會朝向MVC架構才建置網站

這樣比較方便除錯、分工,最近發現ASP.NET 也有MVC,真是解決我一大困擾,

說真的我不是很愛用Asp.net From 來開發網站,很多東西都不能自己改(控制狂?)

雖然這個技術已經出現好一陣子,不過開始總不嫌晚。

(一)什麼是MVC(Model-View-Controller)是軟體工程中的一種軟體架構模式,把軟體系統分為三個基本部分:模型(Model)、檢視(View)和控制器(Controller)。

  • Model(模型):負責資料來源、封裝和商業邏輯相關資料,以及處理資料方法。
  • Controller(控制器)- 應用程式流程、回應資料模型變化,以及使用者操作事件。
  • View(檢視) - 使用者介面設計。
  • mvc

我們用幾個小例子來解釋MVC:

Q:連接資料庫的資料?

A:Model

Q :A網頁輸出資料到B網頁?

A:Controller

Q:華麗的操作介面?

A:View

Q:表格驗證?

A:View    (不過ASP.net可以透過某種機制寫在Model)

Q:判斷手機還是電腦瀏覽器?

A:Contorller

透過以上例子不知有沒有比較清楚!

簡單介紹工具: Visual Studio 2010、C#、SQL Server 2008、LINQ TO Entity、Entity Framework

情境: 單一資料庫的 新增、查詢、修改、刪除( CRUD)

1.前置:

開啟一個 MVC3 的專案

圖片 000

既然是新手就選一個範本來用

圖片 001

建立成功以後,會看到這樣的MVC結構

圖片 003

建立好以後先執行看看正不正常

圖片 002

 

2.資料庫設定

許多高手建議使用mvc 最好搭配 ORM 來操作資料庫,所以我這次我直接選用Entity Framework

圖片 004

在model 又鍵新增->資料->ADO.NET 實體資料模型( Entiy Framework)

圖片 005

 

Entity Farmewrok 有三種開發模式

1.Model First

2.Database First

3.Code First

我們使用 第二種,Database First

圖片 006

設定連線資料

圖片 007

選擇要使用的資料表,本來我要選另一個叫做三國的,但是好像因為是中文又沒設定PK 所以不能用…

圖片 008

圖片 34

可以從 HOST.edmx 看到 ORM模型的 Mapping(映射)

比較常用到的是實體容器名稱 DemoMVC

 

圖片 009

3.查詢

Controllers:

圖片 35

建立一個 List (全部查詢)

        public ActionResult List()
        {
            return View();
        }

圖片 010

 

設定檢視名稱 (就是出現在 View的名稱)

選擇模型類別 (注意要記得先圖片 36唷,不然都是空白的)

在選擇預設樣板: List

圖片 012

由於我們剛剛檢視名稱打 List 所以在View  就可以看到 List.cshtml

圖片 013

讓我們打開 View:List 來看看,雖然範本很好用,但是還是有些地方要自己動手改

把 註解的地方改成 id = @item.SCM

圖片 014

為了方便所以我們去修改上方的連結

圖片 37

圖片 015

 

已經完成 VC 了 怎麼可以少了 M 呢?

所以建立一個M (HOSTmodel) 

圖片 40

 

由於我們要使用資料庫的 HOST

所以通常我們會用命名一樣的型態變數 SCMHOSTNAMEMNOTE

下面提供二種全部查詢方法

圖片 38

        public string HOSTNAME { get; set; }
        public string MNOTE { get; set; }

        //全部查詢:方法一
        public List<AHOST> GetALL01()
        {
            DemoMvc DB = new DemoMvc();
            return DB.AHOST.ToList();
        }
        //全部查詢:方法二
        public static List<HOSTmodel> GetALL02()
        { 
            DemoMvc HOSTDB = new DemoMvc();
            var query = (from c in HOSTDB.AHOST
                         orderby c.ASCM ascending
                        select new HOSTmodel{
                            SCM = c.ASCM,
                            HOSTNAME = c.AHOSTNAME,
                            MNOTE = c.AMNOTE
                        }).Take(50);
            
            return query.ToList();
        }

然後回到 Controllers

注意要先

然後呼叫model給List 使用

圖片 016

然後按下圖片 36

圖片 017

是不是很快速就完成清單的功能,但是這樣還不夠,我們需要單一查詢

前面做這麼多事情,之後就要開始快起來了

每個動作都把它分成 M V C

M:使用 LINQ TO Entity 方式 查詢資料 Mapping HOSTmodel

        public static HOSTmodel Read(int ID)
        {
            DemoMvc db = new DemoMvc();
            var query = (from c in db.AHOST
                         where c.ASCM == ID
                         select c).First();
            return new HOSTmodel { 
                SCM = query.ASCM,
                HOSTNAME = query.AHOSTNAME,
                MNOTE = query.AMNOTE
            };
        }

C: 在Contorller先宣告一個 Details

查詢總要有個依循,所以設定ID 當作傳入的參數

然後呼叫model 的 Read();

        public ActionResult Details(int ID)
        {
            return View(HOSTmodel.Read(ID));
        }

圖片 42

圖片 45

由於我喜歡透過 Controllers 來產生View

產生頁面還是要自己修改一下

圖片 46

然後到List 頁面隨便點一個就可以進入了。

圖片 47

圖片 33

4.新增

前面把路鋪好以後,到了新增也是很快就可以完成

通常我比較喜歡從C->M->V

Contorller:

        public ActionResult Create()
        {
            return View();
        }
        
        //新增(後)
        [HttpPost]
        public ActionResult Create(HOSTmodel model)
        {
            model.Save();
            return RedirectToAction("List");
        }

Model:

        public string Save()
        { 
            using (DemoMvc DB = new DemoMvc())
            {
                AHOST DataDB = new AHOST
                {
                    AHOSTNAME = this.HOSTNAME,
                    AMNOTE = this.MNOTE
                };
                DB.AddToAHOST(DataDB);
                DB.SaveChanges();
            };
            return "";
        }

View:

按右鍵新增檢視

圖片 48

設定一下,記得選範例的Create

圖片 49

加入以後就可以在View看到 Create.cshtml

圖片 50

圖片 51

圖片 52

比對一下資料有沒有一樣。

圖片 53

5.修改

其實修改也沒甚麼特別,就是單一讀取+更新而已

C->M->V

Controller:

由於修改比較特別,一開始就要指定某一筆,所以需要一個參數。

圖片 54

        [HttpGet]
        public ActionResult Edit(int ID)
        {
            return View(HOSTmodel.Read(ID));
        }
        //修改(後)
        [HttpPost]
        public ActionResult Edit(int ID,HOSTmodel model) 
        {
            model.Edit(ID);
            return RedirectToAction("List");
        }

Model:

修改就是把資料查出來,然後更改而已!

圖片 55

        public string Edit(int ID)
        {
            using (DemoMvc DB = new DemoMvc())
            {
                var query = from c in DB.AHOST
                            where c.ASCM == ID
                            select c;
                foreach (var item in query)
                { 
                    item.AHOSTNAME = this.HOSTNAME;
                    item.AMNOTE = this.MNOTE;
                }
                DB.SaveChanges();
                
            };
            return "";
        }

View:

圖片 56

圖片 57

就會自動產生Edit的頁面,但是我覺得還不夠好,所以就把ID改成不能修改(Disables)

圖片 58

 

6.刪除

刪除最簡單的,就只是拿到參數後就給他刪掉,但是預設功能很貼心可以先看過再刪除。

就拿單一讀取來改就好了啊~~~

C->M->V

Contorller:

來看一下,其實真的跟編輯差不多 "單一查詢" + "刪除"而已

        [HttpGet]
        public ActionResult Delete(int ID) 
        {
            return View(HOSTmodel.Read(ID));
        }
        //刪除(後)
        [HttpPost]
        public ActionResult Delete(int ID,HOSTmodel model)
        {
            model.Delete(ID);
            return RedirectToAction("List");
        }

Model:

這裡用到LINQ: 刪除 DeleteObject(DB);

        public string Delete(int ID)
        { 
            using(DemoMvc DB = new DemoMvc())
            {
                var query = (from c in DB.AHOST
                             where c.ASCM == ID
                             select c).Single();
                DB.DeleteObject(query);
                DB.SaveChanges();
            };
            return "";
        }

View:

刪除就都沒什,也沒什麼好講的....


在網路上找來找去,倒不如自己去MSDN查還比較快,雖然一開看不太懂,多看幾次就可以了啦

System.Web.Mvc 命名空間

Controller : Controller 類別

Model : 驗證

View : HtmlHelper 類別