Programmatically Speaking ...

String.format problem with MS AJAX javascript

One of the string method in MS Ajax library is String.format. It works well in a statement like this:

alert(String.format("Format me now, first is {0}, second is {1}, third is {2}", "first", "second", "third"));

However, if you want to put the last three parameters in an array as such:

var values = new array();

values[0] = "first";

values[1] = "second";

values[2] = "third";

Then you run the statement again:

alert(String.format("Format me now, first is {0}, second is {1}, third is {2}", values));

You will found the alerted string is "Format me now, first is first, second, third, second is , third is "

Totally not what it should be.

So instead, we have to go back the old-timer javascript and do a replacement as such 

if (values.length > 0) {
                    url = "Format me now, first is {0}, second is {1}, third is {2}", 
                    for (var i = 0; i < values.length; i++) {
                        var exp = new RegExp('\\{' + (i) + '\\}', 'gm');
                        url = url.replace(exp, values);
                    }

Guess we all make mistakes.

var values = new array();

values[0] = "first";

values[1] = "second";

values[2] = "third";

Just Published on DNS: JQuery and ASP

Just Published on DNS

Using jQuery with ASP .NET

In September 2008 Scott Guthrie, the head of the ASP.NET team, announced in a blog post that Visual Studio would be shipping with the jQuery library. He writes:

“jQuery is a lightweight open source JavaScript library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web. A big part of the appeal of jQuery is that it allows you to elegantly (and efficiently) find and manipulate HTML elements with minimum lines of code … There is a huge ecosystem and community built up around JQuery. The jQuery library also works well on the same page with ASP.NET AJAX and the ASP.NET AJAX Control Toolkit.”

With that, JQuery is officially embraced by ASP.NET.

Silverlight HomePage is a good Laugh!

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?

ASP .net treeview control 2.0

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."

Twitter News, Yahoo News, Tweet news

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.

Dynamic ADC controls, master-child nested ADC controls

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:

1. $create(controlName,    // class   
2.             {},                     // properties   
3.             {},                     // events   
4.             {},                     // references   
5.             null);                  // associated element     

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>

ItemCommandEvent of ADC Repeater Control

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>

Of course .NET is deep

Of course, this is not my original.

I stole it from http://codeclimber.net.nz/archive/2008/08/23/.net-vs-php-in-the-enterprise-comics-strip.aspx. Cannot help it. 

New Year's Resolution

Visual Studio 2010 and ASP .NET 4.0

 When you are a new kid, you cannot wait to grow up. However, when you are older then older, every passing year makes you feel the loss and the tick of the clock.

That is how I also feel about the forward-and-fast moving versions of software and programming models, frameworks and technologies.

Here it comes: Visual Studio 2010.

http://visualstudiomagazine.com/columns/article.aspx?editorialsid=2848

Here it comes again: asp .net 4.0.

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=14924

Other people's work

AJAX: JavaScript, or ASP .net AJAX or JQuery

 There are hundreds of AJAX frameworks and libraries. And the number is still growing (Face it, because the web, with the demand of rich data and fast, smooth user experience, is AJAXified overnight).

JQuery, the very very basics - Lesson 6

 JQuery, the very very basics - Lesson 5 (Special Effects)

JQuery, the very very basics - Lesson 4 (Event handling)

JQuery, the very very basics - Lesson 3 (Elements manipulation)

JQuery, the very very basics - Lesson 2 (Elements styling)

JQuery, the very very basics - Lesson 1 (The magic $ and selectors)

 

On with my JQuery learning series. 

For every programming language, there is invariably string manipulation and array fiddling. No exception with JQuery. Being unobtrusive in principal and complimentary in nature, it does not try to replace the existing bulk of JavaScript functions with its own, rather, it simply adds some of the most sorely missed functions.  

Trimming a string: $.trim(value)

In dealing with strings, JavaScript already has quite a comprehensive set of functions, such as split, substr, charAt (see references at http://www.w3schools.com/jsref/jsref_obj_string.asp), however, for some mysterious reasons, it does not have a trim function for ridding of leading and trailing white space. Smart and generous people have contributed to the web various versions of their trim functions. Such as:

var trimmed = str.replace(/^\s+|\s+$/g, '') ;

It works perfectly. However, how about simply call trim() function provided by JQuery? The syntax is $.trim(value) 

var trimmed = $.trim(" this really needs to be trimmed ");

Clean and plain English, right?

Array functions:

 

$.each (container, callback)

 

In JQery, in addition to the conventional JavaScript array (array of strings, numerics, elements), there is also specifically object array in the form of key-value pairs.

 

The former array is coded as: 

var arr = [ "one", "two", "three", "four", "five" ];

 The later (each pair seperated by a colon :) :

var obj = { item1: "one", item2: "two" ,item3: "three", item4: "four"};

It has always been easy to loop through an JavaScript array. However, it can be easier with the JQuery $.each function. The syntax is

$.each (container, callback). The callback function receives two arguments with the passing of each element: with [] type (traditional JavaScript) array, index and value; with {} type (array of objects with properties), key and value.

 

So we can access JQuery array elements as such (forgive me for using so many alerts):

 

$.grep (array, callback, invert) 

 

JQuery offers a $.grep() function to return an array of elements that matches a certain condition. The callback function is passed two parameters: the current value and its index. For example,

 

$.map (array, callback) 

 

One convenient function to transform all of the elements in an array in one shot. Change a string array into a numeric array? Yes; Change the numeric array back to a string array? Yes; Add a 10 to every number in an array? Yes. Just call the $.map function.

 

For example:

 

Other extremely useful JQuery array functions are:

 

$.inArray(value, array), returns the position of the first occurance of the element by a specified value. As in:

$.unique(array), returns a deduplicated array. As in:

$.makeArray(object), create an array out of a selected elements. As in:

 

$.extend(target, source1, source2, ... sourceN), extends the target object with the properties of the sources. For example:

  

 

 

Good links: ASP .NET and JQuery

Found a great bunch of links about using JQuery with asp .net

Using jQuery to directly call ASP.NET AJAX page methods

encosia.com — An example of how to use jQuery to call an ASP.NET AJAX page method, without using a ScriptManager.

Using jQuery to consume ASP.NET JSON Web Services

encosia.com — An overview of consuming ASP.NET web services that are JSON serialized by the ASP.NET AJAX extensions, including a specific example of using jQuery to do so.

Using jQuery To Call ASP.NET Page Methods and Web Services

dexign.net — Seems like more and more ASP.NET devs are using jQuery. There are similar things on DNK but none that actually do provide code that uses jQuery to callback.

Integrating jQuery with ASP.NET

An alternative AJAX solution to use jQuery instead of ASP.NET AJAX

How to manage ASP.NET validation from Javascript with jQuery

codeclimber.net.nz — This article outlines how to enable and disable ASP.NET client side validation from Javascript using jQuery

Ajax and json for ASP.NET MVC with jQuery

chrisvandesteeg.nl — an example project that uses the jQuery library to create an ajax enabled ASP.NET MVC website. Generally what this project does: * Load views through ajax (with back-button support) * Do ajax-style form-posts and retrieve only the messages, errors and updated content * Do json form-posts and retrieve the errors an

3 mistakes to avoid when using jQuery with ASP.NET AJAX

encosia.com — Three common problems that I've seen when using jQuery with ASP.NET AJAX, their underlying causes, and simple solutions to them.

(Better) JQuery IntelliSense in VS2008

weblogs.asp.net — If you are like me and you've read the many articles about how to get other javascript libraries to work in VS2008, you'll know that all you really need to do is install the visual studio HOTFIX.

Client Side Templating with jQuery

west-wind.com — When building AJAX applications there's often the requirement to choose between client and server side rendering. Server side ASP.NET controls provide rich templating, but updating those controls on the client can be difficult. Or is it? Here's one approach using jQuery and HTML templates in markup script to dynamically create complex layout on the client without writing reams of script code.

JQuery, the very very basics - Lesson 5

 

$('div#toggle').toggle('slow'">);

Slide up and down, fade in and out

An example:

All right, see you next week (I wish I could give you a Sarah Palin wink :).