Programmatically Speaking ...

MVC Preview: 1, 2, 3 and 4

I would rather live under a rock, not caring about any buzz. However, when there is too much buzz, the noise becomes thunderous so that you cannot ignore it even if you live under a rock.

What is the asp .net buzz going on right now?

MVC preview 4.

What is that? I am not even sure about MVC preview 1. So I  have to go back to the root.

In order to keep pace and go forward, I have to go back.

Prevew 1 - Nov 2007

MVC, stands for Model-View-Controller, was first released in around Nov. 2007. Its core competencies or main characteristics are:

1. Clear seperation among data, buisness logic and presentation
2. Powerful url rerouting component, so resources can be fetched through meaningful, RESTful urls. For example, the old style non-sensible urls such as: localhost/products/getProduct.aspx?id=4 can be rewritten as localhost/products/id/4.  
3. REST-like approach to ASP .NET web development. Each data request to the server is no longer dealt in the code-behind, but rather is http calls to a target URL.

Scott Gu has a series of great posts regarding MVC:

• ASP.NET MVC Framework
• ASP.NET MVC Framework (Part 1)
• ASP.NET MVC Framework (Part 2): URL Routing
• ASP.NET MVC Framework (Part 3): Passing ViewData from Controllers to Views
• ASP.NET MVC Framework (Part 4): Handling Form Edit and Post Scenarios

Prevew 2- March 2008

In March 2008, MVC preview 2 was released quietly. Its main enhancement seemed to be focused on routing. By this time, MVC has been factored into three assemblies:

• System.Web.Mvc
• System.Web.Routing
• System.Web.Abstractions

A new feature ActionFilterAttribute was added to release 2. How to use it? This is a post by David Hayden.

 ActionFilterAttribute Examples for ASP.NET MVC Framework Preview 2

Prevew 3 - May 2008

Then again, in May 2008, MVC preview 3 was released. Scott Gu again had a great post for it:

http://weblogs.asp.net/scottgu/archive/2008/05/27/asp-net-mvc-preview-3-release.aspx

According to Scott Gu, the major improvement of Preview 3 seemed to richer url rerouting features and some method changes with controllers.

Prevew 4 - July 2008. A couple of days ago.

With preview 4, related posts about MVC has mushroomed, led by Scott Gu (who else could it be?).

 ASP.NET MVC Preview 4 Release (Part 1)

he stated:

"The Preview 3 release focused on finishing up a lot of the underlying core APIs and extensibility points in ASP.NET MVC.  Starting with Preview 4 this week you'll start to see more and more higher level features begin to appear that build on top of the core foundation and add nice productivity."

Action Filter Attributes in the 2nd release float to the surface. So are other filters, such as outputache filter, handleError filter, authorize filter.

Sample Application: Kigg

Other than the pet sample applications provided by Scott Gu, the really good real life application remained to the Kigg application developed with MVC release 1, then updated with release 2. The developer, Kazi Manzur Rashid since then seemed to have gone on a extended vacation, or in a very intensive project.

This is his very well written tutorial regarding MVC and Kigg.

 Kigg - Building a Digg Clone with ASP.NET MVC Part - 1

For the memories to be lost (为了忘却的纪念)

Randy Pausch dies  at the age of 47.  

May his famed "the last lecture" shine through our search for meaning, striving for success, reaching for dreams. And most importantly, how to live and how to laugh.

 http://www.youtube.com/watch?v=ji5_MqicxSo

How do you sort member profile? And add multiple subheaders to a gridview?

Life is what happens to you when you busy making other plans (by John Lehnon); In other words, life is full of surprises; in yet another words, there are always more variations than you  programmed for. Or changes are faster than plans.

Talk about programming...

I coded a small survey website with about 100 users, I used the asp .net membership and profile management system. The profile has the usual demographics elements: gender, race, income, etc.

Everything has been running smoothly and the site's admin has been happy. Then she asked me to sort and group all users by gender, then race, then income. Without even blinking, I said sure, thinking it could be done in 10 minutes.

