Making EC2 Tools environment:

1. Download and the command line tools from http://developer.amazonwebservices.com/connect/entry.jspa?externalID=351&categoryID=88 and extract at some place like: C:\ec2-api-tools-1.3-41620
2. Login into your amazon EC2 account. Goto:
   Your Account -> Security Credentials -> x.509 Certificates
   make one and download to some place like C:\ec2
3. Make sure that you have latest version of JRE installed on your local machine. Now use the following commands to set environment variables, (CHANGE THE PATHS TO YOUR PATHS):
   set JAVA_HOME="C:\Program Files\Java\jdk1.6.0_11"
set EC2_HOME=C:\ec2-api-tools-1.3-41620
set PATH=%PATH%;%EC2_HOME%\bin
set EC2_PRIVATE_KEY=c:\ec2\pk-HKZYKTAIG2ECMXYIBH3HXV4ZBZQ55CLO.pem
set EC2_CERT=c:\ec2\cert-HKZYKTAIG2ECMXYIBH3HXV4ZBZQ55CLO.pem

Now we have our local machine ready to use EC2 commands.

Running and connecting to the instance

1. Get a list of available amazon AMIs using this command
   ec2-describe-images -o self -o amazon | grep fedora 
   We have applied the fedora filter as we want to use it. There is an apache-mysql fedora core4 AMI available as ec2-public-images/fedora-core4-apache-mysql.manifest.xml. We will be using this AMI. Note down its id, which is in this case: ami-25b6534c
2. Now we will be downloading our private RSA key to be used with this AMI. Run the following command in command prompt:
   ec2-add-keypair gsg-keypair
and save everything between these lines including these lines as “id_rsa-gsg-keypair”:
   “—–BEGIN RSA PRIVATE KEY—–”
   “—–END RSA PRIVATE KEY—–”   
   We want to use putty to communicate with this AMI. Our private key needs to be converted into putty format. Download puttygen.exe from http://the.earth.li/~sgtatham/putty/latest/x86/puttygen.exe open puttygen.exe, load id_rsa-gsg-keypair and save private key
3. Run the public AMI instance using this command:
   ec2-run-instances ami-25b6534c -k gsg-keypair
NOTE DOWN THE ID OF THE INSTANCE 
4. You can use this command to check the status of you instance. Note down the server address of the instance:
   ec2-describe-instances i-548****
(Replace i-548**** with you instance id)
5. Now we need to open port 22 (for ssh) and port 80 (for http) on this instance. Run the following commands in command prompt.
   ec2-authorize default -p 22
ec2-authorize default -p 80
6. Enter the server address noted down in step 4 to your browser. You should see a default Fedora Core 4 Apache welcome page.
7. Open putty; goto
   Connection -> SSH -> Auth
   browse for your private key you made using puttygen.                            

   Enter the sever address from step 4 to connect and use the username ‘root’ to login. 

8. Once successfully connected, you can use this instance like any other Linux server.

Configuring Server, Apache and mode_python

1. Yum is already installed on this instance but it needs to be configured. Open the file /etc/yum.repos.d/fedora.repo and uncomment the baseurl line. Also change the url to http://archives.fedoraproject.org/pub/archive/fedora/linux/*****
   Do the same with 
   /etc/yum.repos.d/fedora-updates.repo and
   /etc/yum.repos.d/fedora-extras.repo
2. Update the list:
   yum check-update
3. Use following  commands to install some packages using yum:
   yum install gcc
yum install httpd-devel
yum install python-devel
4. Now install mod_python using following commands:
   cd /tmp
   wget http://download.filehat.com/apache/httpd/modpython/mod_python-3.3.1.tgz
   tar xvfz mod_python-3.3.1.tgz
   cd mod_python-3.3.1
   ./configure
   make
   make install
5. mod_python is installed. Now we just need to add following lines to /etc/httpd/conf/httpd.conf to make it load with apache.
   LoadModule python_module modules/mod_python.so
PythonOption mod_python.mutex_directory "/tmp"
PythonOption mod_python.mutex_locks 8

Saving the EC2 instance on S3

You will loose all settings and configurations as you will terminate the instance. We need to save instance as our own AMI at this stage.

1. Download PSCP from http://the.earth.li/~sgtatham/putty/latest/x86/pscp.exe and run the following command in command prompt to transfer our X.509 certificate to the server for future use.pscp -i id_rsa-gsg-keypair pk-ZG273YPOU74KIXM3UGTDFAIWOARHSSVE.pem cert-ZG273YPOU74KIXM3UGTDFAIWOARHSSVE.pem root@ec2-67-***-***-***.compute-1.amazonaws.com:/mnt (Replace Server name and .pem file names/paths with your files.)
2.  Now we need to download AMI-Tools for backup of our instance. Go back to putty, log into the server as described before and run the following set of commands.
   cd /tmp
