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



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

2011年5月16日 星期一

ASP.NET MVVM Excalibur 1.1 - Release

Excalibur.Web 1.1.9.3

下載處(Download) - 2020/10/18

2020/10/18 : 擴充控制項新增DataBound事件,修正Binding屬性值於事件DataBind控制項後復原問題
2019/06/15 : 修正Excalibur.Scabbard在未設定Port時因TimeWait佔用過多尋找不到FreePort的錯誤
2019/02/23 : 新增IView擴充方法ReBindingViewEvents,可用於IView變更ViewModel時重新繫結事件
2018/12/02 : 新增ScabbardSessionStateStore類別,可於config設定Session以共用快取Cache存放
2018/07/04 : 修正FreeDataSource控制項在使用DataView資料來源做排序含Null值時產生的錯誤
2018/06/25 : 修正Binding語法使用在具有多個postDataKey的控制項時發生的錯誤ex:CheckBoxList
2018/05/08 : Extensions.Web.UI.UserControl新增SortExpression屬性與Sort方法,提供排序使用
2018/04/29 : 修改PluralHolder於ExtractAllValues型別不符時帶出Null值而不產生例外
2018/01/06 : 新增VirtualPathAttribute類別,可尋找並取得UserControl虛擬路徑的類別Attribute
2017/06/18 : 改進ViewStatePropertyAttribute處理效能及DefaultValue屬性Page使用問題
2017/02/26 : 增加ComponentOperator類別的方法,可支援非public型別使用
2016/09/24 : 新增Extensions.Web.Serialization.ObjectStateFormatter序列化型別
2016/07/30 : 修改Binding機制,使PostBack時Load於稍後的RaiseChangedEvents讀取更新資料
2016/05/14 : CacheExtensions.GetProvider加入連線參數,以AppDomainAssemblyBinder加強反序列化
2016/04/01 : 修正ViewStatePropertyAttribute的DefaultValue屬性在非擴充UserControl使用的問題
2016/03/18 : 繫結Binding增加可使用!Expression驚嘆號取得相反布林值語法功能
2016/03/12 : 修正Excalibur.Scabbard.exe在VS網站開發伺服器不會隱藏及強制關閉後無法重開的問題
2016/02/13 : 加入自動啟動的Excalibur.Scabbard.exe服務,管理網站共用快取Cache資源
2015/07/02 : PluralHolder控制項可使用DataSourceID綁定資料來源控制項,並新增ExtractAllValues方法
2015/07/02 : 修改Binding以支援繫結控制項的IStateManager子物件Property(控制項在樣板內未支援)
2015/04/13 : 對Page,MasterPage,UserControl增加擴充方法SendMessage,GetControlMessageCenter
2015/04/11 : 置換ViewStatePropertyAttribute命名空間並使其支援於Page,MasterPage中使用
2015/03/10 : 修正FreeDataSource查詢事件以yield return產生重複執行錯誤並支援DataView資料來源
2015/03/10 : 修正Binding繫結在部分動態載入控制項的情況AutoPostBack無法觸發事件問題
2015/03/07 : 修改ExtensionsConfigSection設定類別,增加PageAdapter.SetEnableCachePageViewState
2015/03/07 : 支援.net3.5的版本,除了3.5不相容功能以外,例如Route,dynamic等
2014/10/03 : 加入CommandProvider類別與Raise及Send方法,用於預先定義通知事件的方法指令型別
2014/08/12 : 擴充控制項中加入BubbleEventMethodAttribute與RaiseBubbleEvent方法簡化氣泡事件使用
2014/08/12 : 增加ContainerButton的Container選項,HtmlGeneric可搭配TagName屬性指定其他Html容器
2014/04/02 : 修改GuidCachePageStatePersister類別合併減少ViewState使用的Cache數量
2014/03/08 : 修改事件繫結時的處理方法,使支援具有部分提供參數相等的方法(參數名稱與類別)
2014/02/28 : 新增IViewBindingsAccessor介面並使Binding繫結支援ExpandoObject等dynamic物件
2013/12/20 : 當Binding繫結在ViewModel,Model中找不到屬性或未加入ViewModel則直接繫結View屬性
2013/12/20 : 新增UpdatePanelAutoBindingAttribute屬性類別可控制關閉UpdatePanel更新
2013/11/27 : 使ReloadToManagedRoute方法加入傳遞物件資料至ViewModel功能
2013/11/22 : 在UpdatePanelAdapter中加入OnUnload例外問題處理
2013/11/05 : 修改HolderSource的AppendUpdatePanel屬性部分問題
2013/10/22 : 加入ReloadToManagedRoute方法使RouteManager可以不需重導Url並更新頁面
2013/10/21 : 修正因為控制項放置順序導致OneWay繫結屬性不正確的問題
2013/10/13 : 新增MessageNotifyMethodAttribute,簡化MessageNotify使用
2013/10/10 : 增加Message的DataBoundControlHelper並加入MessageArgument的屬性繫結支援
2013/10/06 : 擴充使用者控制項新增SendMessage方法與MessageNotify接收訊息事件
2013/09/25 : 加入RouteManager擴充控制項與示範程式
2013/08/27 : 加入ExtensionsControl的5個擴充使用者控制項與示範程式
2013/07/27 : BindingExpressionEditor設計UI屬性加入下拉選單功能
2013/07/17 : 增進Property的Binding Expression效率,修改Reflection相關方法
2013/06/23 : 序列化物件比較由XmlSerializer改為BinaryFormatter支援
2013/06/22 : 在擴充UserControl中新增dynamic型態的ViewBag屬性,等同使用ViewState
2013/06/16 : 對預設的ValueConverter增加處理Nullable型別的能力
2013/06/13 : 修正對Nullable屬性無法使用繫結的錯誤
2013/05/31 : 對預設的ValueConverter增加處理Enum型別的能力
2013/05/07 : 新增BubbleEventExtensions控制項氣泡事件相關擴充函式
2013/04/04 : 修正對ViewModel屬性為序列化參考物件的型別時能夠更正確的支援
2013/03/27 : Binding繫結可用於runat="server"控制項的data-xxx等任何Html屬性了
2013/03/27 : 繫結語法加入Argument設定給予ViewModelMaker使用
2013/03/20 : 修改新增ViewModelMaker相關類別,修正編譯錯誤
2013/03/05 : 修正對自訂控制項的泛型屬性無法使用繫結的錯誤(1.1發佈)
2013/03/02 : 新增IValueConverter介面,增加ValueConverterAttribute參數給予ValueConverter建構式
2013/03/01 : 使TwoWay Binding的控制項屬性不再限定只繫結前端PostBack值,可適用後端事件變更值
2013/02/23 : 新增IFindControlProvider介面,可以在控制項中調整DataBoundControlHelper的部分過程
2013/02/23 : Binding Expression增加Life=Load,PreRender選項讓繫結可選擇提前發生
2013/01/20 : 新增ValueConverterBase與ValueConverterAttribute類別,建立轉型處理
2013/01/17 : 刪除App_Browsers資料夾必要,改由DLL自動註冊ControlAdapter
2013/01/07 : Extensions.Web.UI.UserControl新加IsPostBack以判斷控制項是否不是第一次載入
2012/12/29 : 修改disabledViewModelMaker預設值為true不開啟,新增ViewStatePropertyAttribute
2012/09/16 : 強化Binding語法可對子屬性繫結(ex:Binding List.Count)
2012/07/04 : web.config增加disabledViewModelMaker設定可選擇關閉ViewModelMaker功能
2012/04/21 : 解決IPostBackDataHandler控制項於控制項樣板中繫結問題
2012/04/17 : 修正UserControl繫結發生物件不符合目標型別錯誤
2012/04/05 : 加入IServiceProvider的屬性繫結支援
2012/03/23 : 修改設計類別與完成Excalibur.Package的VS外掛以便設計控制項的Expression
2012/03/15 : 加入BindingExpressionEditor設計類別
2012/03/13 : 新增BehaviorControl與EventTriggerControl基底類別
2012/03/09 : Binding去除屬性繫結需IAttributeAccessor控制項限制(僅剩事件繫結)
2012/03/08 : ViewModel的NamingContainer區隔在MasterPage下問題修正
2012/03/02 : Expression可設定Mode=Default,OneWay,TwoWay的不同方式
2012/03/01 : 修正判斷AsyncPostBackTrigger需符合EventHandler
2012/02/28 : 加入ViewModelMaker功能機制當每次建置網站時將自動產生ViewModel的基底類別
2012/02/26 : 繫結Property支援IConvertible轉型
2012/02/25 : BindingExpression可設定Control的ID或父層特定Type,以及支援屬性繫結到Method
2012/02/12 : ViewModel修改考慮NamingContainer區隔,繫結屬性可唯獨或唯寫
2012/01/30 : Binding加入自動使UpdatePanel加入AsyncPostBackTrigger判斷
2012/01/24 : (pm22)修正Binding於UserControl下xml編譯錯誤
2012/01/24 : ASP.NET MVVM 發佈(BindingExpressionBuilder)
2011/12/05 : 增加DescriptorDataItemContainer類別
2011/07/17 : 增加ComponentOperator取代Reflection(.NET4.0版本,3.5以下無法使用)
2011/06/22 : 修正swc組件Bug(Component)Release-1.0.3.1
2011/06/17 : 增加Flash.Web.UI.UserControl的Event(Create)
2011/05/31 : 修改swc組件初始方法
2011/05/16 : 1.0發佈