I thought there must be a sort method within the profile system. But no. So I searched, not many people ever bothered with this. There was even one answer said flatly: forget it, profiles are not meant for sorting or grouping. To do this, please use customized profile system with database table.

But I do not want to throw my perfectly working profiles out of the window and start from anew.  So what do i do?

When I just about to write my own sort method, then I thought, what not simply populate key profile properties into a datatable, get a DataView, and use its sort method. Sure it will work.

Indeed. This is the code:

ProfileCommon profile;
            dt = new DataTable();
            dt.Columns.Add(new DataColumn("Race"));
            dt.Columns.Add(new DataColumn("Gender"));
            dt.Columns.Add(new DataColumn("Incomde"));
            dt.Columns.Add(new DataColumn("username"));
            dt.Columns.Add(new DataColumn("userkey"));
    //populate datatable
 foreach (MembershipUser m in allUsers)
            {
                userkey = m.ProviderUserKey.ToString();
                username = m.UserName;
                //categorize users by race and gender
                profile = Profile.GetProfile(username);
                DataRow r = dt.NewRow();
                r["username"] = username;
                r["Race"] = profile.Race;
                r["Gender"] = profile.Gender;
                r["userkey"] = userkey;
                r["Income"] = profile.Income;
          }
            //get the datatable default view
            DataView dv = dt.DefaultView;
            //sort
            dv.Sort = "Race desc, Gender desc, Income desc";
           //bind the view with a gridview
            gvProgress.DataSource = dv;
            gvProgress.DataBind();      

 Great.

 Now I had a second problem, how do I add the layers of subheaders to the display?

 It is not hard.

So I grabbed a piece of code from online and modified it slightly:

    private string[] m_subcategory = new string[] { "", "","" };
        private Color[] backcolors = new Color[] { Color.BlueViolet, Color.CornflowerBlue, Color.Cornsilk };
        private Color[] forecolors = new Color[] { Color.White, Color.BurlyWood, Color.Red };
        //Which column names we want to add subheader
        string[] fields = new string[] { "Completed", "Race", "Gender" };

    protected void gvRow_DataBound(object sender, GridViewRowEventArgs e)
        {
            GridViewRow gvr = e.Row;
            switch (gvr.RowType)
            {
                case DataControlRowType.DataRow:
                    {

                        addSubHeader(fields, gvr);
                        break;
                    }
            }
       
        }
 private void addSubHeader(string[] fieldName, GridViewRow gvr)
        {

            for (int i = 0; i < fieldName.Length; i++)
            {
                DataRowView drv = gvr.DataItem as DataRowView;
                string subcategory = drv[fieldName].ToString();

                //string subSupplier = drv["supplierID"].ToString();
                //compare previous category with the current. 
                //if different, insert a new header
                if (!subcategory.Equals(m_subcategory))
                {
                    GridViewRow row = new GridViewRow(0, 0, DataControlRowType.DataRow,
                      DataControlRowState.Normal);
                    TableCell cell = new TableCell();

                     cell.BackColor = backcolors;
                     cell.ForeColor = forecolors;
                    cell.ColumnSpan = gvProgress.Columns.Count;
                    cell.HorizontalAlign = HorizontalAlign.Left;

                    for (int j = 0; j < i; j++)
                        cell.Text += "&nbsp;&nbsp;&nbsp;&nbsp;";
                    cell.Text += fieldName + " : " + subcategory;

                    row.Cells.Add(cell);
                    gvProgress.Controls[0].Controls.AddAt(gvProgress.Controls[0].Controls.Count - 1, row);
                    m_subcategory = subcategory;
                }

                //do not display text for the grouping cells
                gvr.Cells.Text = "";
            }
        }

I am quite disappointed ..

In 2003, Bill Gates wrote in his email: I was quite disappointed at how Windows Usability has been going backwards and the program management groups don't drive usability issues.