wget http://developer.amazonwebservices.com/connect/entry.jspa?externalID=368&categoryID=88
unzip ec2-ami-tools-1.3-34544.zip
cp -r ec2-ami-tools-1.3-34544/ /usr/local/
export EC2_AMITOOL_HOME=/usr/local/ec2-ami-tools-1.3-34544/
export PATH=$PATH:${EC2_AMITOOL_HOME:-EC2_HOME}/bin
ec2-bundle-vol -d /mnt -k /mnt/pk-ZG273YPOU74KIXM3UGTDFAIWOARHSSVE.pem -c /mnt/cert-ZG273YPOU74KIXM3UGTDFAIWOARHSSVE.pem -u YOUR_AWS_ACCOUNT_ID -r i386 -p mod_python
(Replace YOUR_AWS_ACCOUNT_ID with your account ID) 
3. This will take some time and will create image files in /mnt. Now we will upload these image files to S3 using this command
   ec2-upload-bundle -b -m /mnt/image.manifest.xml -a -s
    
   It will take some time.
4. Now we need to register our image so that AWS can locate it.
   ec2-register /image.manifest.xml 
   You will get you AMI id, safe it for future use. 
5. Now you can safely terminate your instance.

Installing django

1. Use the following commands to install django:
   cd /usr/local
svn co http://code.djangoproject.com/svn/django/trunk/ django-trunk
ln -s `pwd`/django-trunk/django /usr/lib/python2.4/site-packages/django
ln -s /usr/local/django-trunk/django/bin/django-admin.py /usr/local/bin
2. Edit the httpd.conf at /etc/httpd/conf/httpd.conf and add following lines:
   <Location “/mysite/”>
   SetHandler python-program
   PythonHandler django.core.handlers.modpython
   SetEnv DJANGO_SETTINGS_MODULE mysite.settings
   PythonOption django.root /mysite
   PythonDebug On
   PythonPath “['/path/to/project'] + sys.path”
   </Location>
    
3. Restart the apache and you are ready to go

If you recieve this error ‘Argument “xxxx” for option “xxxx” is not valid’ while running an SSIS/DTS Package through a job as a job step the you have come to the right place.

SYMPTOMS: The package when executes individually runs successfully. But when executing the package through sql server job it crashes with error in the job history.

SOLUTION: The solution is simple there is a problem with your command line option for the job step. Modify it to get the package running.

EXAMPLE: Until now you may be unclear that what i am talking about. Let me illustrate with an example. I created an SSIS package which executes successfully without a job. But when i make it a part of job it crashes with the above mentioned error.

The auto-generated command line when i select the data sources was

/SQL “\DVA_PNC_DTS” /SERVER “SERVER01″ /CONNECTION “Database Connection ADO”;”\”Data Source=SERVER03;User ID=User;Initial Catalog=”"DB1″”;Persist Security Info=True;” /CONNECTION “Database Connenction”;”\”Data Source=SERVER04;User ID=User;Initial Catalog=DB2;Provider=SQLNCLI.1;Persist Security Info=True;Auto Translate=False;” /CONNECTION “Input Connection”;”C:\Schema.csv” /CONNECTION Output;”C:\Output.txt” /MAXCONCURRENT ” -1 ” /CHECKPOINTING OFF

I manually edit the command line and remove some extra quotes and backslashes and it started working perfectly It looks like this:

/SQL “\DVA_PNC_DTS” /SERVER SERVER01  /CONNECTION “Database Connection ADO”;”Data Source=SERVER03;User ID=User;Initial Catalog=DB1;Persist Security Info=True;” /CONNECTION “Database Connenction”;”Data Source=SERVER04;User ID=User;Initial Catalog=DB2;Provider=SQLNCLI.1;Persist Security Info=True;Auto Translate=False;” /CONNECTION “Input Connection”;”C:\Schema.csv” /CONNECTION Output;”C:\Output.txt” /MAXCONCURRENT ” -1 ” /CHECKPOINTING OFF /REPORTING E

Hope this may help anyone.

Whats is a Design Pattern?

Design Pattern can be treated as tools used to solve a particular type of problem (mostly a recurring problem over the years). it also proves as a handy shared vocabulary which developers can use while discussing a particular problem at hand.

“Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice” - Christopher Alexander

Why use a Design Pattern?

They are well tested and refined solutions discovered by software engineers over the years and knowing them can help us disintegrate problems very quickly and efficiently. like for example if we have a scenario where we are required to notify a certain number of class/clients whenever there is  an event or change in data of a class, we use Observer Pattern.

Types of Design Patterns

Design Patterns can be classified into three broad categories.