2011年4月24日 星期日

ASP.NET Flash Excalibur 1.0 – Part 2

這一篇要說明ASP.NET Flash Excalibur怎麼將資料回傳,讓Flash能與Web上的程式互動。

首先建立一個後端的Listen,接收一個輸入文字的內容然後儲存在網站上,保留下次再開啟時可以顯示出來。步驟:

1.一樣建立UserControl,並撰寫程式碼如下。
解說一下,主要在第24行的程式:

this.Listen["Save"].Listen += new OnListen(Save_Listen);

這裡是我們要註冊給Flash前端呼叫的方法,名子是”Save”,當被Flash呼叫時就是要控制項執行指定的Save_Listen方法,只要用這樣的方式就可以在各個控制項中註冊多個能被前端呼叫的Listen,而e.Value在Flash中是用Binder組件對輸入文字做繫結,所以其資料就是回傳前端所填寫或改變的內容。

另外關於e.Value註冊的變數有給它一個限制,其必須在控制項的OnCreate中有給值的變數名稱才可在Listen中被使用,否則執行時將會引發錯誤。

2.建立Flash(AS3)檔,放置一個動態文字並設為可編輯的,實體名稱設為cache。

3.加入FlashRemoting與Binder組件,並給予FlashRemoting實體名稱為Remoting,接著設定組件參數FlashRemoting的controlPath值設為~/CacheText.ascx,Binder的bindName值設為CacheText,bindProperty值設為cache.text。

