August 2008 - Posts

Go with the flow
Friday, August 29, 2008 4:04 PM

Go with the flow. People say. However, it is not easy to go with the flow, especially the flow branchs out into five-tooth-fork. 

I started web programming in 2003. I used asp then. Now five years later, asp was ditched and much ridiculed, asp .net has moved from 1.0 to 3.5. It took me a while, a long while, to wholeheartedly embrace asp .net. The learning curve was deep, programming became an exercise of discovering available properties and methods.  However, once I was up above the curve, I felt great and appreciative of what asp .net offers: a comprehensive framework that is flexible, scalable, with many tools big and small for pick and use.

Season turns, time flies.

In marching to the .net world was ASP .net AJAX. ASP .net AJAX is a complete departure from the asp .net server-centric model, now server's role is pretty much limited to that of a data-provider and client script takes over the rest of tasks such as event-responding, data-dressing. For this purpose, asp .net releases a quite bulky asp .net AJAX library. It also introduces a quick and dirty control updatePanel for a partial page refreshing. Most people have realized that updatePanel is a dangerous entity, it incurs heavy perfomance penality, complicates a page's control tree, and posts all unnecessary bits back to server. 

Then there is MVC (model-control-view). It is not really that new and it has just released its fifth version. MVC again represents a modal, new mentality. It does not resemble in any way with the now "legacy" model of asp .net web form application. The model represents the information (the data) and the business rules used to manipulate the data; the view corresponds to elements of the user interface such as text, checkbox items, and so forth; and the controller manages details involving the communication to the model of user actions such as keystrokes and mouse movements. This architectural pattern is new. The url rerouting used in controller is new. MVC ushers in a new framework.

Microsoft is battling on all fronts. Silverlight is a product of the battle against ADOBE's flash, which now made the very, very popular YouTube. Looks like that Silverlight has not made much ground at the expense of FLASH. But sure, Silverlight is a new baby too, even though now it is into its second release. Officially, "Silverlight is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web."

Whatever that means?

Of course, there is more. There is always more. 

kick it on DotNetKicks.com

Who is afraid of ADC? - Introduction to AJAX Data Controls - Part III
Tuesday, August 26, 2008 11:12 PM

ADC controls actually does not need much introduction. Repeaters, Gridviews, DataLists, we knew them since the onset of ASP .net.  And the ADC development team has deliberately made it easy for the transition from server side data-bound controls to client-side AJAX script controls.

However, little known about ADCs is that they are also equipped with a set of behaviors to make the control cool and cooler. Behaviors are predefined client funcationalities associated with one or more DOM elements.The list of client-side behaviors include:

  • CalendarBehavior: used as a cool datetime picker
  • DropShadowBehavior: used to attach a drop shadow to an element 
  • FilteredTextBoxBehavior: used to filter out unwanted input characters
  • MaskedEditBehavior: apply a "mask" to the input that permits only certain types of characters/text to be entered. The supported data formats are: Number, Date, Time, and DateTime
  • ModalPopupBehavior: display a pop up box, in a modal form rather than alert
  • NumericUpDownBehavior: add a up/down box to a text control to allow auto-increase or autodecrease numbers

As you may have noticed, most of the behaviors are also part of the AJAX control toolkit. However, the ADC team has tweaked them to work with the ajax data controls.

Screen Shot 1: CalendarBehavior used in conjunction with Gridview.

 

Screen Shot 2: Using a modal popup on deleteEvent 

 

 

All the behaviors scripts together with sample .aspx pages can be downloaded at http://www.codeplex.com/AjaxDataControls/SourceControl/ListDownloadableCommits.aspx

kick it on DotNetKicks.com

by xxxd | 2 comment(s)
Filed under:
Developing Client Components with ASP .NET AJAX
Thursday, August 21, 2008 10:24 PM

Have neglected to check DNS home page for a while. Now I just found out that my new article is published.

Here it is:

Developing Client Components with ASP .NET AJAX


Whether you like it or not, it is my brain baby.

YES!

by xxxd | with no comments
Filed under:
Who is afraid of ADC? - Introduction to AJAX Data Controls - Part II
Thursday, August 21, 2008 9:49 PM

Where does the buzz come from?