• Creational - what should be the process of object creation in a particular design problem.
• Structural - what should be the structure of classes/objects, helps you design your class compositions while addressing a particular design problem.
• Behavioral - how classes should communicate/interact with each other in order to make a design model work.

I will provide a matrix below which will mention the defination/description,advantages and disadvantages of  some of the most commonly used design patterns.

Advantages and Disadvantages of Design Patterns can be debatable from case to case scenarios, a basic rule for a good designer is to analyze the whole problem at hand and draw concrete conclusions on whether a design pattern should be applied or not. Over use of  design patterns might result in a significant performance hit, therefore determine tradeoffs wisely.

Cheers.

Dont forget to leave Comments/Feedback.

In our previous examples we had been using plain Strings in ExtJs grid.
Have a quick look at them:

• On-Demand Paging using ExtJS Grid with Client-Centric ASP.NET AJAX (WebMethods)
• Adding server side sorting to ExtJS Grid using WebMethods in ASP.NET

Today, we are going to deal with other Data types like DateTime, Boolean, Currency et cetera. For this purpose, ExtJs ColumnModel provides and excellent config option renderer

Lets start with builtin format options of ExtJs.

// create the grid
        var grid = new Ext.grid.EditorGridPanel({
            el:'grid-employees',
            width:650,
            height:300,
            title:'Sample Employees',
            store: store,
            stripeRows: true,
            loadMask: true,
            enableHdMenu: false,

            // grid columns
            columns:[{
                id: 'EmployeeID',
                dataIndex: 'EmployeeID',
                hidden:true
            },{
                header: "Login ID",
                dataIndex: 'LoginID',
                width: 150,
                sortable:true

            },{
                header: "Title",
                dataIndex: 'Title',
                width: 200,
                sortable:true
            },{
                header: "Birth Date",
                dataIndex: 'BirthDate',
                width: 100,
                sortable:true
            },{
                header: "Gender",
                dataIndex: 'Gender',
                width: 70,
                sortable:true
            },{
                header: "Salary",
                dataIndex: 'Salary',
                width: 70,
                renderer: 'usMoney',
                sortable:true
            },{
                header: "Salaried",
                dataIndex: 'SalariedFlag',
                width: 50,
                sortable:true
            }],
            // put paging bar on the bottom
            bbar: pagingBar
        });

Notice that for the dataIndex Salary, we have renderer option equal to usMony. This will render all values in this column as usMoney.

Now lets play with some custom renderers. I have written two custom rederers. One is for DateTime object of .NET and the other is for Boolean object.

        // Our own date renderer function
        function formatDate(value){
            return value ? value.dateFormat('F d, Y') : '';
        };

        // Our own boolean renderer
        function formatTrueFalse(value) {
            return value ? '✓': '☓';
        }

These functions are quite simple. They just return the formatted strings to be used in ColumnModel. Now we will use these renderers in our ColumnModel.

        // create the grid
        var grid = new Ext.grid.EditorGridPanel({
            el:'grid-employees',
            width:650,
            height:300,
            title:'Sample Employees',
            store: store,
            stripeRows: true,
            loadMask: true,
            enableHdMenu: false,

            // grid columns
            columns:[{
        	    id: 'EmployeeID',
                dataIndex: 'EmployeeID',
                hidden:true
            },{
                header: "Login ID",
                dataIndex: 'LoginID',
                width: 150,
                sortable:true

            },{
                header: "Title",
                dataIndex: 'Title',
                width: 200,
                sortable:true
            },{
                header: "Birth Date",
                dataIndex: 'BirthDate',
                width: 100,
                renderer: formatDate,
                sortable:true
            },{
                header: "Gender",
                dataIndex: 'Gender',
                width: 70,
                sortable:true
            },{
                header: "Salary",
                dataIndex: 'Salary',
                width: 70,
                renderer: 'usMoney',
                sortable:true
            },{
                header: "Salaried",
                dataIndex: 'SalariedFlag',
                width: 50,
                renderer: formatTrueFalse,
                sortable:true
            }],
            // put paging bar on the bottom
            bbar: pagingBar
        });

And that’s all

Now you will have a beautifully rendered grid.

You can also add images in grid in this way. Try replacing Gender in this example with appropriate icons. I leave this as an exercise for you.

Download the example code

Few days ago I had a task that on user registration I had to check the email address of the user. When the user enters the email address the application should check the database that if the email exists in the database user will not be able to add it again and the whole task should be done in a way that user enters the email in a textbox and then starts filling the other form and system in the meanwhile automatically checks the existence of email in the database. I used Jquery for this task, the selection of jquery can be debatable but its not the issue at hand. I made a web service which communicates with my database. In the web service I have a method  named CheckEmail which checks the existence of email in the particular table. The web service looks like this:

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Data.OleDb

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Service
Inherits System.Web.Services.WebService

