`
happmaoo
  • 浏览: 4473255 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Silverlight 的 DataBindings

SilverlightJavaScriptASP.netAjaxASP 
阅读更多
<iframe align="top" marginwidth="0" marginheight="0" src="http://www.zealware.com/46860.html" frameborder="0" width="468" scrolling="no" height="60"></iframe>
Silverlight的Data Bindings：Silverlight 與 ASP.NET Ajax
文/黃忠成
不可否認，對於網頁美工人員或是動畫設計師而言，Silverlight提供了Flash以外的一個畫布，令她們可盡情揮灑創意！但對於設計師而言，Silverlight如何結合資料庫來呈現資料則是更具吸引力的課題，很明顯的！Silverlight 1.0 RC與Silverlight 1.1並不支援Data Binding機制，而且目前對於中文顯示仍存在著問題(下載字型不算是個解法，因為有法律問題)，不過如果這個問題獲得解決，Silverlight結合資料庫後所呈現的效果，相信會給客戶完全不同的網頁操作感受，當然！前提得要Silverlight支援Data Bindings，否則一切都是紙上談兵罷了。要令Silverlight支援Data Bindings說來也不難，只要處理幾個關鍵問題即可。一、資料提供者為何？ASP.NET Ajax的PageMethods/Web Service可以勝任此工作，如下列程式片段所示。
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[
"NorthwindConnectionString"].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;
}
}
}
[WebMethod]
public static Employee GetData(int index)
{
DataTable table = BuildDataCache();
return new Employee(table.DefaultView[index]);
}
[WebMethod]
public static int GetCount()
{
DataTable table = BuildDataCache();
return table.DefaultView.Count;
}
protected void Button1_Click(object sender, EventArgs e)
{
}
}
[Serializable]
public class Employee
{
[NonSerialized]
private DataRowView _rv = null;
public string EmployeeID
{
get
{
return (_rv.Row.IsNull("EmployeeID") ? string.Empty : _rv["EmployeeID"].ToString());
}
}
public string LastName
{
get
{
return (_rv.Row.IsNull("LastName") ? string.Empty : (string)_rv["LastName"]);
}
}
public string FirstName
{
get
{
return (_rv.Row.IsNull("FirstName") ? string.Empty : (string)_rv["FirstName"]);
}
}
public string Title
{
get
{
return (_rv.Row.IsNull("Title") ? string.Empty : (string)_rv["Title"]);
}
}
public string HireDate
{
get
{
return (_rv.Row.IsNull("HireDate") ?
string.Empty : ((DateTime)_rv["HireDate"]).ToShortDateString());
}
}
public Employee(DataRowView rv)
{
_rv = rv;
}
}
運用ASP.NET Ajax及JSON，我們可以輕易的用JavaScript來取得資料庫的資料，接著只要將資料設定給指定Silverlight控制項即可，這個工作可以簡單化也可以複雜化，簡單的作法是直接在JavaScript以findName來取得控制項，然後一一設定其屬性值。
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.dataContext = rootElement.children.getItem(0);
PageMethods.GetCount(this.OnSucceeded,this.OnFailed,this);
this.receiveData(this.currentDataIndex);
},
OnSucceeded: function(result, userContext, methodName)
{
if (methodName == "GetData")
{
userContext.displayData(result);
}
else if(methodName == "GetCount")
userContext.recordCount = result;
},
OnFailed:function(error, userContext, methodName)
{
if(error !== null)
{
alert(error.get_message());
}
},
displayData: function(data)
{
var idCtrl = this.dataContext.findName('txtEmployeeID');
var firstNameCtrl = this.dataContext.findName('txtLastName');
var lastNameCtrl = this.dataContext.findName('txtFirstName');
var titleCtrl = this.dataContext.findName('txtTitle');
var hireDateCtrl = this.dataContext.findName('txtHireDate');
var imgCtrl = this.dataContext.findName("imgPhoto");
idCtrl.text = data.EmployeeID;
firstNameCtrl.text = data.FirstName;
lastNameCtrl.text = data.LastName;
titleCtrl.text = data.Title;
hireDateCtrl.text = data.HireDate;
imgCtrl.source = "Default.aspx?ID="+idCtrl.text;
this.dataContext.findName("imgAnimation").begin();
}
這種做法的缺點是設計師得用JavaScript寫下許多程式碼。另一種做法是利用Silverlight控制項的Tag屬性，指定Binding Expression，然後於JavaScript中巡覽她們來一一指定值，如下列片段所示。
Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
CanvasName="DataDemo"Height="600"Width="800"Tag="BindingContext:GetData,GetCount">
Canvas.Background>
LinearGradientBrush>
GradientStopColor="Yellow"Offset="0.0" />
GradientStopColor="Orange"Offset="0.5" />
GradientStopColor="Red"Offset="1.0" />
LinearGradientBrush>
Canvas.Background>
TextBlockTag="BindingField:EmployeeID;BindingProperty:Text"Name="txtEmployeeID"Width="144"Height="24"Canvas.Left="166"Canvas.Top="23"Text="A00001"TextWrapping="Wrap"/>
TextBlockTag="BindingField:LastName;BindingProperty:Text"Name="txtLastName"Width="320"Height="24"Canvas.Left="500"Canvas.Top="23"Text="Alean Company"TextWrapping="Wrap"/>
TextBlockTag="BindingField:FirstName;BindingProperty:Text"Name="txtFirstName"Width="320"Height="24"Canvas.Left="166"Canvas.Top="72"Text="Jeffray"TextWrapping="Wrap"/>
TextBlockTag="BindingField:Title;BindingProperty:Text"Name="txtTitle"Width="576"Height="24"Canvas.Left="166"Canvas.Top="122"Text="Taipen 101"TextWrapping="Wrap"/>
TextBlockTag="BindingField:HireDate;BindingProperty:Text"Name="txtHireDate"Width="576"Height="24"Canvas.Left="166"Canvas.Top="171"Text="2005/3/4"TextWrapping="Wrap"/>
ImageName="imgPhoto"Tag="BindingField:EmployeeID;BindingProperty:Source;Format:Default.aspx?ID={0}"Width="357"Height="206"Canvas.Left="400"Canvas.Top="301">
Image.Triggers>
EventTriggerRoutedEvent="Image.Loaded">
BeginStoryboard>
StoryboardName="imgAnimation">
DoubleAnimation
Storyboard.TargetName="imgPhoto"
Storyboard.TargetProperty="Opacity"
From="0.0"To="1.0"Duration="0:0:6"/>
Storyboard>
BeginStoryboard>
EventTrigger>
Image.Triggers>
Image>
TextBlockName="txtLabel1"Width="114"Height="24"Canvas.Left="18"Canvas.Top="23"Text="Employee ID:"TextWrapping="Wrap"/>
TextBlockName="txtLabel1_Copy"Width="120"Height="24"Canvas.Left="349"Canvas.Top="23"Text="Last Name:"TextWrapping="Wrap"/>
TextBlockName="txtLabel1_Copy1"Width="130"Height="24"Canvas.Left="18"Canvas.Top="72"Text="First Name:"TextWrapping="Wrap"/>
TextBlockName="txtLabel1_Copy2"Width="104"Height="24"Canvas.Left="18"Canvas.Top="122"Text="Title :"TextWrapping="Wrap"/>
TextBlockName="txtLabel1_Copy3"Width="93"Height="24"Canvas.Left="18"Canvas.Top="171"Text="Hire Date:"TextWrapping="Wrap"/>
Canvas>
Canvas>
那如何解析Tag的Binding Expression並指定值呢？答案是利用Silverlight的JavaScript支援，一一巡覽所有控制項，一一解析Tag，然後再指定值。
/////////////////////////////////////////////////////////////////////////
// Silverlight Data Binding Helper 0.1
/////////////////////////////////////////////////////////////////////////
if (!window.SilverlightBinding)
window.SilverlightBinding = {};
SilverlightBinding.BindingData = function(ctrl,bindingExpression)
{
var bindings = bindingExpression.split(';');
this.bindingComplete = false;
this.ctrl = ctrl;
for(var i = 0; 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)
eval('this.ctrl.'+this.bindingProperty+
" = this.format.replace('{0}',dataItem."+this.bindingField+');');
else
eval('this.ctrl.'+this.bindingProperty+' = dataItem.'+this.bindingField+';');
}
}
}
SilverlightBinding.BindingContext = function(bindingContainer)
{
var parseBinding = bindingContainer.tag.split(':');
this.bindingComplete = false;
this.bindingContainer = bindingContainer;
this.bindingControls = new Array();
this.currentDataIndex = 0;
this.recordCount = 0;
if(parseBinding.length == 2 && 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);
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
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[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
return;
this._receiveData(--this.currentDataIndex);
}
}
使用此JavaScript物件的方法很簡單，只要於handleLoad中建立此物件，然後將Silverlight的根控制項傳入即可。
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.dataContext = rootElement.children.getItem(0);
this.bindingContext =
new SilverlightBinding.BindingContext(rootElement.children.getItem(0));
this.bindingContext.initialize();
}
切換上下筆時也很簡單。
function Next()
{
window.Silverlight.current_DataContext.bindingContext.next();
window.Silverlight.current_DataContext.dataContext.findName("imgAnimation").begin();
}
function Prev()
{
window.Silverlight.current_DataContext.bindingContext.prev();
window.Silverlight.current_DataContext.dataContext.findName("imgAnimation").begin();
}
下圖為執行畫面。
看不到炫麗效果啊？哈~~~我承認，我的美工細胞粉差！
本例下載位址：
http://www.dreams.idv.tw/~code6421/files/SLDataDemo1.zip


Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1720494


分享到：
| Silverlight 與 ASP.NET 的完美結合法 - ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C#中DataBindings用法实例分析

    在C#编程中，DataBindings是一个强大的特性，用于在用户界面（UI）控件与数据源之间建立双向数据绑定。这种绑定允许数据源的变化自动反映到UI上，反之亦然，极大地简化了数据驱动的应用程序开发。下面我们将通过实例...

    .net textbox DataBindings

    `DataBindings`是.NET中一个关键的概念，它用于实现控件与数据源之间的绑定，使得数据显示和更新变得更加简单。在这个案例中，我们将深入探讨如何使用`.NET TextBox`的`DataBindings`特性来展示对象的名称，而不是其...

    C#数据绑定(DataBinding)简单实现方法

    在 `InitUI()` 方法中，`textBox1`, `textBox2`, `textBox3` 分别通过 `DataBindings.Add(new Binding("Text", order, "Id"))` 这样的方式与 `Order` 对象的属性 `Id`, `Customer`, `OrderDate` 进行了绑定。...

    C# WINFORM 控件双向绑定少为人知的秘密

    = null) ctl.DataBindings.Remove(ctl.DataBindings[propertyName]); ctl.DataBindings.Add(propertyName, BindingSource, fieldName, true, DataSourceUpdateMode.OnPropertyChanged); } public void SetBinding...

    databindings_bug:多模块不适用于数据绑定编译器v2

    标题提到的“databindings_bug:多模块不适用于数据绑定编译器v2”就是这样一个典型的问题，它涉及到Java编程语言和Android的数据绑定框架。 在Android Studio中，多模块项目被广泛采用，以实现更好的代码组织和重用...

    Gtk.DataBindings-开源

    Gtk.DataBindings 是一个开源项目，专为 Mono 的 Gtk-Sharp 框架提供数据绑定功能。在编程领域，数据绑定是一种强大的设计模式，它允许开发者将用户界面（UI）组件的状态直接与应用程序的数据模型关联起来。这使得 ...

    c# 如何将RadioButton与DataTable数据进行绑定

    当使用`DataBindings.Add`方法时，默认的行为是在控件的Validation事件触发时更新数据源。在这种情况下，问题在于当点击其中一个RadioButton时，另一个RadioButton的验证事件并未被触发，导致数据源中的对应值没有...

    ImageCombobox

    本库是用C#.net编写的，是一个带Image 的combobox。

    databindings-test:测试应用程序的数据绑定

    在这个名为“databindings-test”的项目中，我们很显然是在测试这种机制。 在JavaFX中，数据绑定是其强大的特性之一，它简化了用户界面与后台数据模型之间的同步。例如，你可以将一个文本字段的文本属性绑定到某个...

    C#应用BindingSource实现数据同步的方法

    本文以实例形式讲述了C#应用BindingSource实现数据同步的方法，对C#数据库程序开发来说具有一定的参考借鉴价值。具体实现方法如下： 下面的代码示例演示如何使用 BindingSource 组件，将三个控件（两个文本框控件和...

    WinForm中动态绑定TreeView数据 收藏.doc

    在Windows Forms（WinForm）应用程序开发中，动态绑定控件数据是一种常见的需求，特别是当数据来自数据库时。这里我们关注的是如何将数据库中的记录动态地显示在TreeView控件中。TreeView控件通常用于呈现层次结构的...

    Windows窗体应用程序中的数据绑定[归纳].pdf

    在Windows窗体中，控件通过`DataBindings`集合属性实现这一功能。例如，你可以将一个TextBox的`Text`属性绑定到数据库中的一列，这样当数据源发生变化时，TextBox的内容也会自动更新。在Web窗体中，简单数据绑定通过...

    基于Apache CXF构建SOA应用 随书源代码

    覆盖以下内容：基于JAX-WS规范和CXF自身的前端模式实现，CXF支持的数据绑定（DataBindings），CXF支持的WSDL绑定，CXF支持的传输协议绑定。CXF的调式、配置、日志、发布和工具。CXF实现RESTful服务。CXF对WS-* 的...

    C#在表中修改数据或通过textbox

    textBox1.DataBindings.Add("text", dataset1, "Table.序号"); textBox2.DataBindings.Add("text", dataset1, "Table.小类"); textBox3.DataBindings.Add("text", dataset1, "Table.品目"); textBox4.DataBindings....

    数据绑定数据绑定对象

    `Binding`对象通过`ControlBindingsCollection`的`Add`方法添加到控件上，例如`textBox1.DataBindings.Add("Text", ds, "Products.ProductName")`。 3. `CurrencyManager`和`PropertyManager`： 这两者都是`...

    如何使用TreeView

    &lt;DataBindings&gt; &lt;/DataBindings&gt; ``` 这里，`DataMember`属性指定了要绑定的数据集名称，`TextField`定义了显示的文本，而`ValueField`则设定了每个节点的值。 ### 3. 主从表数据的绑定 对于主从表关系，...

Magicbox
Global site tag (gtag.js) - Google Analytics