The suite of ADCs (AJAX Data Controls) has made a splash in the AJAX community, included by AJAXian directory, told in Tales from Evil Empire, twice mentioned by Joe Stagner, and of course, blogged a thousand of times by the developers: Sonu and Kazi. The code-killer Kazi has also published a number of articles as ADC tutorials and initiation to AJAX control development:

AJAX Repeater:
http://dotnetslackers.com/articles/ajax/ASPNETRepeater.aspx
 
AJAX gridview part 1 and two
http://weblogs.asp.net/rashid/archive/2008/01/14/ajaxdatacontrols-gridview-part-two.aspx
http://weblogs.asp.net/rashid/archive/2008/01/14/ajaxdatacontrols-gridview-part-one.aspx
 
General AJAX Control Development
http://dotnetslackers.com/articles/ajax/ASPNETAJAXControlDevelopment.aspx

How to use ADC Gridview?

Of the four ADC controls, Gridview has attracted most of the attention, usage and questions. So how to use the ADC Gridview?

Databinding

The syntax is almost the same as traditional server side ASP .NET Gridview, only now the data source end point is a web service, and everything is done in the JavaScript.

<script type="text/javascript">

        function pageLoad(sender, e)
        {
            DataService.GetAllCategory(onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            gridView.set_dataSource(result);
            gridView.dataBind();

        }

    </script>

 

Different type of columns

ADC gridview supports a number of columns:

  • BoundColumn
  • ButtonColumn
  • CheckBoxColumn
  • CommanColumn
  • DropDownListColumn
  • HyperLinkColumn
  • ImageColumn
  • RadioButtonColumn
  • TemplateColumn

The following example tries to cram in the GridView as many types of columns as possible.

 

 <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" DataKeyName="ID" SelectedIndexChangedEvent="onSelectedIndexChanged" RowCommandEvent="onRowCommand">
       <AlternatingRowStyle CssClass="AlternatingRowStyle" />
       <RowStyle CssClass="RowStyle"/>
       <HeaderStyle CssClass="HeaderStyle"/>
       <SelectedRowStyle CssClass="SelectedRowStyle" />
       <Columns>
        <AjaxData:GridViewCommandColumn ShowSelectButton="true"/>
        <AjaxData:GridViewRadioButtonColumn GroupName="Active"/>
        <AjaxData:GridViewCheckBoxColumn DataField="Active"/>
        <AjaxData:GridViewButtonColumn CommandName="ShowInfo" HeaderText="Company" DataTextField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"/>
        <AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
        <AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
        <AjaxData:GridViewHyperLinkColumn HeaderText="City" DataTextField="City" DataNavigateUrlFields="City" Target="_blank" DataNavigateUrlFormatString="Related.aspx?City={0}" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" />
       </Columns>
    </AjaxData:GridView>

 

GridView Editing

As that the server side asp .net Gridview has a magic button which allows you to update your data on the fly, ADC Gridview gives you the same freedom. It offers the same four events for you to do U&D (update and delete) and cancel if you change your mind,

  • EditCommandEvent
  • DeleteCommandEvent
  • UpdateCommandEvent
  • CancelCommandEvent

So declaratively, you can code your GridView as such:

 

 <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3" DataKeyName="ID" EditCommandEvent="onEditCommand" DeleteCommandEvent="onDeleteCommand" UpdateCommandEvent="onUpdateCommand" CancelCommandEvent="onCancelCommand">
                   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
                   <RowStyle CssClass="RowStyle"/>
                   <HeaderStyle CssClass="HeaderStyle"/>
                   <Columns>
                        <AjaxData:GridViewCommandColumn ShowEditButton="true" ShowDeleteButton="true" ShowCancelButton="true" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Customer" DataField="Company" SortField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" SortField="ContactName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" SortField="ContactTitle" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                   </Columns>
                </AjaxData:GridView>

 

GridView Sorting

With the old grand asp .net Gridview, if you want to add a little up or down arrows in the header to indicate by which column the Gridview is currently sorted, you need to spend a little time to add some extra code to the OnItemCreated event. Now, ADC GridView automatically does this for you automatically. 

To enable  sorting, the properties you need to specify are

  • SortColumn
  • SortOrderAscendingImageUrl / SortOrderDescendingImageUrl
  • SortCommandEvent

For the columns that you would like to sort, you need to specify this property: SortField

Then add a little code to the function that handles the SortCommandEvent

 

        function onSortCommand(sender, e)
        {
            _gridView.set_sortColumn(e.get_sortColumn())
            _gridView.set_sortOrder(e.get_sortOrder());
            //load data based on the sorting criteria
           loadProducts();
        }

 

GridView Paging

The way paging is done with ADCs is very different from the old grand ASP .net GridView. Rather a simply property of a Gridview or datalist, here, Pager in itself is a control and needs to be declared and fed with a number of properties and data information.  

Here is the code for a very minimal Pager control:

 

                <AjaxData:Pager ID="Pager1" runat="server" CssClass="PagerRowStyle"
                CurrentPageStyle-CssClass="PagerCurrentPage"
                OtherPageStyle-CssClass="PagerOtherPage"
                PageChangedEvent="pageChanged"></AjaxData:Pager>
 

 

Pager has a number of properties you can tweak, most of them are self-explanary:

  • cssClass
  • currentPageStyle
  • firstPageText
  • hideOnSinglepage
  • infoStyle
  • lastPageText
  • nextPageText
  • otherpageStyle
  • pageCount
  • pageIndex
  • pageSize
  • previousPageText
  • recordCount
  • showFirstandLast
  • showInfo
  • showNumeric
  • showPreviousAndNext
  • sliderSize
  • useSlider

The most important and only event of Pager is the pageChanged event. It is in handling this event, you specify the current page index and retrieve data and rebind it with the GridView.

The following is the minimum code how to deal with paging  

        function pageLoad(sender, e)
        {
            loadProducts();
        }

 

        function loadProducts()
        {
            //Need to convert the sortoder so our WS understand
            var startIndex = (_pager.get_pageIndex() * _pager.get_pageSize());

            DataService.GetProductList(startIndex, _pager.get_pageSize(), sortColumn, sortOrder, onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _pager.set_recordCount(result.Total);
            _gridView.set_dataSource(result.Rows);
            _gridView.dataBind();
        }

        function pageChanged(sender, e)
        {
            _pager.set_pageIndex(e.get_newPageIndex());
            loadProducts();
        }

 

 

==================================== 

Note: all the above code is from ADC sample code provided by DNS. ADC source code and samples can be downloaded at codeplex. For more information, please visit ADC home

Read my first post of the series about ADC (AJAX Data Controls),

 

kick it on DotNetKicks.com

What has respect in web development?
Monday, August 18, 2008 8:09 PM

 "ASP .net has no respect." Rick Strahl writes.

Then, what has respect in web development? Java, Python, Php, ruby, ...?

Some skin-deep statistics first:
 
What claims the lion's share of the job market?
 
"Available jobs are a pretty good indicator of the number of development projects for a given language.  Java pretty much dominates in this area, with C# coming in a distant second, and ASP.NET and PHP not too far behind.  Not a bad showing for Microsoft, actually."
 
 
Who gets the biggest paychecks?
 
 
 
 
Sorry, I could not find statistics for other languages, such as Python and Ruby. Even the available data is mangled and very much flawed. But the head status of Java remains.
 
Who claims the biggest and most famous web sites?
 
(I am appalled that I do not know and could not find information with regards to languages used by the most popular websites, such as ebay, citibank)
 
ASP .net (according to ASP .NET gets no Respect):
 

·         www.MySpace.com

·         www.newegg.com

·         www.cdw.com

·         www.dell.com

·         www.HomeShoppingNetwork.com

·         www.Phanfare.com

·         www.careerbuilder.com

·         www.progressive.com

·         www.CostCo.com

 

Java:
 
To tell the truth, I do not know much about the flag site developed in Java. The following are mostly java resource web site. 
 
 
Also, the big guy:
 
 
PHP:  
 
Biggest names: Facebook and Yahoo and Wikipedia.
 
Phython:
 
Look no further. The king of the web: Google and the most popular: YouTube.
 
Ruby:
 
Twitter. But rumors says twitter is going to replace Ruby.
 
The battle between Google and Microsoft
 
Google is everywhere. Microsoft's popularity appears to be in a steady decline. This, plus the evil stigma somehow struck with Microsoft, somehow deminishes the status of ASP .net. 
 
 
 
 
Final note:
Though web languages such as asp .net, Java, PhP are much used and have created wonders and made web part of our lives, the languages themselves are not very much researched upon, therefore statistics info is bare. Please fill me in if you know anything.
kick it on DotNetKicks.com
Who is afraid of ADC? - Introduction to AJAX Data Controls - Part I
Thursday, August 14, 2008 3:42 PM

ADC stands for AJAX Data Controls. It is one remarkable set of script data controls built with the Microsoft AJAX library. Emulting the enormously powerful and popular suite of ASP .net data binding controls of gridview, datalist and repeater, ADC offers the same data binding capacity and representational forms. The set of ADC controls include four players: gridview, datalist, repeater and pager. While with "orthodox" (for lack of a better word) asp .net data controls, paging is set as part of of properties, with "maverick" ADC, pager is created as a control itself and is to used in conjunction with other controls: gridview, datalist and repeater.

A little comparison between ADC set and asp .net data control set.

Similarities

Similarities are abound between the two, because ADCs are developed with its server side precedessor in mind and aimed to replicate all of their server-side goodies without postbacks.

  • Similar interface, be it gridview rendered as table, or datalist rendered as list of data items, or repeater offered as more free-styling template 
  • Dynamic data binding.
  • Built in sorting and paging (with pager control).
  • Built in in-row editing and deleting.
  • Similar events, such as rowCreated event, rowDataBound event, dataBind event
  • Similar property setting. For example, ADC gridview supports item templating, styling for header, datarow, alternative data, footer.
  • ADC gridviews supports a variety of data columns, such as button columns, checkbox columns, dropdownlist columns; Repeaters affords you the complete freedom for your template design.

Differences

The biggest differences are the developing approaches.

Asp .net data controls are pre-AJAX products, they were developed before AJAX rattled every web programmer on earth. For data refreshing or any other data operations, postbacks are mandatory and server handles every minute details of databinding, rendering and event responding. On the other hand, ADCs - AJAX Data Controls -  are post-AJAX products. They are AJAX enabled script controls that utilize heavily Microsoft version of AJAX JavaScript and DHTML programming.

ASP .net data controls can bind with a number of ADO .net data objects, such as DataSet, DataTable, DataReader. ADCs mostly take a web service as its data endpoint. The kind of web service can be furnished with XML, JSON. It can also be DataTable returned by a webmethod and serialized by JSON serializing converter.  Data can also be directly load from a web page.

In addition to the functionalities provided by ASP .net data controls, ADCs also provides:

  • a bit of animation during the process of databinding
  • Gridview columns drag and drop, datalist data items drag and drop
  • ADC controls are also equipped with a set of accessories packaged in ACT folder, it contains water-marked edit text box, calendar for date controls, modal pop ups, DropShadowBehavior, popup behaviors, etc. They can be used together with ADC controls or with other controls for animation, drag and drop, or anything you have in mind.

In short, among the numerious controls and components that mushroomed out after the overnight of AJAX rain, ADC controls truely stand out for its comprehensive functionalities and representional forms, for its nearly flawless execution, and its incorporation of many technologies and controls of the AJAX libraries.  

Download ADC - AJAC Data Controls here.

 

kick it on DotNetKicks.com

Go, Beijing, Go! 2008-8-8, 8:08 pm
Friday, August 08, 2008 8:52 AM

Chinese are obscessive with numbers. 8 is a lucky number, so 2008-8-8, 8:08 pm is a super-lucky number.

Go, Beijing, Go!

Go, China, Go!

 

by xxxd | with no comments
Reinvent the wheel, rewrite cascading dropdown controls
Wednesday, August 06, 2008 6:39 PM

My colleague is a cycling fanatic. She spent over 1,000 dollars on a bike, moreover, she paid a stack of money for a hand-made back wheel for her bike. This is her:

What? A hand-made wheel? A classic case of reinventing the wheel.

I digressed, but, not entirely. You will see.

ASP .net ajax extenders carry the promise of a plug-and-play. You plug your usb drive, there you get an extra drive. In a lot of straightforward, predicated scenarios, this is the case.

For example, the quite popular cascadingdropdown extender. Plug it in onto a server-side dropdownlist, every selectIndexChanged event of a parent dropdown would trigger the domino effect of cascadingly populate the next dropdownlist in line. True. This works with unambiguous scenarios where dependancy is one to one, for example, state -> city -> zipcode.

However, what if there is multiple dependancies where a fellow dropdown's values are decided not just by its immediate parent, but also the grandparent? For example, both the age factor and gender factor will decide the possible interests one may have. What if you need to populate your date dropdownlist depending on both of the year given and month choosen. This is the scenario where a DNS user asked about.  

Thus, we need to go beyond the formula provided by cascadingdropdown extender, we need to reinvent the wheel. This brings to the real purpose and essence of ASP .net AJAX, the ability to call web service smoothly and gracefully from client side JavaScript.

The web service

The following is a silly web service to create some fake dates, please note that it is adorned with the ScriptService attribute that makes it available to JavaScript clients as well

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

/// <summary>
/// Summary description for DateTest
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class DateTest : System.Web.Services.WebService {

    [WebMethod]
    public int[] GetYears()
    {
        int[] years = new int[10];

        for (int i = 0; i < years.Length; i++)
            yearsIdea = 2000 + i;

        return years;
    }

    [WebMethod]
    public string[] GetMonths(string value)
    {
        string[] month1 = new string[] { "Jan", "Feb", "Mar", "April" };
        string[] month2 = new string[] { "May", "June", "July", "Aug" };
        string[] month3 = new string[] { "Sep", "Oct", "Nov", "Dec" };

        if (int.Parse(value) < 2006)
            return month1;

        if (int.Parse(value) > 2006 && int.Parse(value) < 2008)
            return month2;

        return month3;

    }


    [WebMethod]
    public int[] GetDays(string value1, string value2)
    {
        int[] days = new int[10];
        int i;
        if (int.Parse(value1) < 2006 && int.Parse(value2) < 2)
        {
            for (i = 0; i < 10; i++)
                daysIdea = i;
        }
        else if (int.Parse(value1) < 2006 && int.Parse(value2) > 2)
        {
            for (i = 0; i < 10; i++)
                daysIdea = i + 10;
        }
        else if (int.Parse(value1) > 2006 && int.Parse(value2) < 2)
        {
            for (i = 0; i < 10; i++)
                daysIdea = i + 20;

        }
        else
            for (i = 0; i < 10; i++)
                daysIdea = i + 15;


        return days;

    }

}

 

To call the web service from JavaScript

 First thing, you have drag and drop the ubiqutous ScriptManager to your .aspx page to oversee all AJAX operations:

<asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="DateTest.asmx" />
        </Services>
    </asp:ScriptManager>

Get the cascading dropdown to work:

     function page_load(sender, e){            
            ddlYear = $get("ddlYear");
            ddlMonth = $get("ddlMonth");
            ddlDay = $get("ddlDay");

            DateTest.GetYears(onGetYears);
        
            $addHandler(ddlYear, "change", year_onchange);
            $addHandler(ddlMonth, "change", month_onchange);
         }
        
        function page_unload(sender, e){            
            $removeHandler(ddlYear, "change", year_onchange);
            $removeHandler(ddlMonth, "change", month_onchange);
        }
    
        function year_onchange(sender, e){
            var y = ddlYear.value;
            DateTest.GetMonths(y,onGetMonths);
        }

        function month_onchange(sender, e){
            var y = ddlYear.value;
            var m = ddlMonth.value;
//           alert(y + " " + m);
           DateTest.GetDays(y,m,onGetDays);
        }
        
        function onGetYears(result){
            for(var i = 0; i<result.length; i++)
            {AddToOptionList(ddlYear, resultIdea,resultIdea);
            }
        }

        function onGetMonths(result){
            ClearOptions(ddlMonth);
            for(var i = 0; i<result.length; i++)
            {AddToOptionList(ddlMonth, i,resultIdea);
            }
        }
   
       function onGetDays(result){
             ClearOptions(ddlDay);
            for(var i = 0; i<result.length; i++)
            AddToOptionList(ddlDay,i,resultIdea);
        }
         
          function AddToOptionList(OptionList, OptionValue, OptionText) {
                // Add option to the bottom of the list
                OptionList[OptionList.length] = new Option(OptionText, OptionValue);
            }

        
    function ClearOptions(OptionList) {

   // Always clear an option list from the last entry to the first
   for (x = OptionList.length; x >= 0; x--) {
      OptionList[x] = null;
   }
}

Conclusion: 

So i have completely ditched the server-centric programming model and the singleton-dependancy cascadingdropdown extenders, and wrote a set of cascading html select controls. The secret ingradient: using ASP .net AJAX extensions to call a web service.

Note:

you know that all array notation with i in the bracket "["i"]" is automatically turned into a shiny yeallow light bulb! The life of icons.

 kick it on DotNetKicks.com

Debugging ASP .NET AJAX with Firebug and Web Development Helper
Monday, August 04, 2008 9:34 PM

Bugs bite. With programming, bugs break your application; sour the relationship with the users. So by all means, debug!

 

With web development goes more sophisticated and complicated, so does debugging tools.

 

For a very long time, we were pretty hopeless debugging JavaScript, except sprinkling our little “alert” genies here, there and everywhere.

 

Now to debug JavaScript or AJAX applications, we have four tools:

  1. FireBug for FireFox
  2. Web Development Helper With Internet Explorer
  3. Visual Studio (2005 and above) Native Debugger
  4. Fiddler for monitoring HTTP traffic

FireBug for FireFox

 

The greatest of all the debugging, code inspection tools is the mighty FireBug with a funny name and funnier look. Doesn’t it look a cockroach?


On the web, there are two definitions associated with FireBug:

 

Meaning #1: a criminal who illegally sets fire to property

 

Meaning #2: a true bug: brightly colored bug that can exude a stain

 

However, that was before FireBug. Now the FireBug for Fire Fox has a luminous outlook

 

 

Console inspection with Firebug:

 

With ASP .net AJAX, you can send trace message to the browser by coding: Sys.Debug.Trace,

           

            Sys.Debug.Trace(“A special message for my dear Fire Bug”)

 

CSS inspection with FireBug:

 

You can view the page stylesheet loaded by the browser. The coolest thing is that you can modify the stylesheet on the fly and see it work its magic.

 

Script inspection with FireBug:

 

With ASP .NET AJAX, you inevitably invited a truck load of JavaScript to your page. Some of you own creation, mostly, not. With FireBug, you can click on any of the scripts load for a closer look. It is easy to spot errors with your bug, because it is written in Red, 10 errors. To debug, you can set a breakpoint by clicking the left zone near the line numbers, you can use the watch window to examine all the values of your script variables.

 

DOM  inspection with FireBug:

 

You can view the big interminable, unfathomable DOM tree with your little bug too. As with CSS, you can change any DOM element’s property in the FireBug window and see it takes effect instantly.

 

HTTP traffic inspection with FireBug:

 

Want to know the coming and going of the web requests, traffic congestions, and bottleneck? Click the NET tab. You got it.

 

In short, FireBug is a gem of bug for debugging. All AJAX developers can benefit from it enormously.

 

Visual Studio (2005 and above) JavaScript Debugger

 

To start with, you have to turn on script debugging from IE toolbar and uncheck the option: disable script debugging. Then to debug a segment of code, you add a statement with the debugger keyword.

           

            debugger;

 

as in the following:

 

 

Web Development Helper with Internet Explorer

 

Web Development Helper can be downloaded at: http://projects.nikhilk.net/WebDevHelper/.

 

After installation you can find it in the Tools menu in IE.

 

 

 

It has a deep well of information for you to inspect, page information, DOM structure, HTTP traffic, JavaScript, ASP .net inner mechanism (viewstate, trace information, cache, etc.).

 

kick it on DotNetKicks.com

Visual Studio 2008: Making (Intelli)sense of JavaScript
Sunday, August 03, 2008 10:44 AM

 We are all masters of efficiency. We ditched snail mail in favor of email. We do not try to remember the links we favor, instead we digg, kick, twitter, bookmark; We do not type web addresses, we search, when we search, we rely on word suggestions, past searches ... How convenient.

ASP .net intellisense to ASP .net programming is Google Suggest to google search. In visual studio 2005 and its precessors, we have very nice intellisense support on the server side. Very smart too. 

However with Javascript, intellisense is barely there. This is painful, since the world has turned and now the web wants to be predominantly JavaScript driven and client centric with the server's role be limited to mainly data provider.  

The good news is that Visual Studio 2008 has started to provide enormous support of Intellisense for JavaScript; the bad news is, not enough. But better use it than lose it.

 Intellisense for Common JavaScript Keyword, Classes, Standard method

 For example, if you type document, you will have the immediate suspects at your fingertips. Nice.

However, since JavaScript is a non-typed script language, that means, there is no type declaration, string vs int, so there is no intellisense support for string functions or math functions. Sort of like you do not have not declare you are female, male, animal or human being, therefore there is no predication the kind of behavior.

Intellisense for ASP .NET AJAX JavaScript extensions

 

$ sign is probably the very magic symbol in ASP .NET AJAX. $get is shortcut for Document.get(""), $addHandler for Sys.UI.DomEvent.addHandler. So whenever you type a $, Intellisense will intantaneously fill in with all of the suspects. One catch is that you must first drag and drop a ScriptManager control to page so Intellisense will know the presense of ASP .NET AJAX

Intellisense for external JavaScript

If you drag and drop an external JavaScript to your page, Intellisense will make an informative guess and lend you with its intelligence.  

However, I also tested it with JQuery, somehow it does not work.

JavaScript Doc comments and Intellisense

In C# and VB .NET projects,  special formatted and tagged XML comments can be used to generate an external Documentation (XML Comments Let You Build Documentation Directly From Your Visual Studio .NET Source Files), or Compiled HTML Help file (CHM).

. Now, with ASP .NET, xml comments in JavaScript can be used for the same.

While in C# and vb .net, comments are placed outside of a class, constructor, interface, method, as such:

/// <summary>
///
/// </summary>
/// <param name="strFilePath"></param>
public void LoadXMLFromFile(string strFilePath)

 In JavaScript, the right place for xml comments is inside the scoop:

/// <summary>
///
/// </summary>
/// <param name="strFilePath"></param>
function LoadXMLFromFile(string strFilePath)
{/// <summary>
///
/// </summary>
/// <param name="strFilePath"></param>
}

 

Standard xml comments tags are

summary: description of a class, constructor, method ...

param: parameters for a method

returns: return type of a method, if the method is to return anything

value: description for a property

field: "The field tag (which doesn't exist in C# and VB.NET because in those languages the summary tag can be used) is used inside of a class, interface or enumeration constructor to describe a field." (Betrand Le Roy)

Betrand Le Roy has a comphresensive post regarding The format for JavaScript doc comments.

XML comments can also aid Intellisense to aid us write code and provide meaningful suggestions.

For example, for a JavaScript function getQuote with xml comments

function getQuote(symbol) { /// <summary>get stock quote for a given symbol</summary> /// <param symbol="symbol">stock symbol</summary> /// <returns>string</returns> }

when i tried to invoke the function, intellisense helped me with this:

 ===

So that is the one greatest thing about vs 2008: Intellisense for JavaScript.  Scott Gu has an very authoritive post about this:

VS 2008 JavaScript Intellisense

Update:

I soon found a post about how to work around the Intellisense problem for JQuery:

jQuery Intellisense in Visual Studio

 kick it on DotNetKicks.com

by xxxd | 1 comment(s)
Filed under:
Congratulations! You are a Community Credit Winner!
Friday, August 01, 2008 6:32 PM

I do not remember I have won anything for a long, long time (except that in 1997, I won a huge scholarship from the University of Chicago).

Now, surprise and congradulations and a pat on my back. I have won the 14th prize in the July 2008 Contest of community credit. Too bad, a mere 14th. Still a reason to glee for a second. Also I got to know Diablo Caffeinated Energy Strips, which can bypass my stomach and go directly into my blood stream (sounds like some dangerous drug).

http://www.community-credit.com/CommunityCreditPrizePage.aspx

This is my badge of honor:

This site

This Blog

Syndication

Sponsors

  • MaximumASP