<WebMethod()> _
Public Function CheckEmail(ByVal email As String) As String
Dim connectionString As String = ConfigurationManager.ConnectionStrings("ConnectionStringManual").ToString()
Dim connection As OleDbConnection = New OleDbConnection(connectionString)
connection.Open()
Dim sqlString As String = "Select count(*) from Customers where CustomerEmail =?"
Dim command As OleDbCommand = New OleDbCommand(sqlString, connection)
command.Parameters.AddWithValue("CustomerEmail", email)
Return command.ExecuteScalar()

End Function
End Class

This web service returns an integer based on the count of rows after running the query.

I have an aspx page which looks like the code below:

<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" ></asp:TextBox><span id="spErrorMessage"></span><br />
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox><br />
</td>
</tr>

</table>
</div>

</form>
</body>

And finally the last but the most important section of  Jquery in the head section of the page.

<head runat="server">
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">

$(function()
{
$("#<%= txtEmail.ClientID %>").change(DuplicateEmailCheck);
}
);

function DuplicateEmailCheck()
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{email: '" + $('#<%= txtEmail.ClientID %>').val() + "'}",
dataType: "json",
url: "http://localhost:1561/TestWebService/Service.asmx/CheckEmail",
success: function(response)
{
$("#spErrorMessage").empty();
if (response.d != "0")
{
$("#spErrorMessage").html('Email address already exists.');
}
}
});

}
</script>

The first script section contains the reference to the latest jquery library till date. You can download it from internet very easily. The second script section does the real magic but its very easy. The first function just hooks the txtEmail textbox with the DuplicateEmailCheck function. The DuplicateEmailCheck function makes an ajax call to the web service which we created above. Now based on the result the span belonging to the textbox will be populated if email already exists.

Thats all folks, don’t forget to leave feedback/suggestions.

Cheers.

We will continue with the example in previous post:

On-Demand Paging using ExtJS Grid with Client-Centric ASP.NET AJAX (WebMethods)

First of all we will add config option sortable:true to all columns we want to be sortable

So, the grid code will look like this:

        // create the grid
        var grid = new Ext.grid.GridPanel({
            el:'grid-products',
            width:405,
            height:300,
            title:'Adventure Works Products',
            store: store,
            stripeRows: true,
            loadMask: true,
            enableHdMenu: false,

            // grid columns
            columns:[{
        	    header: "id",
        	    id: 'ProductID',
                dataIndex: 'ProductID',
                hidden:true
            },{
                header: "Product Name",
                dataIndex: 'Name',
                width: 200,
                sortable:true
            },{
                header: "Product Number",
                dataIndex: 'ProductNumber',
                width: 100,
                sortable:true
            },{
                header: "Safety Stock Level",
                dataIndex: 'SafetyStockLevel',
                width: 100
            }],
            // put paging bar on the bottom
            bbar: pagingBar
        });

Now, you can sort the grid on client side. But this is sorting within a page only. We want to sort the grid for all products which can be achieved by server side sorting only.

Lets make it request the server for sorting. We have to add remoteSort:true to our JsonStore. So the JsonStore code will look like this:

// create the Data Store
        var store = new Ext.data.JsonStore({
            root: 'lstProducts',
            totalProperty: 'RowCount',
            idProperty: 'ProductID',
		    fields: [
                'Name','ProductID', 'ProductNumber', 'ReorderPoint','SafetyStockLevel'
            ],
            remoteSort:true,
            proxy:pmProxy
        });

Now, all of sorting information will go with params to PageMethodProxy as:

• sort having the id of the column
• dir for direction of sorting (it can have values ASC or DESC)

We have to change the PageMethodProxy a little bit to forward this sorting information to WebMethod. After this our PageMethodProxy code will look like this:

Ext.data.PageMethodProxy = function(config){
	Ext.data.PageMethodProxy.superclass.constructor.call(this);
	Ext.apply(this, config);
};

Ext.data.PageMethodProxy.TRANS_ID = 1000;
Ext.data.PageMethodProxy.arr_trans = Array();

