ASP.NET MVC Series: Article 1

Hello all lovely people out there, it's been quite a while since my first post.

Currently I'm learning ASP.NET MVC, and thought that it would be great to pen down my learning and experiences in a series of articles.

Well let's start with a brief introduction of MVC.

• MVC is a generic concept, in fact it's an architectural pattern.
• It was originally named as Thing-Model-View-Editor way back in 1979, later it was renamed to MVC.
• It's a powerful means of separating concerns within an application and it applies quite beautifully to Web Applications.
• Its explicit separation of concerns does add a little bit complexity to the application's design (the project structure looks huge with a lot of folders and stuffs), but the benefit which MVC offers outdoes this complexity concern.

So, the next BIG QUESTION, what exactly is MVC.

Well, MVC stands for Model-View-Controller. It's an architectural patterns used to separate an application into 3 main aspects.

1. MODEL: Set of classes that describe the data which we want to work with, as well as the Business Rules related to that data.
2. VIEW: User Interface (UI), the stuff visible to the user.
3. CONTROLLER: Set of classes that handles communications from the user, directs Models to give back a specific set of data, and controls the overall application. Acts as a 'Relationship Manager'.

HISTORY OF MVC:

• In around 1973, a Norwegian professor, namely Dr. Reenskaug at an institute in Oslo was sitting at a shipyard and was ship spotting to design a better information system.
• He started to formulate an approach to systems design based upon modularity and separation of processes. He wrote a paper on it.
• Later in around 1978-79, he refined his Shipyard ideas and wrote the concepts of MVC.
• Since then, MVC has evolved as one of the most popular architectures in Computer Science.

PRESENCE OF MVC TODAY:

• MVC is used in dozens of frameworks today, on almost all the platforms, be it Windows, MAC, LINUX.
• Ruby on Rails (RoR) uses MVC.
• Django is a framework created using Python as the language and MVC as the architecture.
• In JAVA space, we have Springs and Struts which are based upon MVC.
• Microsoft is a late comer in the MVC domain and they thought why not mingle MVC, and thus came up ASP.NET MVC.
• It's not to be confused with MVC, MVC is an architectural pattern, while ASP.NET MVC is the programming model developed by MS using MVC as the architecture.
• In Feb 2007, Scott Guthrie wrote few lines of code while flying out to a conference, which became ASP.NET MVC after some time.

DILEMMA:

• A common dilemma which exists today:      'Are Web Forms Dead?'.
• No its not, ASP.NET MVC is just another model, and it has not come to replace the traditional ASP.NET Web Forms, but yes it does provide some advantages over the Web Forms.
• However, even today, at many places Web Forms are used.
• Both ASP.NET Web Forms and ASP.NET MVC sit on top of the core ASP.NET Framework. So we shouldn't think that ASP.NET MVC is the replacement of ASP.NET Web Forms.

DIFFERENCES:

• There are significant differences between ASP.NET Web Forms and ASP.NET MVC, but the most important one which comes to my mind is that ASP.NET MVC doesn't work on the event driven methodology which ASP.NET Web Forms work upon.
• ASP.NET MVC works on a more granular level.
• There are no server side controls in ASP.NET MVC, everything is pure HTML, hence there is no over-head required to convert the server side controls to HTML controls (the browser only understands HTML), hence leading to a greater performance.
• ASP.NET Web Forms look out for a physical file on the disk where they are deployed, whereas ASP.NET MVC looks out for functions, Controller Action Methods to be more precise. And MVC does it via Routing (A very big concept in MVC domain).

This is all for the intro article, stay tuned for the next one.

Transfer items from one list box to another using JavaScript

Hi,
This is gonna be my first blog entry.
Am currently working with some list box stuffs. A little of which encompasses transfer of items from one list box to another using JavaScript. Let's start.
Below is the PopUp.aspx page:

<form id="form1" runat="server">
<table style="border:2px dashed Black">
    <tr>
    <td>
    <asp:ListBox ID="listAvailableColumns" runat="server"></asp:ListBox>
    </td>
    <td>
        <input id="btnLeft" type="button" value="Right" onclick="MoveLeftRight('listAvailableColumns','listSelectedColumns');"/>
        <br />
        <input id="btnRight" type="button" value="Left" onclick="MoveLeftRight('listSelectedColumns','listAvailableColumns');"/>
    </td>
    <td>
        <asp:ListBox ID="listSelectedColumns" runat="server"></asp:ListBox>
    </td>
    <td>
    <input id="btnUp" type="button" value="Up" onclick="MoveUp('listSelectedColumns');"/>
    <br />
    <input id="btnDown" type="button" value="Down" onclick="MoveDown('listSelectedColumns');"/>
    </td>
    </tr>
