January 2009 - Posts
I have long found the flagsite of Silverlight disappointing, especially on the video-streaming side. Early this year, I blogged about my quite unhappy experience watching Bill Gate's performance on SilverLight, in this post:
http://dotnetslackers.com/Community/blogs/xun/archive/2008/01/11/a-disastrous-experience-with-silverlight.aspx
Of course my voice was buried in the chorus of praises for Silverlight. I thought I was wrong and bitchy.
Now, the very big candid voice of Rick Strahl blogged about his experience viewing Obama's inauguration. It made a splash.
http://www.west-wind.com/Weblog/posts/602131.aspx
...
On another note, what is the deal with the Microsoft's attempt of reinventing / rebranding itself by having Seinfield complain on air: he has so many cars, he gets caught in his own traffic; and Bill Gates did a little butt-wriggling dance ...
I heard it was a one million deal. What happened to it now?
I am a lazy googler, or, Google makes me lazy.
For example, recently I wanted to implement a treeview. Habitually I started to goole, which landed me right in an article in Code project. Unfortunately Google sure can rank popularity, however, it cannot pick the real gold. So the article leads me through a long archaic progress of downloading a suite of asp .net 1.0 web controls, including treeview, tab, multipage.
While trudging along, my brain finally managed to remind me of the asp .net 2.0 treeview I have used more than a few times: stop, stop.
Indeed while google does not know anything about the newest development in asp .net, I should know better. The asp .net 2.0 treeview control answers all of my needs, and the little quick start tutorial on treeview (http://quickstarts.asp.net/QuickStartv20/aspnet/doc/ctrlref/navigation/treeview.aspx) states it better:
"It supports a variety of programming models, from statically-defined trees, to dynamically constructed trees, to databound trees. The TreeView's rendering is fully customizable, allowing for a wide-range of look-and-feels for the control. The TreeView supports both postback-style events and simple hyperlink navigation, as well as a unique event handling model that allows data to be retrieved directly from a client without requiring a server postback. It also supports rendering on a variety of browsers, and can take advantage of up-level capabilities, such as client-script on later desktop browser versions."
Wall-street is crashing, main-street is suffering, however, the web-street is forever booming.
There are cool exciting applications sprung up everyday. For example, Twitter-Yahoo news mash-up.
Very old-fashioned people read newspapers, less old fashioned read google aggregated news, liberals / gossip seekers read huffington posts, the real news geeks, they turn to twitter for the newest, most breaking news of the newest news.
However, with timing, sometimes twitter news would be lacking in substance and depth. For example, the lastest Mumbai attack, users were frustrated to get the complete coverage and details, more details.
So the newest web tech breakthrough, Yahoo-Twitter mash-up.
"TweetNews mashup, combining the real-time search Yahoo’s BOSS tools with the freshness of Twitter. As an added bonus each story listed in TweetNews’ results also shows the relevant tweets, which themselves often have additional links. A quick search this morning for "flight 1549" yielded seven unique links from just the top result."
And the real web tech triumph, the developer Singh was able to create it with less than one hundred lines of code.
Wow, I wish I could be that good.
The AJAX Data Controls (ADC) created by www.dotnetslackers.com are a set of server controls using ASP .net AJAX and JavaScript library, it closely mirrors the functionalities of the pure server side ASP .net data controls such as gridview, datalist and repeater.
To create a ASP .net server control dynamically, we need to do so on the server side, in the code behind of page_init method. For example, to create a dynamic textbox control:
override protected void OnInit(EventArgs e)
{
// Create dynamic controls here.
// Use "using System.Web.UI.WebControls;"
TextBox1 = new TextBox();
TextBox1.ID = "TextBox1";
TextBox1.Style["Position"] = "Absolute";
TextBox1.Style["Top"] = "25px";
TextBox1.Style["Left"] = "100px";
Form1.Controls.Add(TextBox1);
TextBox2 = new TextBox();
TextBox2.ID = "TextBox2";
TextBox2.Style["Position"] = "Absolute";
TextBox2.Style["Top"] = "60px";
TextBox2.Style["Left"] = "100px";
Form1.Controls.Add(TextBox2);
this.TextBox1.TextChanged += new System.EventHandler(this.TextBox_TextChanged);
this.TextBox2.TextChanged += new System.EventHandler(this.TextBox_TextChanged);
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
Recently I discovered that It is possible to create dynamic ADC controls too, however on the client side, using the following syntax:
- $create(controlName,
- {},
- {},
- {},
- null);
For example, to create a repeater dynamically,
$create(AjaxDataControls.Repeater, {'itemTemplate': '<li><span id=\"spnProductName\"></span></li>'}, {'itemDataBound': onChildItemDataBound}, null, ulProducts);
In life, relationship is everything, parallel, hierarchical. Sometimes in data representation, we need to dynamically reflect data hierarchy too.
With asp .net, we can define the nested relationship among datatables in a dataset, then in a web form, we can set the relationship between a gridview and datalist as parent-child.
With ADC controls, is it possible to implement nested structures between two controls?
It turns out, Yes (this is my one of my recent discoveries). It turns out, it is pretty easy too.
The secret lies in the capacity of creating dynamic controls in the RowDataBoundEvent event of each parent row/item. The following is a dummy sample of nested gridview.
<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="GridView Basic" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
<h3>
Supplier Information</h3>
<AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0"
CellPadding="3" RowDataBoundEvent="RowDataBound" DataKeyName="ID">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<Columns>
<AjaxData:GridViewBoundColumn DataField="Company" HeaderText="Company">
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewTemplateColumn>
<ItemTemplate>
<a id="lnk" >show this</a><br />
<table id="ulProducts" style="display:none"></table>
</ItemTemplate>
</AjaxData:GridViewTemplateColumn>
</Columns>
<EmptyDataTemplate>
There is no records available.
</EmptyDataTemplate>
<EmptyDataRowStyle HorizontalAlign="Center" />
</AjaxData:GridView>
<script type="text/javascript">
var rIndex;
function RowDataBound(sender, e) {
var row = e.get_row(); //.get_rowIndex()
if (row.get_isDataRowType()) {
rIndex = row.get_rowIndex();
var ulProducts = row.findControl('ulProducts');
if (ulProducts) {
var childRepeaterID = ulProducts.id;
// alert(childRepeaterID);
var childRepeater = $find(childRepeaterID);
if (childRepeater) {
//There is a previous instance so we need to remove it.
Sys.Application.removeComponent(childRepeater);
}
childRepeater = $create(AjaxDataControls.GridView,
{ }, { },
null, ulProducts);
var data = new Array();
data[0] = { Id: 1, Name: "Sonu Kapoor" };
data[1] = { Id: 2, Name: "Xun Ding" };
data[2] = { Id: 3, Name: "Gabriel" };
data[3] = { Id: 3, Name: "Onur" };
childRepeater.set_dataSource(data);
childRepeater.dataBind();
}
var id = GridView1.get_dataKeys()[rIndex];
var context = { tablename: ulProducts };
var callback = Function.createCallback(showNested, context);
// alert(rIndex);
var lnk = row.findControl('lnk');
if (lnk) {
// alert("agag");
$addHandler(lnk, "click", callback);
}
}
}
function onChildItemDataBound(sender, e) {
}
function showNested(evt, context) {
var table = context.tablename;
if (table.style.display == "none")
table.style.display = "block";
else
table.style.display = "none";
}
function pageLoad(sender, e) {
Pager1.set_recordCount(100);
DataService.GetAllSupplier(onLoadSuccess);
}
function onLoadSuccess(result) {
GridView1.set_dataSource(result);
GridView1.dataBind();
}
</script>
</asp:Content>
The suite of AJAX Data Controls have three major controls: Gridview, DataList, Repeater, in a progression of more flexibilities yet a bit less of in-built functionalities. In the code downloaded from www.dotnetslackers.com, there are many samples given for Gridview, though not nearly as many for the Repeater.
Makes sense, for Repeater gives you the wildest space to define your own data template, which means, you have to do your own plumbing.
For example, how does the commandEvent of ADC repeater work?
It took me a while to work out an dummy sample.
<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="Repeater Render Bullet" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<h4>Categories</h4>
<AjaxData:Repeater ID="Repeater1" runat="server" ItemDataBoundEvent="onItemDataBound"
RenderAs="Ul" ItemCommandEvent="onItemCommad">
<ItemTemplate>
<li><input button="View"></span><span id="spnName"></span></li>
</ItemTemplate>
</AjaxData:Repeater>
<script type="text/javascript">
function pageLoad(sender, e)
{
DataService.GetAllCategory(onLoadSuccess);
}
function onLoadSuccess(result)
{
var repeater = Repeater1;
repeater.set_dataSource(result);
repeater.dataBind();
}
function onItemCommand(sender, e) {
var item = e.get_item();
if (item.get_isDataItemType()) {
if(e.commandName =="View")
alert('You clicked me');
}
}
function onItemDataBound(sender, e)
{
var item = e.get_item();
if (item.get_isDataItemType())
{
var category = item.get_dataItem();
var spnName = item.findControl('spnName');
setText(spnName, category.Name);
}
}
function setText(element, text)
{
if (typeof element.textContent != 'undefined')
{
element.textContent = text;
}
else if (typeof element.innerText != 'undefined')
{
element.innerText = text;
}
}
</script>
</asp:Content>