Ext.extend(Ext.data.PageMethodProxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg) {
        if(this.fireEvent("beforeload", this, params) !== false){
            var p = Ext.apply(params, this.extraParams);
            var transId = ++Ext.data.PageMethodProxy.TRANS_ID;
            var trans = {
                id : transId,
                params : params,
                arg : arg,
                callback : callback,
                scope : scope,
                reader : reader
            };
            if(typeof p.sort == "undefined")
                p.sort = "";
            if(typeof p.dir == "undefined")
                p.dir = "";

            eval("PageMethods." + this.pageMethod + "(p.start,p.limit,p.sort,p.dir,this.handleResponse)");

            Ext.data.PageMethodProxy.arr_trans[Ext.data.PageMethodProxy.TRANS_ID] = trans;
        }
        else{
            callback.call(scope||this, null, arg, false);
        }

    },	

    isLoading : function(){
        return this.trans ? true : false;
    },

    abort : function(){
        if(this.isLoading()){
            this.destroyTrans(this.trans);
        }
    },

    handleResponse : function(o){
        var trans = Ext.data.PageMethodProxy.arr_trans[Ext.data.PageMethodProxy.TRANS_ID];
        var result;
        try {
            result = trans.reader.readRecords(o);
        }catch(e){
            this.fireEvent("loadexception", this, o, trans.arg, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        this.trans = false;
        trans.callback.call(trans.scope||window, result, trans.arg, true);
    }
});

Notice that we have added check for undefined sorting parameters. This is the case when no sorting is applied. We have to handle this on client side.