4.加入一個按鈕元件實體名稱為SaveButton,然後於影格撰寫按鈕動作程式碼如下。

5.最後測試影片就完成囉,可以修改文字內容儲存於網站上,關閉重複測試影片就會看到前次有儲存的內容。

到這裡很明顯的前端只要簡單的呼叫FlashRemoting的SendEvent函式,傳入要執行的Listen名稱就能與Web達成互動,同樣如果當後端在Listen中改變e.Value的值以後,結果也會被Binder同步在前端繫結的目標上。

概念就有點類似動態網頁的Submit一樣,不會很難對吧。

接下來,下一篇會有個較進階的範例來示範如何應用Flash的元件與UserControl的父子階層。

2011年3月14日 星期一

ASP.NET Flash Excalibur 1.0 - Part 1

ASP.NET Flash Excalibur是一個在ASP.NET上整合開發Flash互動網站的框架,開發人員將獲得更貼近已往Web Form的開發方式,很容易就能向前端Flash程式做資料與狀態的連結,同時減少設計師在Action Script程式處理上的難度。

廢話不多說,首先來個Hello World示範吧:

1.在ASP.NET網站建立一個新的UserControl,置換基底類別並撰寫程式碼如下。

2.開啟Flash CS4建立空白Flash(AS3)檔,並放置一個動態文字,實體名稱設定為myFirst。

3.加入FlashRemoting與Binder兩種組件至元件庫,然後各拖拉一個到圖層之中。

4.在組件檢測器中設置參數,將FlashRemoting的controlPath值設為~/HelloWorld.ascx,Binder的bindName值設為firstValue,bindProperty值設為myFirst.text 。

5.最後測試影片就可以看到從網站傳進來的Hello World啦!

怎麼樣?是不是很簡單呢!

當然這個只是向前端丟出資料的例子,接下來還有一篇將說明如何讓資料回傳與溝通資料的方法。

這技術主要依靠開放原始碼的FluorineFx元件達成AMF的資料傳輸,屬於一種Remoting技術所以沒有太多傳遞物件的限制,詳細請自行參考它的官方網站,這裡我只是運用將其包裝進原本ASP.NET Web Form就設計好的架構框架而已。

ASP.NET的UserControl與Flash的元件圖層有著幾乎完全相似的父子階層架構,UserControl中可以依照設計放置其它UserControl,元件圖層內也可以放置其它元件使用,如果是由了解這關係的開發人員與設計師搭配相信一定能很快的使用這項技術迅速開發出活潑快速的Flash互動網站。