Yesterday I was and today I am still quite disappointed at How www.asp.net, the flag site of ASP.net works or does not work.

All I wanted to do was to sign in. I created an account yesterday and I tried to sign in. Immdiately I got an error message, see the screenshot:

So I was gravely warned of a security certificate problem and recommended not to continue. In spite of this, I continued with trepedation (because I really wanted to join www.asp.net community). I put in my password and username, immediately I got a second error, "Access Denied". No forget your password, no any other friendly suggestions.  See screenshot:

I searched around and found their password reset link and filled out the form. Then I was told to allow 15 minutes for the email to arrive. 15 MINUTES. Unbelivable. But it did arrive. I clicked the link provided:

http://forums.asp.net/user/ChangePassword.aspx?UserName=xxXd&PrivateToken=fe68abce-0fe9-4bee-a1e1-0e3d623922d1

I got the aboe the error message again.

I was beyond disbelief.

However, I really really wanted to join asp.net, so I sent them an email. Two days passed, not a soul replied.

How I love dotnetslackers.com. With DNS, this never happens. 

As early as 2003, Bill Gates relayed his frustration and disappointed with his programmers, developers, designers...

From: Bill Gates
Sent: Wednesday, January 15, 2003 10:05 AM
To: Jim Allchin
Cc: Chris Jones (WINDOWS); Bharat Shah (NT); Joe Peterson; Will Poole; Brian Valentine; Anoop Gupta (RESEARCH)
Subject: Windows Usability Systematic degradation flame

ASP, ASP .NET, ASP .NET AJAX - A brief history

Before 1995, creating and maintaining a website was insufferable. You had to go about every bit of changes manually. If you have 40 books, to put out the information of these 40 books, you had to write out 40 pages. Web pages at those times cannot do anything at all except static information display. Those were ancient times in the internet era.

In 1996, at the height of internet bubble, Microsoft released ASP (Active server pages) to dynamically generate htmls, thus joining forces with PHP. PHP was released one year earlier and has become the most popular web development languages. ASP uses vbscript as it is fundation script language.

In 2000, the technology heavy NASDAQ Composite index more than doubled its value a year before. Internet bubble climaxed and soon after bursted at full speed. Around this time, Microsoft quietly (so quiet because it had no idea of its potential and impact) developed XMLHttpRequest as a server side API call. It can be accessed through any browser supporting script language on the client side.

In the midst of reeling from internet company bankranptcies, closing-downs and start-ups, XMLHttpRequest did not make a stir.

In 2001, .NET framework was out. Almost immediately after, Microsoft rolled out ASP .net 1.x, led by Scott Gutherie (dubbed by some as the ASP .NET god). ASP .NET represents a complete breakout from the old web development model, it now shoves every tasks, big or small, to the server. State management? to the server; user management? Post to the server. Every button click, image hover, ... are now heroically handled by the server.

Even god can be imperfect and has to constantly reinvent himself. ASP .net 1.x leaves much to be desired and was met with limited success. So the asp .net team went behind the scene to produce better frameworks and better .net.

In Nov. 2005, ASP .NET 2.0 was rolled out. It is a powerful, powerful web development tool, equipped with many built in systems and tools, master pages, membership and profile systems.

However, during this periods, the gods of the internet have become the free styling, elite Google developers. How they have changed the landscapes and internet cultures.

In 2004, Google released a web mail application GMail, seduced almost everyone with more than 2 gigebytes of storage space. Before that, it released adsense, acquired Blogger, launched google toolbar, covered the world with Google news ... the online world is a Google world, "Google" became an official verb. "Have you googled?" ...

GMail's success owes a great deal of thanks to the once annoymous XMLHttpRequest api invented by Microsoft. By constantly pooling server data from the client side and seamlessly update information, GMail provides fast pleasant user experience.

Google Maps soon followed suit. Google uses XmlHttpRequest brazenly and breathtakingly. Google Maps now the most cherished and widely used product of the world.  