Now finally add the sorting code to the WebMethod which will handle the sorting parameters. The Web Method code will look like this now

    [System.Web.Services.WebMethod]
    public static ProductList GetProducts(int PageNumber,int MaximumRows,string SortColumnName, string SortDirection)
    {
        //calculating the start row index
        int Start = PageNumber + 1;
        //calculating the end row index
        int End = PageNumber + MaximumRows;

        ProductList productList = new ProductList();
        //setting up sql connection to execute the query
        SqlConnection sqlConnection = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
        sqlConnection.Open();
        //setting up the command object with a parameterized query and sql connection
        using (SqlCommand command = new SqlCommand(GetQuery(SortColumnName,SortDirection), sqlConnection))
        {
            //Creating Sql Start Paramter
            SqlParameter StartParameter = new SqlParameter();
            StartParameter.DbType = DbType.Int32;
            StartParameter.ParameterName = "startRowIndex";
            StartParameter.Value = Start;
            //Creating Sql End Parameter
            SqlParameter EndParameter = new SqlParameter();
            EndParameter.DbType = DbType.Int32;
            EndParameter.ParameterName = "endRowIndex";
            EndParameter.Value = End;
            //Adding Start Parameter to the command object
            command.Parameters.Add(StartParameter);
            //Adding End Parameter to the command object
            command.Parameters.Add(EndParameter);
            //Executing Reader
            using (IDataReader reader = command.ExecuteReader())
            {
                //Creating a list of objects from the fetched rows
                while (reader.Read())
                {
                    productList.lstProducts.Add(ConstructProduct(reader));
                }
            }
        }
        //closing the connection
        sqlConnection.Close();
        //Assigning total row count for the given query so that it can
        //be used by the grid to set up total number of pages
        productList.RowCount = GetRowCount();
        return productList;
    }

    private static String GetQuery(String ColumnName,String SortDirection)
    {

        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.Append(" SELECT * FROM ( ");
        if(!ColumnName.Trim().Equals(String.Empty) && !SortDirection.Trim().Equals(String.Empty))
            stringBuilder.Append(" SELECT	ROW_NUMBER() OVER (ORDER BY "+ColumnName.Trim().ToUpper()+" "+ SortDirection.Trim().ToUpper()+") AS row_num,ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
        else
            stringBuilder.Append(" SELECT	ROW_NUMBER() OVER (ORDER BY (SELECT 0)) AS row_num,ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
        stringBuilder.Append(" FROM	Product ");
        stringBuilder.Append(" ) AS TempTable WHERE row_num>=@startRowIndex AND row_num<=@endRowIndex ");
        return stringBuilder.ToString();
    }

And thats all. We have successfully added Server side sorting to our existing code. This will work with paging too.

You can download the complete project here:.toString() - ExtJS Serverside Grid Sorting

In this Part we are working with some of the Standard Controls in Details.

Standard Controls

Standard controls contain controls which help the developers to perform useful operations for example displaying information, taking user input in a textbox, displaying a drop down box, ListBox and many more. we will take look at some of them in detail.

Label Control

label control is used when you need to dynamically display/change data on the webpage. we already saw a sample code in the last part (part 03) which changed text of the label dynamically on button’s click and TextBox’s TextChanged Event. There are plenty of Properties with which we play around with.

ASP.NET Standard Controls - Label - Property Panel

following are some of the most used properties witha  brief description

• BackColor – sets the color of the background of the label control
• BorderColor – sets the color of the border of the label control
• BorderStyle – lets you set the style of the border e.g. NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, and Outset.
• BorderWidth – lets you set the width of the border
• CssClass -lets you set CSS class for label.
• Font – lets you configure various font properties e.g Bold, Italic, Name, Names, Overline, Size, Strikeout, Underline
• ForeColor – lets you set the color of the content of the label.
• ToolTip – lets you set the tool tip for the label control.
• Style – lets you set inline style attribute for the label control.

now lets have a look at a sample which illustrates the use of these properties.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>[.toString()] Standard Controls - http://dottostring.com</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1"
            runat="server"
            Text="label text goes here"
            BackColor="#FF9966"
            BorderColor="Black"
            BorderStyle="Double"
            BorderWidth="2px"
            Font-Bold="True"
            Font-Italic="True">
            </asp:Label>
    </div>
    </form>
</body>
</html>

• Run (F5) your website and this is what you will get:

ASP.NET Standard Controls - Label - Properties Demonstration

Labels are frequently used as the labels next to textbox fields in order to identify the information to be entered in those fields.  In order to associate a Label to a TextBox, Label has a property AssociatedControlID, setting this property doesn’t change anything as far as the display is concerned however when the label is clicked by the user it automatically takes the focus to the associated control.

Here is another sample which illustrates the use of AssociatedControlID and CssClass attributes.

<%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>[.toString()] Standard Controls - http://www.dottostring.com</title>
    <style type="text/css">
        .LabelStyle {
            font-family: "Trebuchet MS";
            font-size: medium;
            font-weight: bold;
            color: #800000;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div >
        <asp:Label ID="Label1"
            runat="server"
            Text="label text goes here"
            BackColor="#FF9966"
            BorderColor="Black"
            BorderStyle="Double"
            BorderWidth="2px"
            Font-Bold="True"
            Font-Italic="True">
            </asp:Label>
        <br />
        <br />
        <asp:Label
            ID="lblProductName"
            runat="server"
            AssociatedControlID="txtProductName"
            Text="Product Name"
            CssClass="LabelStyle">
            </asp:Label>
        <br />
        <asp:TextBox
            ID="txtProductName"
            runat="server">
            </asp:TextBox>
        <br />
        <asp:Label
            ID="lblProductCode"
            runat="server"
            AssociatedControlID="txtProductCode"
            Text="Product Code"
            CssClass="LabelStyle">
            </asp:Label>
        <br />
        <asp:TextBox
            ID="txtProductCode"
            runat="server">
            </asp:TextBox>
    </div>
    </form>
</body>
</html>

• Run(F5) the website and see the results.

ASP.NET Standard Controls - Label - Properties Demonstration II

Literal Control

Literal Control is almost the same as the Label Control except for the fact that Literal Control does not render its content inside the Span Tag, you can use it to display text or HTML content. it simply outputs contents assigned to it. Like for example lets say we need to dynamically update the title of the page, this can be done either by  placing a runat=”server”  and  ID attributes to the Title Tag and then modify it from the server side or we can simply place a Literal Control in the Title Tag and then assign the desired title text to the literal control from the server.

Literal Control possess a useful property called Mode, which can be set to one of the following properties.

• PassThrough – Everything assigned to the Text Property is rendered as it is to the browser. for example “<b><i>dottostring.com</i></b>”  will print dottostring (in bold and italic)
• Transform – This will remove all the content from the Text Property of the Literal Control which is not supported by the browser/device it is rendering to. In case of HTML Browser this acts just like PassThrough
• Encode – This will encode the all the tag so that they are displayed as it is to the viewer. for example “<b><i>dottostring.com</i></b>”  will print <b><i>dottostring.com</i></b> to the user interface.

as we dont have any span tag in the literal control rendered output, therefore we cannot apply any sort of formatting.

now lets look at some samples

• Add Two Literal Controls, one in the Title Tag and the other inside the body and name them lTitle and lContent respectively.
• in the Page_Load Method add the following code.

protected void Page_Load(object sender, EventArgs e)
    {
        lTitle.Text = "[.toString()] Standard Controls - http://www.dottostring.com";
        lContent.Text = "<b><i>dottostring</i></b>";
    }

• Run(F5) the application and notice the following results

ASP.NET Standard Controls - Literal Control Demonstration

The Title of the page is what we set from the Page_Load Method dynamically and also we can see the other Literal Control which is rendered to display dottostring  in below the two textboxes. also it is important to note that by Default the Mode Property for Literal Control is set to Transform, and since results are being redered to an HTML Browser, Transform and PassThrough will generate the same results, however when we change the IContent’s Mode Property to Encode it will also display the markup language on the user interface. effectively converting “<” to “&lt” and “>” to “&gt;”.

ASP.NET Standard Controls - Literal Control Demonstration - Mode=Encode

we can clearly see the mark up language now. so Literal Control can be a very handy control in generating HTML content dynamically.

Thats it for this Part04, in this part we learned how to use some Standard Controls and what their important set of properties do. In the next part we will look at other Standard Controls which will enable us to make our interface much more user interactive.

• Thanks for visiting and waiting patiently for this part, I will be posting more regulary now, so keep in touch and don’t forget to leave comments/feedback
• Download Source Code for Part04
• Cheers !

Previous Parts:

• ASP.NET Tutorials – [Part 01] A peek into ASP.NET and .NET Framework 3.5
  
• ASP.NET Tutorials – [Part 02] ASP.NET 3.5 Controls and Event Handlers I
  
• ASP.NET Tutorials – [Part 03] ASP.NET 3.5 Controls and Event Handlers II
  

There are lots of scenarios where you want to use a nice calendar control, without changing server side logic. This short tutorial will enable you to use extjs DateField in ASP.NET as a calendar control and get the value of user input as DateTime object on server side. With extjs DateField you can apply validations, restrict certain dates, set default date or change it in any way you want.

We start with adding a textbox and a button (We will be converting this textbox to calendar control):

Notice that we are using rel="calendar" here. We do not want to use name or id attribute here because using a master page, we cannot predict client side id or name of the control. Using rel we can safely select multiple controls on client side.

Now we write our javascript. First of all, select all TextBoxes having rel="calendar" using DomQuery:

        Ext.onReady(function(){
            var textBoxes = Ext.DomQuery.select("input[rel=calendar]");
        });

Now loop through each TextBox and convert them to extjs DateField

        Ext.onReady(function(){
            var textBoxes = Ext.DomQuery.select("input[rel=calendar]");
            Ext.each(textBoxes, function(item, id, all){
                var cl = new Ext.form.DateField({
                    allowBlank : false,
                    applyTo: item
                });
            });
        });

And thats all

Now you can get the value of selected date on server side like this:

DateTime.Parse(txtCalendar.Text);

In the last part (part 02) I gave you an overview of ASP.NET 3.5 Controls and their Event Handlers, in this part I will put forward some samples codes.

Creating an ASP.NET Website

• Open Microsoft Visual Studio 2008
• Create a new ASP.NET website (File – > New – > Website)

My First Website - Create New Website

• Provide the location and name for your website.
• From the Language drop down you can select the language of your choice (I will be using C# throughout all my articles).
• Pressing OK, will create a website project for you and by default it already has a Default.aspx page added to it.

Switch to Split View of the Default Page and drag and drop a Label, TextBox and Button Control on the interface such that it looks something like this.

My First Website - Sample Default Page

lets look at the declaration of these controls.

<asp:Label ID=”lblmyLabel” runat=”server”></asp:Label>
<asp:TextBox ID=”txtmyTextBox” runat=”server”></asp:TextBox>
<asp:Button ID=”btnmyButton” runat=”server” Text=”Click” />

all of the ASP.NET Controls have the following characteristics

• Tag Element starting with asp: ( with the exception of HTML Controls )
• Each tag (ASP.NET Control tag) has an attribute runat=”server” which indicates to the framework that this control needs to be rendered at the server side. (HTML Controls can have this attribute only if you need to access it in the server side code)
• ID attribute in the declaration of the ASP.NET Control identifies it, once defined, these controls can be accessed on the server side with these IDs.(I have already given controls appropriate IDs)

Now lets add a click event to the button we have on the page, to do that select the button and the look for Properties Panel on the right bottom of the VS Interface ( if you cannot see the properties panel, Press F4). everything you see in this panel are the properties of the control you have selected and you can modify them here. For now we are interested in adding a Click Event, Select  Events Tab in the properties panel.

My First Website - Properties Panel - Button Events

you can see there are number of Button events available, but by default no events is placed. To add an event, lets say Click Event, we need to double click the space in front of the Click Label, this will add a Button Click Event handler in the Code File of the Default.aspx. This is how your code-behind file for this page would look like with a Button Click Event Handler.

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnmyButton_Click(object sender, EventArgs e)
    {

    }
}

btnmyButton_Click Event will occur everytime when btnmyButton is clicked. now lets Append “Hello” to the Label (lblmyLabel) Text everytime this button is clicked.

    protected void btnmyButton_Click(object sender, EventArgs e)
    {
        lblmyLabel.Text += "Hello ";
    }

• Run (F5) the website and click on the Button more than one time and see what happens. (Note: for the very first time  a Message Box will appear once you Run (F5) your website asking whether to enable debugging or not, Press Yes/Ok)

My First Website - Button Click Event Handler Demonstration

now this is how we can perform different kind of operations, for example manipulating certain information from a form to the database. similarly we have TextChanged Event available for the TextBox control, lets say we require that, whatever is written in the textbox is appended to the label whenever textbox loses focus, All we need to do is select mytxtTextBox control we dropped earlier on the page and add its TextChanged Event Handler like the way we added Button’s Click Event.

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnmyButton_Click(object sender, EventArgs e)
    {
        lblmyLabel.Text += "Hello ";
    }
    protected void txtmyTextBox_TextChanged(object sender, EventArgs e)
    {
        lblmyLabel.Text += txtmyTextBox.Text;
    }
}

just the way on the click of the button there was a post back to the server so that text could be appended to the label, TextBoxes by default are set not to post back on any event, we have to explicitly enable post back by enabling AutoPostBack property of the txtmyTextBox.

My First Website - Properties Panel - AutoPostBack Property

this will make the TextBox postback to the server on TextChanged Event.

• Now Run(F5) the website again
• Enter some text in the textbox and click out side the textbox, this will make the textbox lose focus and subsequently will post back to the server and call the TextChanged Event Handler and our text will appended in the label above.

My First Website - TextBox's TextChanged Event Handler Demonstration

this brings us to the end of Part 03. In this part we learned How ASP.NET Controls and Event Handlers are used in ASP.NET Websites, in the upcoming parts we shall look into Controls in each Category in detail, discovering various properties and events associated with them.

• Thanks for Visiting, don’t forget to let us know how did this article helped you.
• Download Source Code for Part 03
• Cheers!

Proceed to:

• ASP.NET Tutorials – [Part 04] ASP.NET 3.5 Controls and Event Handlers III
  

Previous Parts:

• ASP.NET Tutorials – [Part 01] A peek into ASP.NET and .NET Framework 3.5
• ASP.NET Tutorials – [Part 02] ASP.NET 3.5 Controls and Event Handlers I

In part 1 we talked about ASP.NET and .NET Framework 3.5 in general and got accross some of the very basic concepts of .net technology. now we move on to ASP.NET Controls often termed as the heart of the .NET Framework.

There are around 70+ Controls in ASP.NET Framework and are categorized as follows.

• Standard Controls
• Data Controls
• Validation Controls
• Navigation Controls
• Login Controls
• WebParts Controls
• HTML Controls
• AJAX Extentions

Standard Controls – as the name suggests this category contains all the basic controls in order to fullfil the web interface related requirements such as text boxes, hyperlinks, buttons, tables and many more.

Data Controls – A number of useful data controls are available for the developer to easily communicate with database and efficiently display them to the end user. GridView, ObjectDataSource, Repeater are few of the most popular data controls.

Validation Controls -  these controls come in very handy when we need to apply any sort of validations on the standard controls such as Required field validation on Textbox, Data Type validation, Regular Expression Match and many others.

Navigation Controls – navigation controls make things very comfortable when it comes to manage navigation of your website for example generating SiteMaps, Menus and TreeView.

Login Controls – these controls are there to be used whenever you need to implement security to your website, they enable you to display login, change password and registration forms.

WebParts Controls – these controls enable end users to modify the content, appearance, and behavior of Web pages in the web browser itself.

HTML Controls - these are standard HTML controls such as textboxes, anchor, checkboxes and any other HTML control you would know. it also gives the ability to convert any HTML tag into a server control.

AJAX Extensions – this category contains some very helpful AJAX related controls which enables AJAX on  your pages magically ( well seems like magic ), for example if you want to change text of some label on the web page by a button’s click event using AJAX (without posting the entire page back) all you need to do is put that label and button in a UpdatePanel and that’s just about it!

we will learn about each of them in the detail in the later parts.

Event Handlers

Almost all of the ASP.NET controls provides one or more Events to support the idea of event driven web application. for example if you want that on a certain click of a button a text should change on the web page would require a Click Event of the Button to be raised when clicked and subsequently changing the text of the label placed somewhere on the page.

the code below demonstrates this example

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

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

<script runat="server">

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblMessage.Text = "Button has been Clicked";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DotToString - My First Website</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblMessage" runat="server" Text="Click on the Button Below" ></asp:Label><br />
        <asp:Button ID="btnSubmit" runat="server" Text="Click"
            onclick="btnSubmit_Click" />
    </div>
    </form>
</body>
</html>

In this example Two ASP.NET controls are used,  Label and Button. I have placed an onclick event which is handled by btnSubmit_Click Event Handler to change the text of the Label control.

In the part 3 I will demonstrate some samples codes (using Microsoft Visual Studio 2008) which will further elaborate the use of ASP.NET Controls and their Event Handlers.

keep visiting and don’t forget to leave feedback.

Cheers!

Proceed to:

• ASP.NET Tutorials – [Part 03] ASP.NET 3.5 Controls and Event Handlers II
• ASP.NET Tutorials – [Part 04] ASP.NET 3.5 Controls and Event Handlers III
  

Previous Parts:

• ASP.NET Tutorials – [Part 01] A peek into ASP.NET and .NET Framework 3.5