• 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

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.

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

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
  

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);

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

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

Microsoft Visual Studio 2008 is a developer’s heaven, it strives hard to take care of all the dirty work which otherwise a developer would have to waste time on and encourages him to concentrate on the Business Details. following are some of the handy features VS 2008 has to offer.

• LINQ Support and Designer
• Windows Presentation Foundation
• VS 2008 Support for different .NET Framework Versions
• AJAX support for ASP.NET
• JavaScript Debugging
• Nested Master Page
• Built In Silverlight Library

before we dive into writing code for our first ASP.NET Sample Page, lets look at some of basic terms which you will come across frequently as we move ahead.

Namespaces

There are around 13,000 Classes in .NET Framework, which is an overwhelming number and for obvious reasons needs some sort of management, just like we can have different closets for clothes that belong to summer and winter seasons so that we have everything organized. Similarly .NET Framework has Namespaces which is used to group all the relevant classes under a single Namespace which leads to better organization classes.

for example all the classes relevant to File Operations is categorized under the namespace System.IO and Mail Related Classes in System.Net.Mail.

you have to import Namespaces before you use any of the classes available in that particular Namespace (or provide a complete reference to the class including Namespace), however following is the a list of Namespaces which are already included in an ASP.NET Project and you dont have to reference them explicitly.

• System
• System.Collections
• System.Collections.Specialized
• System.Configuration
• System.Text
• System.Text.RegularExpressions
• System.Web
• System.Web.Caching
• System.Web.SessionState
• System.Web.Security
• System.Web.Profile
• System.Web.UI
• System.Web.UI.WebControls
• System.Web.UI.WebControls.WebParts
• System.Web.UI.HTMLControls

you might be wondering how? the global web configuration file has the reference to all of these in the Framework directory.

Assemblies

Assembly is a compiled form of a particular set of .NET code/classes. its extension is .dll. There are two forms of Assemblies, Shared and Private. As the names would suggest Shared Assemblies are there to be used by every .NET application and resides in Global Assembly Cache (GAC) and Private Assemblies are used by .NET Applications which explicitly adds them to their development/production environtment.

ASP.NET 3.5

ASP.NET 3.5 broadly speaking is a technology used to build interactive data driven Web Applications. Apart from conventional HTML Elements used in any other scripting language, ASP.NET Server Control are the heart of ASP.NET 3.5, it contains text boxes, buttons, images, and data grids and numerous other server side controls which when used in combination with C#.NET/VB.NET is rendered by the .NET Framework to generate equivalent HTML for the client browser.

.NET Framework 3.5

.NET Framework 3.5 can be looked as layers of code which work in a modular fashion between underlying Operating System and your program. Common Runtine Language (CLR) is a huge and essential component of .NET Framework and responsible for the execution of your application code.

Common Runtime Language (CLR)

Common Runtime Language (CLR) is solely responsible for the execution of your program.All of your application code be it in C# or VB is converted to a special language called Microsoft Intermediate Language (MSIL). MSIL is a low-level and platform independent language and is not CPU Specific.

MSIL is then further compiled into machine code by JITTER (The Just-In-Time Compiler) and is then executed. .NET Framework only understands MSIL and includes compilers for supported languages like C#.NET and VB.NET. So practically speaking you can write program code in any language as long as it can compile into MSIL.

This brings us to the end of the part 1. we will be turning our attention to ASP.NET Controls and their Event Handlers in the next part.

keep visiting and don’t forget to leave feedback

Cheers!

Proceed to:

• 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
• ASP.NET Tutorials – [Part 04] ASP.NET 3.5 Controls and Event Handlers III
  

An Illustration of On-Demand Paging Using EXTJS Grid and ASP.NET