The programming world went head over toes about XmlHttpRequest.  When AJAX was coined in 2005, it immediately took off.

Now everything on the web has to be AJAX-ed, because we want the world by our fingertips, we want it fast. 

Still bathing in the sunshine of success of ASP .NET 2.x, the ASP .NET team was thrown back and and set them to immediate action by the runaway with AJAX of the programming world. 

In 2007, after a lengthy test period, Microsoft rolled out ASP .NET AJAX as an extension of ASP .NET 2.0. It does not resemble ASP .NET 2.0 much by extension, though. Spotlight again has shifted from server side classes, controls to client side components and scripts.

REST web service is a three-legged stool

The more I read and think about Rest web service, the more I am convinced that it is a three-legged stool. The three legs are: resources / noun, actions (get, post), and data output (plain text, xml, Jason).

For millions of regular users, REST is the web itself. We have been "getting, posting" since the web was born; for purpose-driven background XmlHttpRequest calls, REST is the service, pure data and transactions, stripped of other extraneous / superfluous dressed-ups.

On the implementation side, REST does not come in any pre-defined packages and has to be landed in any frameworks. It is indiscriminate of languages. It can be perl, python, php, asp, asp .net 1.x, 2.x, 3.x. It is an "archtechtural style" (whatever that means). The opposite of Soap service, which is rigidly defined and has a bloated set of rules and protocols.

Also the opposite of the heavy and verbose Soap service, REST is light and instantly to the point.

The three legs of the REST web service are:

1. Nouns: each noun identify a type of resource.

For example:http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=94306&results=2

A lot of REST talks stress using Nouns and avoiding verbs on the URL side, for example:

use

http://www.parts-depot.com/parts/getPart?id=00345

    Note the verb, getPart. Instead, use a noun:

 

http://www.parts-depot.com/parts/00345

I do not why using getPart would be violating the principal. However, the noun url is a logical url not physical url,  In .net, we cerainly can use URL rewriting to achieve this goal

2. Verbs (Get, Post ...).

With other unix-sort of languages, like perl, there are PUT, and Delete.

GET is obvious, it is the Select in database queries.

Why POST?

POST can be used to deal with large amount data,  or form data.

3. Output

The whole purpose of REST is this: data representation. It can have many formats: plain text (though not recommended), XML, JSON. The list could be ever expanding.

So REST is a conceptual idea. It is a style, not implementation. It is evolving as the web is evolving. Like the web, it has some design principals: nouns, verbs, output.

ASP .net AJAX Event handlers - the very very basics

At my work, my boss jokes that there are two types of people: those who speak English and those who don't (they speak in technical Jargons or terms instead). I am one of those who do not, moreover, I am the only one who actually speaks asp .net. However, now with ASP .NET AJAX, I feel like one of those who do not. (Almost. I am getting much better, that is why I am blogging here. :)

ASP .net AJAX, not asp .net, not JavaScript (Quoting Britney Spears, not a girl, not a woman).

For example, in JavaScript, to respond to a button click, we do,

<input type=button name="button1" text="click me" onClick="clickMe()".>

However, in the ASP .net AJAX api syntax, we handle the event (using event handler) in any of the following three ways:

• Directly add a event responding function
• create client delegate: Function.createDelegate
• create callback: Function.createCallback

Each of the three methods have different signatures and have its nuances

1. $addHandler takes three parameters: Dom element, event name, event handler. e.g.,

  $addHandler(btn1,'click', handleBtnClick);

So the first argument would be the event object itself, the last one the function that handles the click event.

   2.  Function.createDelegate takes 2 parameters: keyword: this --> referring to the window object; and the function. With a clientDelegate, we are able to access other dom elements and properties of the container.

var clickDelegate = Function.createDelegate(this, onButtonClick);

   3. Function.createCallback takes 2 argument: the first one, the event itself and any additional info you wish to pass to the function. In ASP .net AJAX, this piece of information is called context. The context could be handy when we need to communicate with an event some information, for example, a piece of data.

 var clickCallback = Function.createCallback(onCallBackButtonClick, {userid:xxxxxx});

