因此現在的系統開發開始會利用越來越受人重視的像是ORM..等等的技術
所以現在MVVM也可以來個相似的Mapping功能囉^^
就來寫個示範，我們也沿用第一篇文章的範例
讓網頁上有一個文字方塊與按鈕，可以輸入名子按下按鈕後在文字方塊下方，顯示輸入的名子
1.建立View的Default3.aspx檔案，內容如下
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MVVM By Auto ViewModel Base</title>
</head>
<body>
<form id="form1" runat="server">
<div>
請輸入您的大名：<asp:TextBox ID="TextBox1" runat="server" Text="<%$ Binding: Name %>"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="確定" OnClick="<%$ Binding: Button1_Click %>" /><br />
<br />
<asp:Label ID="Label1" runat="server" Text="<%$ Binding: Text %>"></asp:Label>
</div>
</form>
</body>
</html>
2.完成View後,就按下Visual Studio的建置方案(F6)對網站進行一次編譯，等建置成功，然後在方案總管中
用滑鼠對方案目錄進行->滑鼠右鍵->重新整理資料夾
我們馬上立即就能夠發現在App_Code中多了一些目錄與類別檔案，像此次的ViewModel/Base/Default3.cs
這個就是MVVM針對Default3自動產生的ViewModel基底類別，
類別裡面已經實做了在View中所有被Binding使用到的所有屬性與EventMethod，只等我們繼承引用而已
(這些class是不需要改它的，每次View有變動後就會重新產生一次)
3.製作ViewModel，在方案總管加入新項目Hello3.ascx至網站中，撰寫Hello3.ascx.cs的內容
將原本繼承的UserControl改為新的基底類別ViewModel.Base.Default3
接著使用override關鍵字帶出Button1_Click方法並撰寫其功能程式,如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class ViewModel_Hello3 : ViewModel.Base.Default3
{
protected void Page_Load(object sender, EventArgs e)
{
}
public override void Button1_Click(object sender, EventArgs e)
{
if (Name != "")
{
Text = Name + "，您好。";
}
else
{
Text = "請輸入名字";
}
base.Button1_Click(sender, e);
}
}
4.將ViewModel放進View中，如下，這樣就完成囉。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<%@ Register Src="ViewModel/Hello3.ascx" TagName="Hello3" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MVVM By Auto ViewModel Base</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:Hello3 ID="ViewModel" runat="server" />
請輸入您的大名：<asp:TextBox ID="TextBox1" runat="server" Text="<%$ Binding: Name %>"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="確定" OnClick="<%$ Binding: Button1_Click %>" /><br />
<br />
<asp:Label ID="Label1" runat="server" Text="<%$ Binding: Text %>"></asp:Label>
</div>
</form>
</body>
</html>
另外一提，不知道有寫過Android App的人有沒有覺得這樣就很像R.java了呢，只不過不是靜態XD
詳細範例與程式碼下載連結於公告文章(Download)中
沒有留言:
張貼留言