Silverlight 與 ASP.NET 的完美結合法 - 控件篇

http://www.microsoft.com/taiwan/msdn/columns/huang_jhong_cheng/Silverlight_ASP.htm

另類的Silverlight中文解法

另類的Silverlight中文解法

文/黃忠成

如你所知，由於字型的關係，Silverlight目前對於雙位元文字顯示可說是困難重重，大概可歸類出兩種解法，一種是下載字型到客戶端，一種是利用Blend2將文字變成圖形，下載字型目前有法律問題的隱憂，而且一個中文字型檔大小約5MB，仍嫌過大。在上次嘗試實作DataBinding功能後，心中就有一種想法，假如於Server端將文字轉成圖形後下載到客戶端，那麼因為不是直接下載字型，所以應無法律問題(這我不確定！)，也不會因下載整個字型檔而導致網頁開啟速度過慢，這樣是否就能讓前次的Data Bindigns例子支援中文的顯示呢？可惜前幾天因陪老婆考試，一直沒時間來實現心中的構想，這幾天終於有時間來實現這個架構了。基本上，實現這個架構有兩個問題必須先行解決，第一個問題是Server端如何將文字變成圖形？這不難，下列的程式便可辦到。

protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["ID"] != null && Request.QueryString["ID"].Length > 0) { .................. } else if (Request.QueryString["Transform"] != null) { int index; string column; ResolveParams(Request.QueryString["Transform"], out index, out column); if (index != -1) { Employee data = GetData(index); MemoryStream ms = ResolveTransform(data, column); if (ms != null) { Response.Clear(); Response.BufferOutput = true; Response.ContentType = "image/bmp"; Response.OutputStream.Write(ms.GetBuffer(), 0, (int)ms.Length); ms.Dispose(); Response.Flush(); Response.End(); } else Response.End(); } } } private void ResolveParams(string transformParams, out int index, out string column) { string[] p = Request.QueryString["Transform"].Split('*'); index = -1; column = string.Empty; if (p.Length == 2) { index = int.Parse(p[0]); column = p[1]; } } private MemoryStream ResolveTransform(object data, string column) { PropertyInfo pi = data.GetType().GetProperty(column); if (pi != null) return GetDBCSJPEStream(pi.GetValue(data,null).ToString(), new Font("PMingLiU", 11,FontStyle.Bold), Color.Black, Color.White, 280,24); return null; } private MemoryStream GetDBCSJPEStream(string str, Font font, Color foreColor, Color background, int width, int height) { Bitmap bmp = new Bitmap(width, height); Graphics g = Graphics.FromImage(bmp); Brush bFore = new SolidBrush(foreColor); Brush bBack = new SolidBrush(background); g.Clear(Color.Transparent); g.DrawString(str, font, bFore, 2, 2); bFore.Dispose(); bBack.Dispose(); MemoryStream ms = new MemoryStream(); bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Png); bmp.Dispose(); ms.Position = 0; return ms; }

如果你仔細看上面的程式，會發覺其中有字體預設的問題，若要以此觀念實作一個完整的架構，關於字型的資訊應於XAML中指定才好，不過目前我只是展示這個想法的可行性，就先放著這部份不理了。第二個要解決的問題是如何於XAML中指定Data Bindings資訊，這點不難，依據前版以TAG來指定Binding Expression的概念，只需加油添醋一番，即可套用。

<Canvas xmlns="http://schemas.microsoft.com/client/2007" ................... <Image Name="imgLastName" Tag="BindingField:LastName;BindingProperty:Source;Format:Default.aspx?Transform={INDEX}*{BindingField}" Width="300" Height="24" Canvas.Left="500" Canvas.Top="23" /> </Canvas>

請注意，由於採圖形方式的緣故，這裡已不再使用TextBlock，而是使用Image控制項來顯示，SLDH.js也需稍做修改。