</table>
</form>

Below is the screenshot of what exactly the above form looks like, haven't styled it much, looks kinda plain..:)

Its basically 2 list boxes and 4 HTML buttons.
Buttons named as 'Left' and 'Right' will help us to transfer items to/from both the list boxes, while buttons named as 'Up' and 'Down' will assist us in scrolling the items of one of the list boxes.

The JavaScript function, called on onclick of buttons 'Left' and 'Right' is as follows:

function MoveLeftRight(ListBox1, ListBox2) {
            var listAvailable = document.getElementById(ListBox1);
            var listSelected = document.getElementById(ListBox2);
            if(listAvailable!=null && listSelected!=null) {
            if(listAvailable.length<0)
            {
            alert('There are no items');
            return false;
            }
            if(listAvailable.options.selectedIndex==-1)
            {
            alert('Please select an item to move');
            }
            if(listAvailable.options.selectedIndex>=0)
            {
            var toBeOption=new Option();
            toBeOption.text = listAvailable.options[listAvailable.options.selectedIndex].text;
            toBeOption.value = listAvailable.options[listAvailable.options.selectedIndex].value;
            listSelected.options[listSelected.length] = toBeOption;
            listAvailable.remove(listAvailable.options.selectedIndex);
            }
            }
            } 

Now, let me explain the above code:
It takes into account 2 parameters, which are the 2 list boxes.
When button 'Right' is clicked(it will transfer items from listAvailableColumns list box to listSelectedColumns list box), the function will be as MoveLeftRight(listAvailableColumns,listSelectedColumns) when debugged.
The function checks for empty list box, throws an alert accordingly. Also, it checks whether any item has been clicked to move.
Further, it appends a new list item (the item which is selected in the first list box) to the listSelectedColumns list box and removes that very item from the first list box.
Same code runs for transfer of items from listSelectedColumns list box to listAvailableColumns list box, the only difference being the arousal of the function as MoveLeftRight(listSelectedColumns, listAvailableColumns).

Below is the code for vertical scroll of the list box namely, listSelectedColumns:

function MoveUp(listBox) {
                var listBoxID = document.getElementById(listBox);
                var index = listBoxID.selectedIndex;
                if (index == -1) {
                    alert('Please select an item to move up');
                    return;
                }
                if (index == 0) {
                    alert('Please select another item to move up or click Down button');
                    return;
                }
                if (index > 0) {
                    var newOptionText = listBoxID.options[index].text;
                    var newOptionValue = listBoxID.options[index].value;

                    listBoxID.options[index].text = listBoxID.options[index-1].text;
                    listBoxID.options[index].value = listBoxID.options[index-1].value;

                    listBoxID.options[index-1].text = newOptionText;
                    listBoxID.options[index - 1].value = newOptionValue;

                    listBoxID.selectedIndex = index - 1;
                }
                }

function MoveDown(listBox) {
                    var listBoxID = document.getElementById(listBox);
                    var index = listBoxID.selectedIndex;
                    if (index == -1) {
                        alert('Please select an item to move down');
                        return;
                        }

                        if (index == listBoxID.length - 1) {
                            alert('Please select other item to move down or click Up button');
                        }
                        else
                        {
                            var newOptionText= listBoxID.options[index].text;
                            var newOptionValue= listBoxID.options[index].value;

                            listBoxID.options[index].text = listBoxID.options[index + 1].text;
                            listBoxID.options[index].value = listBoxID.options[index + 1].value;

                            listBoxID.options[index + 1].text = newOptionText;
                            listBoxID.options[index + 1].value = newOptionValue;

                            listBoxID.selectedIndex = index + 1;
                        }
                    }

MoveUp(listBox) is the function set on onclick of the button namely 'Up', while 'Down' button invokes the function 'MoveDown(listBox)'.
Both the functions are quite simple, they store the text/value pair of the current list item in variables newOptionText/newOptionValue respectively. Then the current index texts/values are interchanged with the up/down indexes elements. The code is actually self-explanatory.