Lets start by creating a PageMethod which takes page index and number of required results on a page as parameter and returns an object of ProductList type.

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;
using System.Data.SqlClient;
using System.Text;
using System.Collections.Generic;

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

    }
    /// <summary>
    /// This method will be called from the client side using PageMethods
    /// and its primary responsibility is to fetch records from the database
    /// using that startRowIndex and MaximumRows allowed
    /// </summary>
    /// <param name="PageNumber">Page Number of the grid</param>
    /// <param name="MaximumRows">Page Size</param>
    /// <returns>Rows in the form of a list</returns>
    [System.Web.Services.WebMethod]
    public static ProductList GetProducts(int PageNumber,int MaximumRows)
    {
        //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(), 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;
    }
    /// <summary>
    /// Builds the Actual Parameterized Query which handles On-Demand Paging using
    /// ROW_NUMBER() feature given by SQL Server 2005
    /// </summary>
    /// <returns>Parameterized Query</returns>
    private static String GetQuery()
    {

        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.Append(" SELECT * FROM ( ");
        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();
    }
    /// <summary>
    /// Builds the Query such that it return the count of the
    /// total number of account the query will select without
    /// paging
    /// </summary>
    /// <returns>Query to return total number of records</returns>
    private static String GetRowCountQuery()
    {
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.Append(" SELECT COUNT(*) FROM ( ");
        stringBuilder.Append(" SELECT	ProductID,[Name],ProductNumber,SafetyStockLevel,ReorderPoint ");
        stringBuilder.Append(" FROM	Product ");
        stringBuilder.Append(" ) AS TempTable");
        return stringBuilder.ToString();
    }
    /// <summary>
    /// Executes the Actual Query without paging in order to
    /// fetch total number of records
    /// </summary>
    /// <returns>Total Number of records</returns>
    private static int GetRowCount()
    {
        int rowCount;
        SqlConnection sqlConnection = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
        sqlConnection.Open();
        using (SqlCommand command = new SqlCommand(GetRowCountQuery(), sqlConnection))
        {
            rowCount = Convert.ToInt32(command.ExecuteScalar());
        }
        sqlConnection.Close();
        return rowCount;

    }
    /// <summary>
    /// Constructs Product Entity from the IDataReaer
    /// </summary>
    /// <param name="reader">Reader (Already Executed)</param>
    /// <returns>Product Entity</returns>
    private static Product ConstructProduct(IDataReader reader)
    {
        Product product = new Product();

        int i = reader.GetOrdinal("ProductID");
        if (!reader.IsDBNull(i))
            product.ProductID = reader.GetInt32(i);
        i = reader.GetOrdinal("Name");
        if (!reader.IsDBNull(i))
            product.Name = reader.GetString(i);
        i = reader.GetOrdinal("ProductNumber");
        if (!reader.IsDBNull(i))
            product.ProductNumber = reader.GetString(i);
        i = reader.GetOrdinal("SafetyStockLevel");
        if (!reader.IsDBNull(i))
            product.SafetyStockLevel = Convert.ToInt32(i);
        i = reader.GetOrdinal("ReorderPoint");
        if (!reader.IsDBNull(i))
            product.ReorderPoint = Convert.ToInt32(i);

        return product;
    }
}

Now we include our magical PageMethodProxy on our page.

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
            };

            eval("PageMethods." + this.pageMethod + "(p.start,p.limit,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);
    }
});

You should have following three Javascripts on your page.

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/pagemethods-proxy.js"></script>

We start by making an object of our PageMethodProxy in Ext.onReady

Ext.onReady(function(){
    // lets make an object of pagemethod proxy first
    var pmProxy = new Ext.data.PageMethodProxy({
	    pageMethod: 'GetProducts'
    });
});

Now we make a JsonStore which uses the object of this proxy and specifies properties of Json.

Ext.onReady(function(){
    // lets make an object of pagemethod proxy first
    var pmProxy = new Ext.data.PageMethodProxy({
	    pageMethod: 'GetProducts'
    });

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

Make a PagingToolbar object to be used in grid.

Ext.onReady(function(){
    // lets make an object of pagemethod proxy first
    var pmProxy = new Ext.data.PageMethodProxy({
	    pageMethod: 'GetProducts'
    });

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

    // create paging bar
    var pagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        emptyMsg: "No topics to display"
    });
});

At the end create a grid placeholder div and create the grid object.

Ext.onReady(function(){
    // lets make an object of pagemethod proxy first
    var pmProxy = new Ext.data.PageMethodProxy({
	    pageMethod: 'GetProducts'
    });

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

    // create paging bar
    var pagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        emptyMsg: "No topics to display"
    });

    // 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
        },{
            header: "Product Number",
            dataIndex: 'ProductNumber',
            width: 100
        },{
            header: "Safety Stock Level",
            dataIndex: 'SafetyStockLevel',
            width: 100
        }],
        // put paging bar on the bottom
        bbar: pagingBar
    });

    grid.render();

    // set parameters for initial loading
    store.load({
	    params:{
		    start:0,
		    limit:10
	    }
    });
});