///////////////////////////////////////////////////////////////////////// // Silverlight Data Binding Helper 0.1 ///////////////////////////////////////////////////////////////////////// if (!window.SilverlightBinding) window.SilverlightBinding = {}; SilverlightBinding.BindingData = function(ctrl,bindingExpression,context) { var bindings = bindingExpression.split(';'); this.bindingComplete = false; this.ctrl = ctrl; this.context = context; for(var i = 0; i < bindings.length; i++) { var temp = bindings[i].split(':'); if(temp.length != 2) { this.bindingComplete = false; return; } if(temp[0] == 'BindingField') this.bindingField = temp[1]; else if(temp[0] == 'BindingProperty') this.bindingProperty = temp[1]; else if(temp[0] == 'Format') this.format = temp[1]; } this.bindingComplete = true; } SilverlightBinding.BindingData.prototype = { updateValue : function(dataItem) { if(this.bindingComplete) { if(this.format) { var str = eval("this.format.replace('{0}',dataItem."+this.bindingField+');'); if(this.format.indexOf("INDEX") != -1) str = str.replace("{INDEX}",this.context.currentDataIndex); if(this.format.indexOf("BindingField") != -1) str = str.replace("{BindingField}",this.bindingField); eval('this.ctrl.'+this.bindingProperty+" = str;"); } else eval('this.ctrl.'+this.bindingProperty+' = dataItem.'+this.bindingField+';'); } } } SilverlightBinding.BindingContext = function(bindingContainer) { var parseBindings = bindingContainer.tag.split(';'); this.bindingComplete = false; this.bindingContainer = bindingContainer; this.bindingControls = new Array(); this.currentDataIndex = 0; this.recordCount = 0; for(var i = 0; i < parseBindings.length; i++) { var parseBinding = parseBindings[i].split(':'); if(parseBinding[0] == "BindingContext") { var bindingMethods = parseBinding[1].split(','); if(bindingMethods.length == 2) { this.bindingMethod = bindingMethods[0]; this.bindingCountMethod = bindingMethods[1]; this.bindingComplete = true; } } } if(!this.bindingComplete) alert('ERROR,Binding Failed.'); } SilverlightBinding.BindingContext.prototype = { _childWorker : function(parent,parseParent) { if(parent.tag && parent.tag != '') { if(parseParent) { var bindingData = new SilverlightBinding.BindingData(parent,parent.tag,this); if(bindingData.bindingComplete) { this.bindingControls.length++; this.bindingControls[this.bindingControls.length-1] = bindingData; } else delete bindingData; } try { var temp = parent.children; } catch(err) { return; } for(var i = 0; i < parent.children.count; i++) this._childWorker(parent.children.getItem(i),true); } }, initialize:function() { this._childWorker(this.bindingContainer,false); this._receiveCount(); this._receiveData(0); }, OnSucceeded: function(result, userContext, methodName) { if (methodName == userContext.bindingMethod) { for(var i = 0; i < userContext.bindingControls.length; i++) userContext.bindingControls[i].updateValue(result); } else if(methodName == userContext.bindingCountMethod) userContext.recordCount = result; }, OnFailed:function(error, userContext, methodName) { if(error !== null) { alert(error.get_message()); } }, _receiveData: function(index) { eval('PageMethods.'+this.bindingMethod+'(index,this.OnSucceeded,this.OnFailed,this);'); }, _receiveCount: function() { eval('PageMethods.'+this.bindingCountMethod+'(this.OnSucceeded,this.OnFailed,this);'); }, next:function() { if(this.currentDataIndex+1 >= this.recordCount) return; this._receiveData(++this.currentDataIndex); }, prev:function() { if(this.currentDataIndex -1 < 0) return; this._receiveData(--this.currentDataIndex); } }

下圖為執行例。

後記

這種方式僅是一個應急的解法，畢竟傳輸圖形也是需要時間的，自然不比直接使用位於客戶端的字型來的有效率。

示例下載：

http://www.dreams.idv.tw/~code6421/files/SLDataDemo2.zip

Silverlight DataBindings for 1.1 (Managed code)

Silverlight DataBindings for 1.1 (Managed code)

文/黃忠成

RC1方興未艾，RC2已在路上了，看來1.0 Release之日不遠了！前面一篇文章利用了PageMethods與JavaScript為Silverlight 1.0RC加上DataBindings的功能，此次舞台換到了Silverlight 1.1 Alpha Refresh及Visual Studio 2008 Beta 2上，與1.1時不同，這次已無法用單一的Web Site模式實作，基於ASP.NET Ajax與Silverlight所使用的CLR Runtime不同，我們必須將Silverlight與ASP.NET Ajax拆開，別誤會！這並非意味你無法將Silverlight與ASP.NET Ajax放在同一個虛擬目錄下，Silverlight 1.1使用的Binary目錄是ClientBin，ASP.NET是Bin，兩者並無衝突，限制只在於你必須將Silverlight與ASP.NET Ajax分成兩個Project來編譯，在Silverlight編譯完成後將.xaml、.js複製到ASP.NET Ajax的專案目錄下，再將.dll複製到ASP.NET Ajax的ClientBin目錄下即可。回到主題，在Silverlight 1.1中，實現Data Bindings除了可以用前一篇文章的JavaScript技巧外，還多了一個選擇，那就是使用C#等Managed的語言，SLDH.js的C#版本如下。