Put it together, the following is a very simple test page using the above three methods

<script language="javascript">
<!--
    function pageLoad()
    {
        var btn1 =$get('btn1');
        var btn2 =$get('btn2');
        var btn3 =$get('btn3');
       
        $addHandler(btn1,'click', handleBtnClick);
       
        var clickDelegate = Function.createDelegate(this, onButtonClick);
       
        $addHandler(btn2,'mousedown', clickDelegate);
       
        var clickCallback = Function.createCallback(onCallBackButtonClick, {date:new Date()});
       
        $addHandler(btn3,'mouseover', clickCallback);
       
    }
   
    function pageUpload()
    {
        var btn1 =$get('btn1');
        var btn2 =$get('btn2');
        var btn3 =$get('btn3');
      $removeHandler(btn1,'onClick', handleBtnClick);
     
       $removeHandler(btn2,'onClick', clickDelegate);

       $removeHandler(btn3,'onClick', clickCallback);
    }
   
    function handleBtnClick(evt)
    {
        alert("Evoked from event handlers: " + evt.button);
       
    }
   
    function onButtonClick(evt)
    {
        alert("Evoked from delegate: " + evt.button);
       
    }
   
    function onCallBackButtonClick(evt, context)
    {
        alert("Evoked from callback" + evt.button + context.date);
    }

//-->
</script>

<input type="button" id="btn1" value="Button 1 -- Add Handler" />
<input type="button" id="btn2"  value="Button 2 -- Client Delegate" />
<input type="button" id="btn3"   value="Button 3 --Client CallBack" />

 Please note, in AJAX, we are always busy adding and removing handlers, getting and setting properties. No exceptions here. You can basically do those adds and removes with your eyes shut):

The business of file uploading and downloading

At work, everyday there are some people need to send some files to some people, they do not want to use email, rather, they want to upload then their clients download, with password protection, with email notification.

All right, a small application to serve the purpose:

File Upload (allow multiple files)

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>

<script runat="server">

    void UploadMultipleFiles_Clicked(object Sender, EventArgs e)
    {
    //Variable to hold the result
    string m_strResultMessage ="";
    //Variable to hold the FileName
    string m_strFileName;
    //Variable FolderName where the files will be saved
    string m_strFolderName = "D:\\webs\\TempMultipleFiles\\";
    //Variable to hold the File
    HttpPostedFile m_objFile;
    //Variable used in the Loop
    int i;
   
    try {
        //Loop Through the Files
        for (i = 0; i <= Request.Files.Count - 1; i++) {
           
            //Get the HttpPostedFile
            m_objFile = Request.Files;
            //Check that the File exists has a name and is not empty
            if (!(m_objFile == null | m_objFile.FileName == "" | m_objFile.ContentLength < 1)) {
               
                //Get the name of the file
                m_strFileName = m_objFile.FileName;
                m_strFileName = System.IO.Path.GetFileName(m_strFileName);
               
                //Creates the folder if it does not exists
                if ((!System.IO.Directory.Exists(m_strFolderName)))
                {
                    System.IO.Directory.CreateDirectory(m_strFolderName);
                }
               
                //Save each uploaded file
                m_objFile.SaveAs(m_strFolderName + m_strFileName);
               
                //Assign the File Name and File Type to Result
                m_strResultMessage = m_strResultMessage + "Uploaded File: " + m_objFile.FileName + " of type " + m_objFile.ContentType + " <br> ";
               
                //Hide the Multiple Form Upload Panel
                MultipleFileUploadForm.Visible = false;
            }
        }
       
        //If no files where selected provide a user friendly message
        if (m_strResultMessage == "") {
            m_strResultMessage = "Select atleast one file to upload.";
        }
    }
   
    catch (Exception errorVariable) {
        //Trap the exception
        m_strResultMessage = errorVariable.ToString();
    }
   
    //Unhide the Result Label
    ResultMsg.Visible = true;
    //Assign the Result to ResultMsg Label Text
    ResultMsg.Text = m_strResultMessage;
}

