2012年2月28日 星期二

ASP.NET MVVM(3)

往往我們系統不做分層架構的原因只是因為存在著某些單純的困難而已
因此現在的系統開發開始會利用越來越受人重視的像是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)

2012年2月26日 星期日

ASP.NET MVVM(2)

微軟在XAML上的Binding與ViewModel的概念真的非常特別
雖然ASP.NET是網站型態會受限於程式需要PostBack的方式才能執行
但Web Form的控制項必然與他有一定的共通點...畢竟我們有很多案件的開發需求還是在Web上進行
所以我們就繼續的借用一些新的東西來用吧XD哈哈

Expression語法新增加的功能是ID與Type 的指定,以及Property對Method的繫結

(1)語法上加入逗號將繫結屬性名稱外可再選擇性的在加上ID或Type等於某控制項的方式,這樣以後此控制項Binding時就不會去以原本的ViewModel為對象而是用ID或型別去尋找出該條件的對象做繫結,而且這個尋找方式有向上延伸的功能,也就是往上控制項階層進行尋找
例如用在UserControl中也就可以因為設定了Panel的Type而讓UserControl因放置的Panel不同而有不同結果

(2)原本的繫結名稱可以用繫結對象Method的名子來做設定,只要繫結對象(ViewModel)有公用符合名稱並且有回傳值無參數的方法即可

(3)語法上可以使用Mode等於去設定繫結方式
Default:預設值,會自行判斷如果使用ViewModel則用雙向,若是指定控制項ID或Type則預設為單向
OneWay:單向,只會在目標屬性設定繫結對象的屬性值,不會改變繫結對象屬性值
TwoWay:雙向,目標屬性改變時也會同時更變繫結對象屬性

以下是程式示範

1.Default3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<%@ Register Src="UserControl.ascx" TagName="UserControl" 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>Bind Control & Method</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:UserControl ID="UserControl1" runat="server" />
        <asp:Label ID="Label1" runat="server" Text='<%$ Binding : ID = UserControl1, GetText %>'></asp:Label>
        <asp:Panel ID="Panel1" runat="server" ToolTip="456">
            <asp:Label ID="Label2" runat="server" Text='<%$ Binding : Type = Panel, ToolTip %>'></asp:Label>
        </asp:Panel>
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" Text="789"></asp:TextBox>
        <asp:Label ID="Label3" runat="server" Text='<%$ Binding : ID = TextBox1, Mode = OneWay , Text %>'></asp:Label>
        <%-- Mode => Default, OneWay, TwoWay --%>
    </div>
    </form>
</body>
</html>


2.UserControl.ascx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class UserControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    public string GetText()
    {
        return "123";
    }
}