SLDH.cs

///////////////////////////////////////////////////////////////////////// // Silverlight Data Binding Helper 0.1 for Silverlight 1.1 Alpha Refresh ///////////////////////////////////////////////////////////////////////// using System; using System.Text; using System.IO; using System.Net; using System.Reflection; using System.Linq; using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Browser.Net; using System.Windows.Browser.Serialization; namespace SilverlightDataHelper { public class JSONDataRow { private List<object> _columns; private List<object> _values; public object this[int index] { get { return _values[index]; } } public object this[string name] { get { for (int i = 0; i < _columns.Count; i++) { if (((string)_columns[i]).Equals(name)) return _values[i]; } return null; } } internal JSONDataRow(object[] columns, object[] values) { _columns = new List<object>(columns); _values = new List<object>(values); } } public class BindingData { private bool _bindingComplete = false; private string _bindingProperty = string.Empty; private string _bindingField = string.Empty; private FrameworkElement _control; private string _format = string.Empty; private PropertyInfo _cachedProp = null; public bool BindingComplete { get { return this._bindingComplete; } } public string BindingProperty { get { return _bindingProperty; } } public string BindingField { get { return _bindingField; } } public FrameworkElement Control { get { return _control; } } public string Format { get { return _format; } set { _format = value; } } public void UpdateValue(JSONDataRow dataItem) { if (_bindingComplete) { if (_cachedProp == null) { _cachedProp = _control.GetType().GetProperty(_bindingProperty); if (_cachedProp == null) _bindingComplete = false; } if (_cachedProp != null && Format != string.Empty) { if (_cachedProp.PropertyType == typeof(Uri)) { Uri uri = new Uri(string.Format(Format, dataItem[BindingField]), UriKind.Relative); _cachedProp.SetValue(_control, uri, null); } else _cachedProp.SetValue(_control, string.Format(Format, dataItem[BindingField]), null); } else if (_cachedProp != null) _cachedProp.SetValue(_control, dataItem[BindingField], null); } } public BindingData(FrameworkElement ctrl, string bindingExpression) { string[] bindings = bindingExpression.Split(';'); _bindingComplete = false; _control = ctrl; for (int i = 0; i < bindings.Length; i++) { string[] temp = bindings[i].Split(':'); if (temp.Length != 2) { _bindingComplete = false; return; } if (temp[0].ToLower() == "bindingfield") _bindingField = temp[1]; else if (temp[0].ToLower() == "bindingproperty") _bindingProperty = temp[1]; else if (temp[0].ToLower() == "format") _format = temp[1]; } if (_bindingField != string.Empty && _bindingProperty != string.Empty) _bindingComplete = true; } } public class BindingContext { private Panel _container; private List<BindingData> _bindingControls = null; private bool _bindingComplete = false; private int _position = 0; private int _count = -1; private string _serviceUrl = string.Empty; private string _bindingMethod = string.Empty; private string _bindingCountMethod = string.Empty; private string _countMethod = string.Empty; public int Position { get { return _position; } set { if (_position != value && value < Count && value >= 0) { _position = value; UpdateBinding(); } } } public int Count { get { return _count; } } public bool BindingComplete { get { return _bindingComplete; } } public List<BindingData> BindingControls { get { if (_bindingControls == null) _bindingControls = new List<BindingData>(); return _bindingControls; } } private void ChildWorker(FrameworkElement elem) { string exprsssion = elem.Tag == null ? string.Empty : elem.Tag; BindingData data = new BindingData(elem, exprsssion); if (data.BindingComplete) BindingControls.Add(data); if (elem is Panel) { Panel pnl = (Panel)elem; for (int i = 0; i < pnl.Children.Count; i++) { if (pnl.Children[i] is FrameworkElement) ChildWorker((FrameworkElement)pnl.Children[i]); } } } private void FetchCount() { BrowserHttpWebRequest request = new BrowserHttpWebRequest(new Uri(_serviceUrl + "/" + _bindingCountMethod, UriKind.Relative)); request.ContentType = "application/json; charset=utf-8"; request.Method = "POST"; request.ContentLength = 0; request.Referer = System.Windows.Browser.HtmlPage.DocumentUri.AbsolutePath; request.Accept = "/*/"; HttpWebResponse response = request.GetResponse(); StreamReader sr = new StreamReader(response.GetResponseStream()); JavaScriptSerializer serializer = new JavaScriptSerializer(); string data = sr.ReadToEnd(); _count = serializer.Deserialize<int>(data); sr.Close(); response.Close(); request.Close(); } private JSONDataRow FetchData(int index) { BrowserHttpWebRequest request = new BrowserHttpWebRequest(new Uri(_serviceUrl + "/" + _bindingMethod, UriKind.Relative)); JavaScriptSerializer serializer = new JavaScriptSerializer(); request.ContentType = "application/json; charset=utf-8"; request.Method = "POST"; request.Referer = System.Windows.Browser.HtmlPage.DocumentUri.AbsolutePath; request.Accept = "/*/"; Stream reqStream = request.GetRequestStream(); byte[] buff = Encoding.UTF8.GetBytes("{index:" + index.ToString() + "}"); reqStream.Write(buff, 0, buff.Length); request.ContentLength = buff.Length; HttpWebResponse response = request.GetResponse(); StreamReader sr = new StreamReader(response.GetResponseStream()); string data = sr.ReadToEnd(); sr.Close(); response.Close(); request.Close(); object[] parsedData = serializer.Deserialize<object[]>(data); return new JSONDataRow((object[])parsedData[0], (object[])parsedData[1]); } private void UpdateBinding() { JSONDataRow row = FetchData(Position); foreach (BindingData item in BindingControls) item.UpdateValue(row); } public void Initialize() { ChildWorker(_container); FetchCount(); UpdateBinding(); } public BindingContext(Panel container) { _container = container; if (_container.Tag == null) { _bindingComplete = false; return; } string[] parseBinding = container.Tag.Split(':'); _bindingComplete = false; if (parseBinding.Length == 2 && parseBinding[0].ToLower() == "bindingcontext") { string[] bindingMethods = parseBinding[1].Split(','); if (bindingMethods.Length == 3) { _serviceUrl = bindingMethods[0]; _bindingMethod = bindingMethods[1]; _bindingCountMethod = bindingMethods[2]; _bindingComplete = true; } } if (_bindingComplete) ChildWorker(container); } } }