• And thats all
• Cheers, don’t forget to leave comments/feedback
• Download Source Code Here

before we go ahead, I feel its important for you as reader to know that this is the third article in the chain.following are reference to the previous articles ( for those who are interested )

1. How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET | Download Source Code
2. How to create (make a Windows Form act like) a Docking Window without a container in C#.NET | Download Source Code

moving on.

we have two labels which are working as a smooth vertically scrolling set of messages, this scroll effect is given by a Thread we created with the name BeginScroll, so in order to make the labels stop we have to some how make the infinite loop in the BeginScroll thread to stop and vice versa in case of start it again. for that to happen we are going to use a a concept straight out of the operating system textbook i.e. Semaphore/Mutex.

we have to develope a machanism that would allow us to use Signal/Wait strategy. For that .NET Framework has a handy feature called ManualResetEvent(details of this is out of the scope of this article, so I would prefer you to look here for further information ) 

(You can use any of the source code mentioned in the above two articles,I will be using source code from the second article mentioned above in this example)

• Add the following two global declarations to the code (NotificationTiker.cs)

        public ManualResetEvent signalThread = new ManualResetEvent(false);
        private bool keepScrolling;
 

• now add the MouseHover and MouseLeave events for the both the labels such that they should match the following code.

private void lblMessageOne_MouseHover(object sender, EventArgs e)
        {
            //Set KeepSrcolling variable to false so that the loop
            //in the thread terminates
            keepScrolling = false;
            //Reset Event of the ManualResetEvent will make WaitOne
            //Event in the BeginScroll Thread to block and effectively
            //stopping the scroll effect
            signalThread.Reset();
        }

        private void lblMessageOne_MouseLeave(object sender, EventArgs e)
        {
            //Set Event of the ManualResetEvent will release the blocked
            //Thread (blocked by the WaitOne Method)
            signalThread.Set();
        }

        private void lblMessageTwo_MouseHover(object sender, EventArgs e)
        {
            //Set KeepSrcolling variable to false so that the loop
            //in the thread terminates
            keepScrolling = false;
            //Reset Event of the ManualResetEvent will make WaitOne
            //Event in the BeginScroll Thread to block and effectively
            //stopping the scroll effect
            signalThread.Reset();
        }

        private void lblMessageTwo_MouseLeave(object sender, EventArgs e)
        {
            //Set Event of the ManualResetEvent will release the blocked
            //Thread (blocked by the WaitOne Method)
            signalThread.Set();
        }

now after making some changes to the scroll function, it should contain the following code

        private void BeginScroll()
        {
            //This variable will take label out of view
            int LabelHeight = -lblMessageOne.Height;
            //This variable will be used to assign out of view variable to bottom of the panel, to re-enter
            int PanelBottom = panel1.Height;
            bool firstEntry = true;
            while (true)
            {
                if (!firstEntry)
                    signalThread.WaitOne();
                keepScrolling = true;
                while (keepScrolling)
                {
                    firstEntry = false;
                    if (lblMessageOne.Location.Y == LabelHeight)
                    {
                        //when label one goes out of view, it is configured to re enter again
                        lblMessageOne.Location = new Point(lblMessageOne.Location.X, PanelBottom);
                    }
                    else
                    {
                        //Scrolling label by decrementing it y-axis location
                        int MessageOneY = lblMessageOne.Location.Y - 1;
                        lblMessageOne.Location = new Point(lblMessageOne.Location.X, MessageOneY);
                    }
                    if (lblMessageTwo.Location.Y == LabelHeight)
                    {
                        //when label one goes out of view, it is configured to re enter again
                        lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, PanelBottom);
                    }
                    else
                    {
                        //Scrolling label by decrementing it y-axis location
                        int MessageTwoY = lblMessageTwo.Location.Y - 1;
                        lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, MessageTwoY);
                    }
                    this.Refresh();
                    Thread.Sleep(50);
                }
            }
        }

• this is it, now Run(F5) the application and test the mouse over and leave events.
• Cheers, dont forget to leave comments/feedback.
• Download Source Code Here.