</script>

</head>
<body>
   
    <ASP:PANEL id="MultipleFileUploadForm"     runat="server"  visible="true">
   <FORM id="Form2" method="post" encType="multipart/form-data" runat="server">
    <H1>        Select the Files to Upload to the Server:
        </H1>
<P>
        <BR>
        <INPUT id="File1" type="file" name="File1" runat="server">
     </P>
     <P>
    <INPUT id="File2"  type="file" name="File2" runat="server"></P>
        <P>
    </P>
        <P>
        <INPUT id="File3" type="file" name="File1" runat="server">
     </P>
        <P>
                <INPUT id="File4" type="file" name="File1" runat="server">
     </P>
        <P>
        <INPUT id="File5" type="file" name="File1" runat="server">
     </P>
       <INPUT id="Submit1" type="submit" value="Upload Files" name="Submit1" runat="server" OnServerClick="UploadMultipleFiles_Clicked">

   </FORM>
</ASP:PANEL>

<ASP:LABEL id="ResultMsg" runat="server" Visible="False" ForeColor="#ff0033"></ASP:LABEL>

</body>
</html>

File Download

<%@ Page Language="C#" %>
<%@ Import Namespace="System.IO" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    public void Page_Load(object sender, EventArgs e)
    {

        string root = @"D:\webs\TempMultipleFiles\";
        string filename = Request.Params["file"];
      

        
        if ((filename != null))
        {
            string filepath = root + filename;
           
            if (File.Exists(filepath))
            {
                //
                Response.Clear();
                Response.ContentType = "application/octet-stream";
                Response.AddHeader("Content-Disposition", "attachment; filename=\"" + filename + "\"");
                Response.Flush();
                Response.WriteFile(filepath);
            }
            else
            {
                Response.Write("not ex");
            }
        }

    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title> file download</title>
</head>
<body>
</body>
</html>

REST web service - implementation

On the web there has been a lot of talk about REST (Representational State Transfer) web service. However, it is all on the representational side, its format (mostly, XML output),  its usage (use GET, POST), its popularity (very popular, surpassing SOAP because of its simplicity and intutiveness), its champion providers (a lot, including all major internet players, Yahoo, Amazon ... not Google though, google mostly stick to web service) and sample web service (again, all Yahoo service apis are restful service).

 ws03.search.re2.yahoo.com compressed/chunked Sun Jul 13 07:12:16 PDT 2008 

1. The key to creating Web Services in a REST network (i.e., the Web) is to identify all of the conceptual entities that you wish to expose as services.
2. Create a URL to each resource. The resources should be nouns, not verbs. For example, do not use this

http://www.parts-depot.com/parts/getPart?id=00345

Note the verb, getPart. Instead, use a noun:

http://www.parts-depot.com/parts/00345

3. Categorize your resources according to whether clients can just receive a representation of the resource, or whether clients can modify (add to) the resource. For the former, make those resources accessible using an HTTP GET. For the later, make those resources accessible using HTTP POST, PUT, and/or DELETE.

4. All resources accessible via HTTP GET should be side-effect free. That is, the resource should just return a representation of the resource. Invoking the resource should not result in modifying the resource.

5. No man/woman is an island. Likewise, no representation should be an island. In other words, put hyperlinks within resource representations to enable clients to drill down for more information, and/or to obtain related information

6. Design to reveal data gradually. Don't reveal everything in a single response document. Provide hyperlinks to obtain more details.

7. Specify the format of response data using a schema (DTD, W3C Schema, RelaxNG, or Schematron).
For those services that require a POST or PUT to it, also provide a schema to specify the format of the response.

8. Describe how your services are to be invoked using either a WSDL document, or simply an HTML document.