ㄟ...程式碼變長了哦~~~ >"<，在某些情況下，Managed Code不見得比JavaScript簡單吧！只是別忘了，這些程式碼是預先編譯後再下載到客戶端，由Silverlight CLR執行的，就理論上來說，執行效率應該比JavaScript好才對。由於Managed SLDH使用了另一種JSON格式來交換資料，所以.aspx.cs也要做一些調整。

Default.aspx.cs

using System; using System.IO; using System.Data; using System.Collections.Generic; using System.Data.SqlClient; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Xml.Linq; using System.Web.Services; public partial class _Default : System.Web.UI.Page { private static DataTable BuildDataCache() { if (HttpRuntime.Cache["DataCache_Employees"] != null) return HttpRuntime.Cache["DataCache_Employees"] as DataTable; else { using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[" ConnectionString"].ConnectionString)) { SqlDataAdapter adapter = new SqlDataAdapter( "SELECT * FROM Employees ORDER BY EmployeeID", conn); DataTable table = new DataTable("Employees"); adapter.Fill(table); HttpRuntime.Cache["DataCache_Employees"] = table; return table; } } } private static List<object> BuildJSONRow(DataRow row) { List<object> result = new List<object>(); List<string> columns = new List<string>(); List<object> values = new List<object>(); foreach (DataColumn col in row.Table.Columns) { columns.Add(col.ColumnName); values.Add(row.IsNull(col) ? string.Empty : row[col].ToString()); } result.Add(columns); result.Add(values); return result; } [WebMethod] public static List<object> GetData(int index) { DataTable table = BuildDataCache(); return BuildJSONRow(table.DefaultView[index].Row); } [WebMethod] public static int GetCount() { DataTable table = BuildDataCache(); return table.DefaultView.Count; } protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["ID"] != null && Request.QueryString["ID"].Length > 0) { using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[ "ConnectionString"].ConnectionString)) { conn.Open(); SqlCommand cmd = new SqlCommand( "SELECT Photo FROM Employees WHERE EmployeeID = @ID", conn); cmd.Parameters.AddWithValue("@ID", Request.QueryString["ID"]); object data = cmd.ExecuteScalar(); if (data != null && ((byte[])data).Length > 0) { Response.Clear(); Response.BufferOutput = true; Response.ContentType = "image/jpeg"; MemoryStream ms = new MemoryStream(); ms.Write(((byte[])data), 78, ((byte[])data).Length - 78); MemoryStream jpegms = new MemoryStream(); System.Drawing.Image.FromStream(ms).Save(jpegms, System.Drawing.Imaging.ImageFormat.Jpeg); jpegms.Position = 0; Response.OutputStream.Write(jpegms.GetBuffer(), 0, (int)jpegms.Length); ms.Dispose(); jpegms.Dispose(); Response.Flush(); Response.End(); } } } } }

