小狙擊的悠閒日子: 2012

2012年3月23日星期五

ASP.NET Expression Package

現在有一個可以用設計視窗在VS中編輯Expression語法的工具了
可以在每個ASP.NET控制項的Smart Tasks中自動加入一個[Edit Expression]按鈕
按下後就能開啟VS內建的Expression編輯視窗來編輯各種運算式的內容

這是Visual Studio的外掛功能,需要安裝請到這裡下載ASP.NET Excalibur Package

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";
    }
}

2012年1月23日星期一

ASP.NET MVVM(1)

MVVM是Model-View-ViewModel的縮寫
基本上也是一種程式系統分層的架構：
Model負責資料。
View負責呈現介面。
ViewModel則是前兩者間互動的媒介。
介面不能直接驅動資料，必須由ViewModel負責
詳細相關介紹可以閱讀這篇文章
http://blog.sanc.idv.tw/2011/12/wpf-mvvm.html

在ASP.NET MVVM裡面Excalibur將透過利用ASP.NET的Expression語法讓Web Form同樣做出類似WPF MVVM的架構，先來一個示範，請看看囉

1.首先網站的web.config要加進Excalibur的設定，註冊好'Binding'這個Expression語法需交由Excalibur的類別處理，(當然Bin裡面dll等等，那些也要放進去)

然後我們做一個示範功能好了，只要一個網頁上有一個文字方塊與按鈕，可以輸入名子按下按鈕後在文字方塊下方，顯示輸入的名子即可，像下面這樣

2.在方案總管加入新項目Default.aspx至網站中，然後於設計的原始檔中加入各一個TextBox、Button、Label，調整並加入Binding語法如下

這樣就幾乎完成MVVM其中的View了，要改變做法的是使用Binding，Binding裡面的文字意思就是View要繫結到ViewModel中的屬性名稱，而且這邊就連像OnClick這樣的event也可以透過Binding去繫結ViewModel裡面的method了，所以，至於Default.aspx.cs中的程式就一行都不需要去動它了，因為View不做其他事情

3.接下來要製作ViewModel的部分，在方案總管加入新項目Hello.ascx至網站中，因為示範的功能很小Model的部分就先用一個Label控制項來充當省略囉，Hello.ascx設計如下

4.撰寫Hello.ascx.cs的內容，分別完成Name屬性與Button1_Click方法中的程式，如下

到這裡一定要說明Hello.ascx的兩個地方：

(1)為何Label的ID屬性要設為'Model'？

答：是因為要有簡單的方式當做MVVM架構中Model物件的識別，或者如果有其他需求也有另一個方法可以在程式中實做IViewModel介面，指派其他或者不是控制項的物件做為Model。所以另外同樣的在View中也是用相同的規則，會用ID為ViewModel的控制項或實做IView介面，後指派的結果讓MVVM架構識別ViewModel物件

(2)為何View裡面Binding的Text屬性不用實做出來？

答：這是因為使用了幫ViewModel節省程式碼的機制，屬性名稱相同ViewModel就不用另外去寫轉譯Model的屬性到ViewModel上的程式，因為在View上Binding的規則是，如果ViewModel沒有這個屬性就允許透過去Binding裡面Model的屬性，因此只要屬性不是Binding在雙向的目標上，只是要唯讀呈現就可使用，否則不建議喔

5.最後終於要將ViewModel跟View結合起來了，到Default.aspx的設計頁面將Hello.ascx自方案總管拖曳進來，然後修改控制項ID為ViewModel，如下，建置成功，就完成囉

Default.aspx.cs

詳細範例與程式碼下載連結於公告文章中

小狙擊的悠閒日子

[置頂]ASP.NET MVVM Excalibur - Release 程式套件下載及功能更新記錄

2012年3月23日星期五

ASP.NET Expression Package

2012年2月28日星期二

ASP.NET MVVM(3)

2012年2月26日星期日

ASP.NET MVVM(2)

2012年1月23日星期一

ASP.NET MVVM(1)

關於我自己

網誌存檔

小狙擊的悠閒日子

[置頂]ASP.NET MVVM Excalibur - Release 程式套件下載及功能更新記錄

2012年3月23日 星期五

ASP.NET Expression Package

2012年2月28日 星期二

ASP.NET MVVM(3)

2012年2月26日 星期日

ASP.NET MVVM(2)

2012年1月23日 星期一

ASP.NET MVVM(1)

關於我自己

網誌存檔

2012年3月23日星期五

2012年2月28日星期二

2012年2月26日星期日

2012年1月23日星期一