當需要做DataBindings時，只需要在.xaml.cs的Page_Loaded事件處理函式中建立此物件即可，見下面程式碼。

Page.xaml

<Canvas x:Name="parentCanvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="Page_Loaded" x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll" Width="640" Height="480" Background="White" > <Canvas Name="DataDemo" Height="600" Width="800" Tag="BindingContext:Default.aspx,GetData,GetCount"> <Canvas.Background> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="0.5" /> <GradientStop Color="Red" Offset="1.0" /> </LinearGradientBrush> </Canvas.Background> <TextBlock Tag="BindingField:EmployeeID;BindingProperty:Text" Name="txtEmployeeID" Width="144" Height="24" Canvas.Left="166" Canvas.Top="23" Text="A00001" TextWrapping="Wrap"/> <TextBlock Tag="BindingField:LastName;BindingProperty:Text" Name="txtLastName" Width="320" Height="24" Canvas.Left="500" Canvas.Top="23" Text="Alean Company" TextWrapping="Wrap"/> <TextBlock Tag="BindingField:FirstName;BindingProperty:Text" Name="txtFirstName" Width="320" Height="24" Canvas.Left="166" Canvas.Top="72" Text="Jeffray" TextWrapping="Wrap"/> <TextBlock Tag="BindingField:Title;BindingProperty:Text" Name="txtTitle" Width="576" Height="24" Canvas.Left="166" Canvas.Top="122" Text="Taipen 101" TextWrapping="Wrap"/> <TextBlock Tag="BindingField:HireDate;BindingProperty:Text" Name="txtHireDate" Width="576" Height="24" Canvas.Left="166" Canvas.Top="171" Text="2005/3/4" TextWrapping="Wrap"/> <Image Name="imgPhoto" Tag="BindingField:EmployeeID;BindingProperty:Source;Format:Default.aspx?ID={0}" Width="357" Height="206" Canvas.Left="400" Canvas.Top="301"> <Image.Triggers> <EventTrigger RoutedEvent="Image.Loaded"> <BeginStoryboard> <Storyboard Name="imgAnimation"> <DoubleAnimation Storyboard.TargetName="imgPhoto" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:6"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Image.Triggers> </Image> <TextBlock Name="txtLabel1" Width="114" Height="24" Canvas.Left="18" Canvas.Top="23" Text="Employee ID:" TextWrapping="Wrap"/> <TextBlock Name="txtLabel1_Copy" Width="120" Height="24" Canvas.Left="349" Canvas.Top="23" Text="Last Name:" TextWrapping="Wrap"/> <TextBlock Name="txtLabel1_Copy1" Width="130" Height="24" Canvas.Left="18" Canvas.Top="72" Text="First Name:" TextWrapping="Wrap"/> <TextBlock Name="txtLabel1_Copy2" Width="104" Height="24" Canvas.Left="18" Canvas.Top="122" Text="Title :" TextWrapping="Wrap"/> <TextBlock Name="txtLabel1_Copy3" Width="93" Height="24" Canvas.Left="18" Canvas.Top="171" Text="Hire Date:" TextWrapping="Wrap"/> </Canvas> <TextBlock Canvas.Left="100" Canvas.Top="200" Text="Prev" MouseLeftButtonDown="OnPrevClick"/> <TextBlock Canvas.Left="150" Canvas.Top="200" Text="Next" MouseLeftButtonDown="OnNextClick"/> </Canvas>

Page.xaml.cs

using System; using System.Linq; using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightProject1 { public partial class Page : Canvas { private SilverlightDataHelper.BindingContext _context = null; public void Page_Loaded(object o, EventArgs e) { // Required to initialize variables InitializeComponent(); _context = new SilverlightDataHelper.BindingContext(FindName("DataDemo") as Panel); _context.Initialize(); } void OnPrevClick(object sender, EventArgs args) { if (_context.Position > 0) { _context.Position--; ((Storyboard)FindName("imgAnimation")).Begin(); } } void OnNextClick(object sender, EventArgs args) { if (_context.Position < _context.Count) { _context.Position++; ((Storyboard)FindName("imgAnimation")).Begin(); } } } }

下圖是執行畫面。

http://www.dreams.idv.tw/~code6421/files/SLDataDemo_11.zip

(你需要將Northwind.mdf、Northwind_log.ldf複製到App_Data目錄下，或是修改web.config中的ConnectionString來連結到北風資料庫)