Code Tech Blog

JQuery: Consuming WCF / ASMX / REST service

2010-12-06T20:09:00.000-08:00

In this article I will explain how to consume a WCF / ASMX service using jQuery. The scope of the article is limited to creating & consuming different kind of services using jQuery. I have segregated this article into 7 topics based on the service consumption.

Calling ASMX Web service using jQuery
Calling WCF service using jQuery and retrieving data in JSON Format
Calling WCF service using jQuery and retrieving data in XML Format
Calling WCF service using jQuery and retrieving data in JSON Format (pass multiple input parameters) & ( Get multiple objects as output using DataContract)
Calling WCF service using jQuery[ Get Method] and retrieving data in JSON Format
Calling REST based WCF service using jQuery
Streaming an image through WCF and request it through HTTP GET verb..

If you have never heard about jQuery or WCF or JSON, please learn it before dwelling into this article. The scope is limited to service creation and consumption.

In the below example I have used jQuery version 1.3.2 , you can download the same from http://jQuery.com/. This article demonstrates how our jQuery based browser app will retrieve the Provinces for supplied country. All the services are hosted in the same web application. Please download the source code to experiment the sample by yourself.

For calling the service we need to use the .ajax method of jQuery which makes XMLHttpRequest
to the server. In the below code section I have explained the key value pair attributes to be passed by marking comments on the right side of the attribute.

<script type="text/javascript" language="javascript" src="script/jQuery-1.3.2.min.js" "></script>

     <script type="text/javascript">

        var varType;
        var varUrl;
        var varData;
        var varContentType;
        var varDataType;
        var varProcessData; 

        function CallService() 
        {
                $.ajax({
                    type                : varType, //GET or POST or PUT or DELETE verb
                    url                   : varUrl, // Location of the service
                    data                : varData, //Data sent to server
                    contentType    : varContentType, // content type sent to server
                    dataType         : varDataType, //Expected data format from server
                    processdata    : varProcessData, //True or False
                    success            : function(msg) {//On Successfull service call
                    ServiceSucceeded(msg);                    
                    },
                    error: ServiceFailed// When Service call fails
                });
        }
    </script>

I have made the above method generic to use it for all different type of services which we are going to discuss.

Business Logic:

Business logic for below demonstrated service is quite simple, we store Country and Province details in a Name Value collection ,When a request supplies the country name it returns the provinces associated with it.

public class CountryProvinceBL
{
    NameValueCollection nvProvince = null;
    public CountryProvinceBL()
    {
        nvProvince = new NameValueCollection();
        nvProvince.Add("usa", "Massachusetts");
        nvProvince.Add("usa", "California");
        nvProvince.Add("india", "Tamil Nadu");
        nvProvince.Add("india", "Karnataka");
    }
    
    public string[] GetProvince(string Country)
    {  return nvProvince.GetValues(Country).ToArray();}

}

1. Calling ASMX Web service using jQuery

Step 1:

Create a web service and add the below code

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// Below line allows the web service to be called through HTTP protocol. 
[System.Web.Script.Services.ScriptService]
public class CountryProvinceWebService : System.Web.Services.WebService
{

    [WebMethod]
   //Business Logic returns the provinces for the supplied country
    public string[] GetProvince(string Country) 
    {  return new CountryProvinceBL().GetProvince(Country); }    
}

Step 2:

Invoke the below method on button click

unction CountryProvinceWebService() {
            varType              = "POST";         
            varUrl                 = "service/CountryProvinceWebService.asmx/GetProvince"; 
            //Pass country from drop down ddlCountry'
            varData               = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType  = "application/json; charset=utf-8";
            varDataType       = "json";varProcessData = true; CallService();
        }

Step 3:

On Success "ServiceSucceeded" will be called and it will populate the provinces dropdown with the values sent by the server.


function ServiceSucceeded(result) {
            var ProvinceDDL = document.getElementById("ddlProvince");
            for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
            var resultObject = result.d; // Constructed object name will be object.d //Button 
            for (i = 0; i < resultObject.length; i++) {
                    var opt = document.createElement("option"); opt.text = resultObject[i];
                    ProvinceDDL.options.add(opt)
                }
        }

2. Calling WCF service using jQuery and retrieving data in JSON Format

Step 1:

Define the Contracts in the interface ICountryProvinceWCFService

[ServiceContract]
public interface ICountryProvinceWCFService
{
    [OperationContract]
    [WebInvoke(Method = "POST",BodyStyle=WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]    
    string[] GetProvince(string Country);
}

Implement the contract in class CountryProvinceWCFService 

public class CountryProvinceWCFService : ICountryProvinceWCFService
{   
  // Call Business Logic to get provinces
    public string[] GetProvince(string Country)
    {return new CountryProvinceBL().GetProvince(Country); }
}

Step 2:

Define the configuration in web.config

a) enables the user to view the metadata through web browser and generate WSDL file

b) setting includeExceptionDetailInFaults = "true" allows the WCF service throw original error , it will be useful while debugging the application.

c) Adding to endpoint behaviour & webHttpBinding to binding enables the web programming model for WCF and allows the service to be accessible through web protocols.

d) Define contract and name of the service

Step 3:

Invoke the WCF service on the button click event

function CountryProvinceWCFJSON() {
            varType              = "POST";
            varUrl                 = "service/CountryProvinceWCFService.svc/GetProvince";
            varData              = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType = "application/json; charset=utf-8";
            varDataType      = "json"; varProcessData = true; CallService();
        }

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.


function ServiceSucceeded(result) {/
       var ProvinceDDL = document.getElementById("ddlProvince");
       for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
               // Constructed object name will be object.[ServiceName]Result // Button 2 & 3
              var resultObject = result.GetProvinceResult;
           for (i = 0; i < resultObject.length; i++) {
               var opt = document.createElement("option"); opt.text = resultObject[i];
               ProvinceDDL.options.add(opt)
           }       
   }

3. Calling WCF service using jQuery and retrieving data in XML Format

Step 1:

In operation contract set ResponseFormat to XML.

[OperationContract]
    [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped,ResponseFormat = WebMessageFormat.Xml)]
    string[] GetProvinceXML(string Country);

Then implement the service 

    public string[] GetProvinceXML(string Country)
    {  return new CountryProvinceBL().GetProvince(Country); }

Use the web.config, defined in Figure 1 .

Step 2:

Invoke the WCF service on the button click event, Make sure you set the expected data type as XML

function CountryProvinceWCFXML() {
            varType              = "POST";
            varUrl                 = "service/CountryProvinceWCFService.svc/GetProvinceXML";
            varData              = '{"Country": "' + $('#ddlCountry').val() + '"}';
            varContentType = "application/json; charset=utf-8"; 
            varDataType      = "xml";  varProcessData = true; CallService();
        }

Step 3:

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

function ServiceSucceeded(result) {
              var ProvinceDDL = document.getElementById("ddlProvince");
              for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }
            //Below jQuery code will loop through the XML result set
              $(result).find("GetProvinceXMLResult").children().each(function() {
                  var opt = document.createElement("option"); opt.text = $(this).text();
                  ProvinceDDL.options.add(opt)
              });          
          }

4. Calling WCF service using jQuery and retrieving data in JSON Format (pass multiple input parameters) & ( Get multiple objects as output using DataContract)

In this example Country and Browser type will be passed as input parameter to the WCF service in JSON format, Upon receiving the values the service will send back provinces for the passed country and some comments for the browser information.

Step 1:

Define Data contract and service contact for the service

[DataContract]
public class CustomData
{
    [DataMember]
    public String BrowserInfo;
    [DataMember]
    public String[] ProvinceInfo;
}

  [OperationContract]
    [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
    CustomData GetProvinceAndBrowser(string Country, string Browser);


And implement the contract in your service call

    public CustomData GetProvinceAndBrowser(string Country, string Browser)
    {
        CustomData customData = new CustomData();
        customData.ProvinceInfo = new CountryProvinceBL().GetProvince(Country);
        if (Browser == "ie")
            customData.BrowserInfo = " Did you learn to program IE 8.0";
        else if (Browser == "firefox")
            customData.BrowserInfo = " Mozilla rocks, try Firebug & Fiddler addon's";
        else
            customData.BrowserInfo = " I did not test in this browser";
        return customData;
    }

Step 2:

Invoke the WCF service on the button click event, Make sure you set the expected data type as XML

function CountryProvinceWCFJSONMulti() {
            var browser = "";
            if (jQuery.browser.mozilla == true) browser="firefox"
            else if(jQuery.browser.msie == true) browser = "ie"
            varType                = "POST";
            varUrl                   = "service/CountryProvinceWCFService.svc/GetProvinceAndBrowser";
            //We are passing multiple paramers to the service in json format {"Country" : "india", "Browser":"ie"}
            varData                = '{"Country": "' + $('#ddlCountry').val() + '","Browser": "' + browser + '"}';
            varContentType   = "application/json; charset=utf-8";
            varDataType        = "json";varProcessData = true; CallService();
    }

Step 3:

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

 function ServiceSucceeded(result) {
                    var ProvinceDDL = document.getElementById("ddlProvince");
                    for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }                   
                   //WCF Service with multiple output paramaetrs //First object 
                    var resultObject = result.GetProvinceAndBrowserResult.ProvinceInfo;
                    for (i = 0; i < resultObject.length; i++) {
                        var opt = document.createElement("option"); opt.text = resultObject[i];
                        ProvinceDDL.options.add(opt)
                    }
                    //Second object sent in JSON format
                    $("#divMulti").html(result.GetProvinceAndBrowserResult.BrowserInfo);          
                }

5. Calling WCF service using jQuery[ Get Method] and retrieving data in JSON Format

This time we will use GET Verb instead of POST to retrieve the data through WCF & jQuery

Step 1:

We can use the WebGet attribute instead of WebInvoke to perform the operation,
[OperationContract]
[WebGet(ResponseFormat=WebMessageFormat.Json)]
string[] GetProvinceGET(string Country);

Implement the contract

public string[] GetProvinceGET(string Country)
{return new CountryProvinceBL().GetProvince(Country);}

And use the web.config defined in figure 1

Step 2:

Set the verb to GET instead of POST and pass the data as a query string. Invoke the WCF Service using below method

function CountryProvinceWCFJSONGet() {
            varType                 = "GET";
            varUrl                    = "service/CountryProvinceWCFService.svc/GetProvinceGET?Country=" +$('#ddlCountry').val();
            varContentType    = "application/json; charset=utf-8";
            varDataType = "json";varProcessData = false; CallService();
        }

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

function ServiceSucceeded(result) {
           var ProvinceDDL = document.getElementById("ddlProvince");
           for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }          
           for (i = 0; i < result.length; i++) {
               var opt = document.createElement("option"); opt.text = result[i];
               ProvinceDDL.options.add(opt)
           }
       }

6. Calling REST based WCF service using jQuery

Step 1:

Define the URI for REST service in the operation contract and set the BodyStyle to Bare.

[OperationContract]
    [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetProvinceREST/{Country}", BodyStyle=WebMessageBodyStyle.Bare)]
    string[] GetProvinceREST(string Country);

Implement the contract:

    public string[] GetProvinceREST(string Country)
    { return new CountryProvinceBL().GetProvince(Country);  }

Use the web.config defined in Figure 1

Step 2:

While using REST services use GET verb for retrieving data and POST , PUT , DELETE for modifying, adding and deleting information

function CountryProvinceWCFREST() {
            varType               = "GET";
            varUrl                  = "service/CountryProvinceWCFService.svc/GetProvinceREST/" + $('#ddlCountry').val();            
            varContentType  = "application/json; charset=utf-8";
            varDataType       = "json"; varProcessData = false; CallService();
        }

On successful service invocation "ServiceSucceeded" will be called and the province value will get added to province drop down.

function ServiceSucceeded(result) {
           var ProvinceDDL = document.getElementById("ddlProvince");
           for (j = ProvinceDDL.options.length - 1; j >= 0; j--) { ProvinceDDL.remove(j); }          
           for (i = 0; i < result.length; i++) {
               var opt = document.createElement("option"); opt.text = result[i];
               ProvinceDDL.options.add(opt)
           }
       }

Step 1:

Define the contract and set the return type to Stream since we are going to send it in Image/jpeg Format
[OperationContract]
[WebInvoke(Method = "GET")]
Stream GetPicture();

Implement the contract

public Stream GetPicture()
{
string fileName = Path.Combine(HostingEnvironment.ApplicationPhysicalPath,"vista.jpg");
FileStream fileStream = new FileStream(fileName, FileMode.Open, FileAccess.Read);
// Set the content type as image/ jpeg
System.ServiceModel.Web.WebOperationContext.Current.OutgoingResponse.ContentType = "image/jpeg";
return (Stream)fileStream;
}

And use the web.config which we defined earlier in this article

Step 2:

On Button click event set the src attribute of image element [image1] to the WCF service

function ShowImage() {// Call the WCF service
$("#image1").attr('src','service/CountryProvinceWCFService.svc/GetPicture');

}

ASP.NET : Creating a Tag Cloud

2010-12-06T19:46:00.000-08:00

A tag cloud is a way to display a weighted list such that the weight of each item is reflected by the size of the item's text. Tag clouds provide a quick way for one to eyeball a list and ascertain what items are more prevalent. Oftentimes, each item in a tag cloud is rendered as a link that, when clicked, allows the user to drill into the selected category.

Ideally, a tag cloud could be associated with some data, a few properties set, and, voila, the tag cloud appears! In fact, we'll examine how to accomplish exactly this in a future article by creating a custom, compiled ASP.NET 2.0 server control. For now, though, let's just implement the tag cloud directly from an ASP.NET page (although this could be moved to a User Control for greater reuse opportunities).
First things first - we need the data that returns the list with each item weighted. In the demo downloadable at the end of this article, I have used a SqlDataSource control to query the Northwind database, returning the CategoryID, CategoryName, and number of products belonging to each category:

SELECT Categories.CategoryID, Categories.CategoryName, 
       COUNT(Products.ProductID) AS NumberOfProducts 

FROM Categories 
    INNER JOIN Products ON 
        Categories.CategoryID = Products.CategoryID 

GROUP BY Categories.CategoryID, Categories.CategoryName
ORDER BY Categories.CategoryName

This query uses the GROUP BY clause to return the count of products associated with each category. See Using the GROUP BY Clause for more information on this SQL clause.

The tag cloud is outputted in the Web page via a Literal Web control named CloudMarkup. In code we're going to loop through the database results, compute the font size scale, and then emit an HTML hyperlink as markup into the Text property of the Literal control. To start, we need to get the data from the SqlDataSource control. This is accomplished by calling its Select() method, which returns a DataView object:

'First, read data from SqlDataSource
Dim cloudData As DataView = CType(CategoriesProductsBreakdownDataSource.Select(DataSourceSelectArguments.Empty), DataView)

Next, a series of constants are defined in an attempt to generalize this code at least a little bit. For example, there are constants that define the names of the database columns that return the weight, the text field to display, along with the field to use (and a format string) when constructing the URL for each hyperlink. You'll also find the set of font sizes and the markup to inject between each link.

Const SpacerMarkup As String = " " 'The markup injected between each item in the cloud
Dim FontScale() As String = {"xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large"}

'All database column names are centralized here. To customize this, simply modify the column names here
Const WeightColumnName As String = "NumberOfProducts"
Const TextColumnName As String = "CategoryName"
Const NavigateUrlColumnName As String = "CategoryID"
Const NavigateUrlFormatString As String = "~/ViewProductsByCategory.aspx?CategoryID={0}"

Next, we need to determine the minimum and maximum weight values in the list. This information is then used to compute the linear scale by which we'll map an item's weight to a font size. The scaleUnitLength holds the "length" of each notch on the scale.

Dim minWeight As Decimal = Decimal.MaxValue, maxWeight As Decimal = Decimal.MinValue

For Each row As DataRowView In cloudData
    Dim numProductsObj As Object = row(WeightColumnName)
    If Not Convert.IsDBNull(numProductsObj) Then
       Dim numProductsDec As Decimal = Convert.ToDecimal(numProductsObj)

       If numProductsDec < minWeight Then minWeight = numProductsDec
       If numProductsDec > maxWeight Then maxWeight = numProductsDec
    End If
Next

Dim scaleUnitLength As Decimal = (maxWeight - minWeight + 1) / Convert.ToDecimal(FontScale.Length)

After computing the scale, the data is enumerated one more time, this time with a hyperlink element emitted for each record. To find the place on the scale, the current item's weight is subtracted from the minimum and divided by scaleUnitLength. This index is used to select the appropriate font size from FontScale. Also note that the specified values for NavigateUrlColumnName and NavigateUrlFormatString are used to configure the href portion of the hyperlink.

For Each row As DataRowView In cloudData
    Dim numProductsObj As Object = row("NumberOfProducts")
    If Not Convert.IsDBNull(numProductsObj) Then
       Dim numProductsDec As Decimal = Convert.ToDecimal(numProductsObj)

       Dim scaleValue As Integer = Math.Truncate((numProductsDec - minWeight) / scaleUnitLength)
       CloudMarkup.Text &= String.Format("<a href=""{0}"" style=""font-size:{1};"">{2}</a>{3}", _
                                    Page.ResolveUrl(String.Format(NavigateUrlFormatString, row(NavigateUrlColumnName).ToString())), _
                                    FontScale(scaleValue), row(TextColumnName).ToString(), SpacerMarkup)
    End If
Next

That's all there is to it! The resulting output is a chunk of HTML that, when rendered in the user's browser, lists each category as a hyperlink pointing to ViewProductsByCategory.aspx?CategoryID=categoryID. Each link's text size is based on its weight using a linear scale. The following screenshot below shows a tag cloud of the Northwind database's categories table along with the raw data used to populate the cloud.

Microsoft AJAX CDN

2010-09-17T13:24:00.000-07:00

What does a CDN provide?

Content delivery networks (CDNs) are composed of "edge cache" servers that are strategically placed around the world at key Internet network points. These "edge cache" servers can be used to cache and deliver all types of content – including images, videos, CSS and JavaScript files.

Using a CDN can significantly improve a website's end-user performance, since it enables browsers to more quickly retrieve and download content. For example, instead of having a browser request for an image traverse all the way across the Internet to your web server to download, a CDN can instead serve the request directly from a nearby "edge cache" server that might only be a single network hop away from your customer (making it return much faster – which makes your pages load quicker).

What does the Microsoft AJAX CDN provide?

The Microsoft AJAX CDN makes it really easy to add the jQuery and ASP.NET AJAX script libraries to your web sites, and have them be automatically served from one of our thousands of geo-located edge-cache servers around the world.

For example, if you want to use jQuery from the Microsoft AJAX CDN then you can simply add a standard script tag to your page using the URL below:

When the browser requests the script file it will be automatically served by the CDN "edge cache" server that is closest to the end-user. This means:

* The request will be processed much faster than if it had to hit your web-server (making the end-user's page load much faster)

* You don't have to pay for the bandwidth of this file – since the file comes from our server we pay the bandwidth cost (saving you money)

* The script can be easily cached across multiple web-sites – which means it might not even need to be downloaded if the user has already hit a web-site that requested the file (and as such has it already in the browser's cache).

You can get a full listing of the JavaScript libraries (and associated URLs) we already have loaded in our CDN cache here: www.asp.net/ajax/cdn

We'll update the available libraries in the CDN as we ship new versions of ASP.NET AJAX, and continue to update it to include all of the JavaScript files we ship with ASP.NET and Visual Studio (including jQuery, the jQuery Validation plugin, and additional libraries we ship in the future).

The CDN service is free and available for anyone in the community to use for both commercial and non-commercial purposes. You do not need to register to take advantage of it.
Using the Microsoft AJAX CDN with the ASP.NET 4.0 ScriptManager

In addition to allowing you to reference script files directly using a

Asp.Net AutoComplete Textbox Using Jquery

2010-05-29T11:21:00.000-07:00

This article demonstrates how to use the jQuery UI AutoComplete widget to consume an ASP.NET Web Service (EmployeeList.asmx) that is JSON Serialized. The data source for this web service is List in the Employee.cs class. You can download this class from the source code attached with this article.
The Autocomplete widget is one of the widgets provided in jQuery UI and provides suggestions while you type into the field. jQuery UI is a free widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

Let us first glance through the entire code with the jQuery UI AutoComplete widget added to the TextBox (tb)

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AutoComplete Box with jQuery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
<script type="text/javascript">
$(function() {
    $(".tb").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "EmployeeList.asmx/FetchEmailList",
                data: "{ 'mail': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            value: item.Email
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2
    });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
    <label for="tbAuto">Enter Email: </label>
     <asp:TextBox ID="tbAuto" class="tb" runat="server">
     </asp:TextBox>
</div>
</div>
</form>
</body>
</html>

Now before explaining to you how this code functions, let us go through the WebService first. Assuming you have downloaded the source code and are looking at the EmployeeList.cs/vb file, you will observe that the method has been decorated with the [WebMethod] attribute to allow calls from client script

<WebMethod>
Public Function FetchEmailList(ByVal mail As String) As List(Of Employee)
      Dim emp = New Employee()
      Dim fetchEmail = emp.GetEmployeeList().Where(Function(m) m.Email.ToLower().StartsWith(mail.ToLower()))
      Return fetchEmail.ToList()
End Function

Here the FetchEmailList(string mail) method calls the GetEmployeeList() method on the Employee class which returns a List. We then filter the list using the filter string (mail) passed from the UI and then return the list of emails that match the filter string.
Note: If a method is not marked with [ScriptMethod] attribute, the method will be called by using the HTTP POST command and the response will be serialized as JSON.
Going back to code we saw above, observe how the TextBox is wired to the AutoComplete widget.

$(function() {
    $(".tb").autocomplete({
        source: function(request, response) {
            $.ajax({
                // consume the webservice
        },
        minLength: 2
    });
});

To consume this web service using jQuery $.ajax(), two important points to note is that the request should be a POST request and the request’s content-type must be ‘application/json; charset=utf-8’. The code structure of the $.ajax() call looks similar to the following:

$.ajax({
    url: "EmployeeList.asmx/FetchEmailList",
    data: "{ 'mail': '" + request.term + "' }",
    dataType: "json",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    success: function(data) {
 
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    }
});

Observe how the parameter (that the user types in the textbox) is passed to the webservice using data: "{ 'mail': '" + request.term + "' }" .You may need to add additional checks to format the data or validate it. Once the Ajax method is completed, the success function will be executed and the matching results (Email) will be returned using the following code.

dataFilter: function(data) { return data; },
success: function(data) {
    response($.map(data.d, function(item) {
        return {
            value: item.Email
        }
    }))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert(textStatus);
}

Now when you browse the page and type the first 2 characters in the textbox, the jQuery UI AutoComplete widget added to the TextBox, provides suggestion that it pulls from the JSON enabled WebService as shown below

Filtering RSS Feed using LINQ

2010-03-22T02:15:00.000-07:00

In this article, we will see how to read and filter the RSS Feed of codetechblog.blogspot.com using LINQ to XML. We will first read the RSS feed and populate the DropDownList with ‘Authors’ retrieved from the feed. We will then filter the feed results based on the Author selected in the DropDownList.
e will be reading and filtering the RSS feed of this site codetechblog.blogspot.com. The RSS feed can be obtained over here http://feeds.feedburner.com/codetechblog. Let us quickly jump to the solution.

Step 1: Create a new website (Open Visual Studio > File > New Website) called ‘FilterRSS.
Step 2: Drag and drop a GridView and a DropDownList control to the page.
Step 3: Once you visit the RSS Feed over here, right click on the page and View Source. You will find an XML file, since RSS is an XML file.
Let us now write a LINQ to XML query to read the Title, Link, Description and Author elements from our RSS Feed and filter the results. Add the following markup to the DropDownList and some template Columns to the GridView, to display content:

<div>
    <asp:DropDownList ID="DropDownList1" runat="server"
        onselectedindexchanged="DropDownList1_SelectedIndexChanged"
        AutoPostBack="True">
    </asp:DropDownList>
    <br /><br />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Title">
         <ItemTemplate>
         <a href='<%# Eval("link") %>' target="_blank"><%# Eval("title") %></a>
         </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Author"
           HeaderText="Author" />
       <asp:BoundField DataField="description" HtmlEncode="false"
               HeaderText="Description" />
    </Columns>
    </asp:GridView>
</div>

Step 4: Now create an ArticlesList class which will act as a container for the items read from the feed

VB.NET
Public Class ArticlesList
      Private privateTitle As String
      Public Property Title() As String
            Get
                  Return privateTitle
            End Get
            Set(ByVal value As String)
                  privateTitle = value
            End Set
      End Property
      Private privateLink As String
      Public Property Link() As String
            Get
                  Return privateLink
            End Get
            Set(ByVal value As String)
                  privateLink = value
            End Set
      End Property
      Private privateDescription As String
      Public Property Description() As String
            Get
                  Return privateDescription
            End Get
            Set(ByVal value As String)
                  privateDescription = value
            End Set
      End Property
      Private privateAuthor As String
      Public Property Author() As String
            Get
                  Return privateAuthor
            End Get
            Set(ByVal value As String)
                  privateAuthor = value
            End Set
      End Property
End Class

We are using Generics to return a strongly typed collection of IEnumerable items. This collection can now be passed to any other part of the application or stored in a session object to be used during postbacks.
The code will look similar to the following:

VB.NET
 
Imports System
Imports System.Linq
Imports System.Xml.Linq
Imports System.Collections.Generic
 
Partial Public Class _Default
      Inherits System.Web.UI.Page
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If (Not IsPostBack) Then
                  Dim xFeed As XElement = XElement.Load("http://feeds.feedburner.com/netCurryRecentArticles")
 
                  Dim items As IEnumerable(Of ArticlesList) = From item In xFeed.Elements("channel").Elements("item") _
                                                              Select New ArticlesList
                                    item.Element("description").Value, Author = item.Element("author").Value
                                    item.Element("link").Value, Description = item.Element("description").Value, Author
                                    item.Element("title").Value, Link = item.Element("link").Value, Description
                                    Title = item.Element("title").Value, Link
 
                  'store items in a session
                  Session("feed") = items
 
                  Dim authors = items.Select(Function(p) p.Author).Distinct()
 
                  DropDownList1.DataSource = authors
                  DropDownList1.DataBind()
                  Dim selAuth As String = DropDownList1.SelectedValue
                  PopulateGrid(selAuth)
            End If
      End Sub
 
      Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
            Dim selAuth As String = DropDownList1.SelectedValue
            PopulateGrid(selAuth)
      End Sub
 
      Protected Sub PopulateGrid(ByVal author As String)
            Dim items = CType(Session("feed"), IEnumerable(Of ArticlesList))
 
            If items IsNot Nothing Then
                  Dim filteredList = From p In items _
                                     Where p.Author = author _
                                     Select p
 
                  GridView1.DataSource = filteredList
                  GridView1.DataBind()
            End If
      End Sub
End Class

In the code above, we load the Xml from the RSS feed using the XElement class. We then enumerate through all the Channel\Item elements and populate the items collection. This collection is stored in a Session object to be reused during postbacks.
Note: Observe the !IsPostBack which populates the collection only once, thereby saving the list from getting populated on every pageload.
We then apply a filter on this collection and select distinct authors and bind the result to a DropDownList. The selected author is passed to the PopulateGrid() method where the session object is casted back to IEnumerable. The list is then filtered based on the author passed and the results are bound to a GridView.
Similarly as and when the users selects a new author from the DropDownList, the list gets filtered and only the articles belonging to that author is displayed. Here are some screenshots:

I hope this article was useful and I thank you for viewing it

Rotate Hyperlink Controls Using Jquery

2010-03-14T11:13:00.000-07:00

This short article demonstrates how to rotate a group of Hyperlink Controls in the same position using jQuery.
Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability.
People who have been monetizing their sites need no introduction to TextLinkAds. In simple words, Text Link Ads are Hyperlinks sponsored by Advertisers. When a user clicks on these hyperlinks, they are sent to the sponsor’s website. In this recipe, I will demonstrate how to rotate multiple hyperlinks or TextLinkAds on the same position.
Let us quickly jump to the solution and see how we can rotate a group of Hyperlink Controls using client-side code. This example uses the latest minified version of jQuery which is 1.3.2 that can be downloaded from here. This example assumes that you have a folder called "Scripts" with the jQuery file (jquery-1.3.2.min.js) in that folder

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Timer based toggling of hyperlink</title>
    <script type='text/javascript'
        src='../Scripts/jquery-1.3.2.min.js'>
    </script>
   
    <script type="text/javascript">
        $(function() {
            var anch = $("a.dev");
            $(anch).hide().eq(0).show();
            var cnt = anch.length;
 
            setInterval(linkRotate, 3000);
 
            function linkRotate() {
               $(anch).eq((anch.length++) % cnt).fadeOut("slow", function() {
                    $(anch).eq((anch.length) % cnt)
                    .fadeIn("slow");
                });
            }
        });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div class="tableDiv">
        <h2>The Hyperlink and Text shown below changes after 3 seconds
        </h2><br />
        <asp:HyperLink ID="linkA" runat="server" class="dev"
            NavigateUrl="http://www.google.com">
            Google</asp:HyperLink>
        <asp:HyperLink ID="linkB" runat="server" class="dev"
            NavigateUrl="http://www.yahoo.com">
            Yahoo</asp:HyperLink>
        <asp:HyperLink ID="linkC" runat="server" class="dev"
            NavigateUrl="http://www.microsoft.com">
            Microsoft</asp:HyperLink>
    </div>
    </form>
</body>
</html>

We begin by hiding all the hyperlinks with class="dev" and then display the first one.

var anch = $("a.dev");

$(anch).hide().eq(0).show();

We then use the JavaScript setInterval() function to delay the execution of a function (linkRotate) for a specific time, in our case 3000 millisecond (3 seconds), as shown below:

setInterval(linkRotate, 3000);

The advantage of the setInterval() function is that it continues to repeat the process of triggering the function at the specified interval, thereby giving it a loop effect.

In the linkRotate() function, we use a simple expression (anch.length++) % cnt that calculates the index to be supplied to the eq() selector and applies the fadeout/fadeIn() animations on the current hyperlink. eq(0) refers to the first link, eq(1) to the second link and so on.

function linkRotate() {

$(anch).eq((anch.length++) % cnt).fadeOut("slow", function() {

$(anch).eq((anch.length) % cnt)

.fadeIn("slow");

});

}

Jquery :Increase image's size on Mouseclick

2010-03-03T08:25:00.000-08:00

This short article demonstrates how to click and view a larger image when the thumbnail is clicked on.Note that for demonstration purposes, I have included jQuery and CSS code in the same page. Ideally, these resources should be created in separate folders for maintainability.

Let us quickly jump to the solution and see how we can view a larger image when an image is clicked on

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Click and Increase the Size of an Image</title>
    <style type="text/css">
        .imgthumb
        {
            height:100px;
            width:100px;
        }
        .imgdiv
        {
            background-color:White;
            margin-left:auto;
            margin-right:auto;
            padding:10px;
            border:solid 1px #c6cfe1;
            height:500px;
            width:450px;
        }
    </style>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
   
     <script type="text/javascript">
         $(function() {
             $("img.imgthumb").click(function(e) {
                 var newImg = '<img src='
                                + $(this).attr("src") + '></img>';
                 $('#ladiv')
                    .html($(newImg)
                    .animate({ height: '300', width: '450' }, 1500));
             });
         });    
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="imgdiv">
        <h2>Click on the thumbnail to view a large image</h2>
        <br />
        <asp:Image ID="imgA" class="imgthumb" runat="server"
            ImageUrl="../images/1.jpg" />
        <asp:Image ID="imgB" class="imgthumb" runat="server"
            ImageUrl="../images/2.jpg" />
        <asp:Image ID="imgC" class="imgthumb" runat="server"
            ImageUrl="../images/3.jpg" />
        <asp:Image ID="Image1" class="imgthumb" runat="server"
            ImageUrl="../images/4.jpg" />
        <hr /><br />
        <div id="ladiv"></div>
    </div>
    </form>
</body>
</html>

This recipe demonstrates how to increase the size of an image when it is clicked. To give it an Image gallery effect, when a thumbnail is clicked, we create a new image element and set its source, to the source of the clicked thumbnail.

var newImg = '<img src='
              + $(this).attr("src") + '></img>';

The next and final step is to set the html contents of a div element to the ‘newImg’ variable and then increase the image size, by animating the height and width of the image.

$('#ladiv')
         .html($(newImg)
         .animate({ height: '300', width: '450' }, 1500));

When you run the application, click on the thumbnail to see a large version of the image with animation, as shown below. Additionally, you can also preload the images for better performance..

I hope you found this article useful and I thank you for viewing it.

Jquery :Change Image Opacity on MouseOver

2010-02-24T11:00:00.000-08:00

This short article demonstrates how to change the opacity of an image when the user hovers the mouse over an image.
Note that for demonstration purposes, I have included jQuery and CSS code in the same page. Ideally, these resources should be created in separate folders for maintainability.
Let us quickly jump to the solution and see how we can change the opacity of an image.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Change Image Opacity on Hover</title>
    <style type="text/css">
    .imgOpa
    {
        height:250px;
        width:250px;
        opacity:0.3;
        filter:alpha(opacity=30);
    }
    </style>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
   
    <script type="text/javascript">
        $(function() {
            $('.imgOpa').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 1.0 }, 800);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.3 }, 800);
                   })
                });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2>Hover over an Image to change its Transparency level</h2>
        <br />
        <asp:Image ID="Image1" runat="server"
            ImageUrl="../images/1.jpg" class="imgOpa" />
        <asp:Image ID="Image2" runat="server"
            ImageUrl="../images/2.jpg" class="imgOpa" />
        <asp:Image ID="Image3" runat="server"
            ImageUrl="../images/3.jpg" class="imgOpa" />
        <asp:Image ID="Image4" runat="server"
            ImageUrl="../images/4.jpg" class="imgOpa" />
    </div>
    </form>
</body>
</html>

In this example, observe that the images have a class attribute ‘imgOpa’. The definition of the CSS class is as shown here:

.imgOpa
    {
        height:250px;
        width:250px;
        opacity:0.3;
        filter:alpha(opacity=30);
    }

When the images are loaded, they are in a semitransparent state. In Firefox, Chrome and Safari, we use the opacity:n property for transparency. The opacity value can be from 0.0 - 1.0, where a lower value makes the element more transparent.
In IE 7 and later, we use filter:alpha(opacity=n) property for transparency, where the opacity value can be from 0-100.
When the user hovers the mouse over a semitransparent image, we use the jQuery hover() method to animate the opacity property from 0.3 to 1.0, thereby creating a cool effect on the images. The code to achieve this effect is shown below:

$(this).hover(
    function() {
        $(this).stop().animate({ opacity: 1.0 }, 800);
    },
   function() {
       $(this).stop().animate({ opacity: 0.3 }, 800);
   })
});

I hope you found this article useful and I thank you for viewing it

ASP.NET TextBox with Watermark Effect using jQuery

2010-02-24T10:56:00.000-08:00

This short article demonstrates how to create a watermark effect on your TextBox and display instructions to users, without taking up screen space.
Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability.
Let us quickly jump to the solution and see how we can create a watermark effect on your TextBox using client-side code.

<!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 id="Head1" runat="server">
    <title>TextBox WaterMark</title>
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>  
   
    <style type="text/css">
    .water
    {
         font-family: Tahoma, Arial, sans-serif;
         color:gray;
    }
    </style>
   
    <script type="text/javascript">
        $(function() {
 
            $(".water").each(function() {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });
 
            $(".water").focus(function() {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });
 
            $(".water").blur(function() {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            });
        });       
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="smallDiv">
     <h2>TextBox Watermark Demonstration</h2>    <br />          
        <asp:TextBox ID="txtFNm" class="water" Text="Type your First Name"
        Tooltip="Type your First Name" runat="server"></asp:TextBox><br />
        <asp:TextBox ID="txtLNm" class="water" Text="Type your Last Name"
        Tooltip="Type your Last Name" runat="server"></asp:TextBox>
        <br /><br />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        <br /><br />
        Tip: Click on the TextBox to start typing. The watermark
        text disappears.
    </div>
    </form>
</body>
</html>

The code shown above adds the “watermark” behavior to controls marked with the ‘class=water’ attribute. When the user loads the page, a watermarked textbox displays a message to the user. As soon as the watermarked textbox receives focus and the user types some text, the watermark goes away. This technique is a great space saver as you can use it to provide instructions to the user, without using extra controls that take up valuable space on your form.
The ‘Tooltip’ attribute applied to the textbox is crucial to this example. The ‘Tooltip’ gets rendered as ‘title’. Observe the code, as we use this ‘title’ property to compare it to the textbox value and remove the watermark css, when the textbox control gains focus

$(".water").focus(function() {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });

Similarly when the user moves focus to a different control without entering a value in the textbox, we add the watermark css again.

$(".water").blur(function() {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            });

The water class declared in Demos.css looks like this:

.water
{
     font-family: Tahoma, Arial, sans-serif;
     font-size:75%;
     color:gray;
}

When the user enters the First/Last Name and submits the form, the watermark behavior is no more needed to be displayed. This is achieved by comparing the ‘title’ with the ‘value’ of the textbox. If the ‘value’ does not match the ‘title’, this indicates that the user has entered some value in the textboxes and submitted the form. So in this case we remove the watermark appearance.

$(".water").each(function() {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });

Convert all texts email addresses to mailto links using jQuery

2010-02-24T10:12:00.000-08:00

In this post I’ll show how to use jQuery to automatically convert all email addesses from static text into a mailto link.
Consider the following table which contains a person’s details including their email address.

Using jQuery I can easily find table cells that contain an email address by using a regular expression and then convert the address into a mailto link:

$().ready(function() {
    var regEx = /(\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)/;

    $("table td").filter(function() {
        return $(this).html().match(regEx);
    }).each(function() {
        $(this).html($(this).html().replace(regEx, "<a href=\"mailto:$1\">$1</a>"));
    });
});

First I’ve defined my email regular expression. I have also made sure the entire expression is in brackets, this sets up a regular expression group for the whole thing which I use when doing the replace.
For my example I’m only going to replace email addresses within a TD tag so my selector first gets these elements. I next use the filter function to only select the email address content from the TD by using the JavaScript match function with my email regular expression. I then iterate over the collection of elements and use the JavaScript replace function to replace the static email address with a mailto hyperlink to the same email address.
In my replace string I’m using $1, which will output the matching text from the original string from the first grouping in my regular expression. As I said earlier I put brackets around my entire regular expression so that the first grouping it the whole thing. This means that $1 will output the matched email address.
Now when I run my project the email addresses are automatically mailto links:

AutoScroll Multiline TextBox using jQuery in Asp.Net

2010-02-15T09:58:00.000-08:00

This article demonstrates how to autoscroll a multiline textbox both upwards and downwards using jQuery 1.3.2.

Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability. The code shown below has been tested on IE7, Firefox 3, Chrome 2 and Safari 4
Let us quickly jump to the solution and see how to AutoScroll a multiline textbox.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>AutoScroll a Multiline TextBox</title>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
 
   
    <script type="text/javascript">
        $(function() {
            var $tb = $('textarea[id$=tb1]');
 
            $('input[id$=btnScroll]').toggle(
            function(e) {
                e.preventDefault();
                scrollArea($tb, $tb[0].scrollHeight);
            },
            function(e) {
                e.preventDefault();
                scrollArea($tb, 0);
            });
        });
 
        function scrollArea(ctrl, ht) {
            ctrl.animate({ scrollTop: ht }, 1000);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="smallDiv">
        <h2>Scroll the box contents by clicking on the Button</h2>
        <br /><br />
        <asp:TextBox ID="tb1" runat="server" TextMode="MultiLine"
        Text="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
        Rows="5"/>
        <br />
        <asp:Button ID="btnScroll" runat="server" Text="Scroll"/>
        <br /><br />
        Tip: The Text can be scrolled both downwards and upwards.
    </div>
    </form>
</body>
</html>

When the user clicks on the button (btnScroll), we toggle the click behavior. On the first click, we cancel the postback by using e.preventDefault() and then call a function called scrollArea() passing in the textarea and the scrollHeight. The code $tb[0].scrollHeight is for scrolling downwards

e.preventDefault();
scrollArea($tb, $tb[0].scrollHeight);

When the user clicks the button (btnScroll) again, the postback is cancelled and the scrollHeight is set to 0 (zero). This is done for scrolling upwards.

e.preventDefault();
scrollArea($tb, 0);

The scrollArea() function accepts the textarea that is to be scrolled as well as the scrollHeight. We then animate the scrollTop property to scroll upwards/downwards depending on the height parameter. The duration of the animation is set to 1000 milliseconds which provides a smooth scrolling effect

function scrollArea(ctrl, ht) {
    ctrl.animate({ scrollTop: ht }, 1000);
}

The code here assumes that you are not scrolling the textarea manually and then clicking the Scroll button.
I hope you found this article useful and I thank you for viewing it.

Moving data between two ListBoxes Using jQuery and Asp.Net

2010-02-15T09:51:00.000-08:00

Recently a new version of jQuery was released. This version is 1.4. As with any new version, ultimately you see what used to take you several lines of code, now rolled up into a single line of code. I'm going to demonstrate a question I've been asked many times on forums and that is how to move selected items from one &lgt;select> element to another. I'll show you how you could do it using jQuery 1.3.2 and how to minimize the code by using the new 1.4 library. Before we begin, the new version can be found here.

The HTML
The HTML for this is pretty straight forward. It's simply two elements side by side with two buttons between them. Here's what it looks like:

<form method="get">             
      <select id="SelectLeft" multiple="multiple">
            <option value="1">Australia</option>
            <option value="2">New Zealand</option>
            <option value="3">Canada</option>
            <option value="4">USA</option>
            <option value="5">France</option>
      </select>
           
      <input id="MoveRight" type="button" value=" >> " />
      <input id="MoveLeft" type="button" value=" << " />
       
      <select id="SelectRight" multiple="multiple">          
      </select>
</form>

jQuery 1.3.2

Below is the code to move the selected items from each <select> element.

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>   
    <script language="javascript" type="text/javascript">
        $(function() {
            $("#MoveRight,#MoveLeft").click(function(event) {
                var id = $(event.target).attr("id");
                var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
                var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
 
                var selectedItems = $(selectFrom + "option:selected");
                var output = [];               
                $.each(selectedItems, function(key, e) {                   
                  output.push('<option value="' + e.value + '">' + e.text + '</option>');
                                });
               
                $(moveTo).append(output.join(""));               
                selectedItems.remove();
            });
        });
    </script>

I've bound one event handler for the button clicks. To decide which direction the selected items should go, I'm using the ID of the button that fired the event:

var id = $(event.target).attr("id");
var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";

Next I create an empty array and loop through every selected item and add it to the end of the array:

var output = [];               
$.each(selectedItems, function(key, e) {                   
      output.push('<option value="' + e.value + '">' + e.text + '</option>');
});

Then I append it to the end of the <select> element and remove the moved items:
$(moveTo).append(output.join(""));
selectedItems.remove();

Overall I think that's a good approach. In jQuery 1.4 we can make this better!

jQuery 1.4

In the new jQuery library, the team has introduced a new function called toArray. This retrieves all the DOM elements contained in the jQuery set, as an array. So here's the code below:

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            $("#MoveRight,#MoveLeft").click(function(event) {
                var id = $(event.target).attr("id");
                var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
                var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
 
                var selectedItems = $(selectFrom + " :selected").toArray();
                $(moveTo).append(selectedItems);
                selectedItems.remove;
            });
        });
    </script>

The first thing you'll notice is the code has been reduced. Thanks to the toArray function, I have eliminated the need to loop through the selected items. Now they're returned as an array

var selectedItems = $(selectFrom + " :selected").toArray();

And to add them to the <select> element, I no longer need to use the join function, I simply append them: $(moveTo).append(selectedItems);
Nice and simple!

Inline Editing Using jQuery and Ajax in Repeater control

2010-02-01T11:05:00.000-08:00

Repeater control is one of the light weight control when compared to the other databound controls. It provides more flexibility on the layout of data displayed and the control itself will not render any additional HTML like GridView and DataList control do. It only renders the HTML we specified in the template columns which makes it light weight when compared to other controls.

Repeater control as such will not provide edit/update functionalities for the data.

In this article, we will overcome this difficulty and provide an edit update feature similar to GridView control using the powerful jQuery library and Ajax.
Refer the below figure to understand better.

Steps

Open Visual Studio 2008, Click File >Website and choose ASP.Net Website.
Select a language of your choice. I have selected C#. You can name your website as per your need.
Drag a Repeater control from the data tab of the Visual Studio.
You can add a Sql server Express database in App_Data Folder and create a table called Employee with all the necessary fields. Enter some sample data to display in the Repeater control.
Specify the HeaderTemplate, ItemTemplate and FooterTemplate to display the employee data in tabular format. Bind the Repeater control from codebehind by fetching employee detail from the express database we have created in App_Data folder.

Refer the below code,
ASPX

<asp:Repeater ID="rpEmployee" runat="server">
    <HeaderTemplate>
    <table border="0" ID="tblEmployee">
        <tr id="Tr2" runat="server" style="">
            <th id="Th1">
            </th>
            <th id="Th2">
            EmpID</th>
            <th id="Th3">
            EmpName</th>
            <th id="Th4">
            Department</th>
            <th id="Th5">
            Age</th>
            <th id="Th6">
            Address</th>
       </tr>                   
    </HeaderTemplate>
    <ItemTemplate>
      <tr ID='<%# Eval("EmpID") %>'>
                    <td>                       
                        <input type="button" value="Edit"/>
                        <input type="button" value="Update" style="display:none" />
                        <input type="button" value="Cancel" style="display:none" />
                    </td>
                    <td>
                       <%# Eval("EmpID") %>
                    </td>
                    <td>
                        <%# Eval("EmpName") %>
                    </td>
                    <td>
                        <%# Eval("Department") %>
                    </td>
                    <td>
                        <%# Eval("Age") %>
                    </td>
                    <td>
                      <%# Eval("Address") %>
                    </td>
       </tr>   
    </ItemTemplate>
    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:Repeater>

CodeBehind

protected void Page_Load(object sender, EventArgs e)
    {
            rpEmployee.DataSource = GetEmployee("Select * from Employee");
            rpEmployee.DataBind();
    }
    public DataTable GetEmployee(string query)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString);
        SqlDataAdapter ada = new SqlDataAdapter(query, con);
        DataTable dtEmp = new DataTable();
        ada.Fill(dtEmp);
        return dtEmp;
    }

Execute the page and you can see the employee details in tabular view with an edit button.

Next, we will make the Repeater control’s row editable similar to the inbuilt edit feature of GridView control using jQuery library.

Providing Edit Update Feature

When the user clicks the edit button, we will hide the edit button and enable update & cancel button for that row. Just like GridView control, we will also populate the table cell value of the editing row in a textbox control to edit. After editing the value and on clicking Update button, we call a page method called UpdateEmployee() to update the employee details in the database using the jQuery’s ajax() method.

First, we will develop our page method UpdateEmployee() in our codebehind to update the employee details that is passed to it from jQuery’s ajax method.

[WebMethod]
   public static string UpdateEmployee(string empid,string name,string dept,string age,string address)  
    { 
        string UpdateQuery = "UPDATE [Employee] SET [EmpName] = @name, [Department] =  @dept, [Age] = @age, [Address] = @address WHERE [EmpID] = @empid";
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString);
        con.Open();
        SqlCommand com = new SqlCommand(UpdateQuery, con);
        com.Parameters.Add("@name", SqlDbType.VarChar, 50).Value = name;
        com.Parameters.Add("@dept", SqlDbType.VarChar, 50).Value = dept;
        com.Parameters.Add("@age", SqlDbType.Int, 4).Value = age;
        com.Parameters.Add("@address", SqlDbType.VarChar, 50).Value = address;
        com.Parameters.Add("@empid", SqlDbType.Int, 4).Value = empid;       
        int n = com.ExecuteNonQuery();
        con.Close();
 
        return n.ToString();
    }

As we all know, a page method should be public static and should be decorated with WebMethod attribute. You need to include the System.Web.Services namespace for the WebMethod attribute to work. To know more about page methods and consuming it from jQuery, please read Using JQuery in ASP.Net AJAX Applications – Part 1.

Next, we will move to the client side part of our implementation where we can provide an editing option to the user. Refer the above FAQ’s to integrate jQuery library into our project.

The following jQuery code will help us to do the rest of our operations.

<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script language="javascript">
        $(function() {
            $("#tblEmployee > tbody > tr ").each(function() {
                var TRID = $(this).attr("id");
                $(this).find("td:first > input[value=Edit]").click(function() {                   
                    ResetOtherRowEdit();
                    ChangeTableCellToTextbox(TRID);
                    $(this).hide();
                    return false;
                });
 
                $(this).find("td:first > input[value=Update]").click(function() {
                    UpdateRow(TRID);
                });
 
                $(this).find("td:first > input[value=Cancel]").click(function() {
                    CancelEdit(TRID);
                });
 
            });
        });
 
        function ChangeTableCellToTextbox(RowID) {
            $("#" + RowID + "> TD").filter(function() {
                if ($(this).find("INPUT").html() == null & !($(this).is(":nth-child(2)"))) {
                    return true;
                }
            }).each(function() {
                var TDvalue = $(this).html();               
                var replacevalue = "<input type=text value=\"" + TDvalue + "\"></input>";
                $(this).html(replacevalue);
            });
 
            $("#tblEmployee > tbody > tr[id="+ RowID +"] > td:first> input[value=Update]").show();
            $("#tblEmployee > tbody >  tr[id=" + RowID + "] > td:first> input[value=Cancel]").show();
        }
 
        function UpdateRow(RowID) {           
            var empid = $("#" + RowID + "> TD:nth-child(2)").html();
            var empname =$("#" + RowID + "> TD:nth-child(3) > input[type=text]").val();
            var dept = $("#" + RowID + "> TD:nth-child(4) > input[type=text]").val();
            var age = $("#" + RowID + "> TD:nth-child(5) > input[type=text]").val();
            var address =$("#" + RowID + "> TD:nth-child(6) > input[type=text]").val();
 
            var options = {
                type: "POST",
                url: "RepeaterEdit.aspx/UpdateEmployee",
                data: "{\"empid\":\"" + empid + "\",\"name\":\"" + empname + "\",\"dept\":\"" + dept + "\",\"age\":\"" + age + "\",\"address\":\"" + address + "\"}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    if (response.d != "") {
                        if (response.d == "1") {
                            alert("Updation Successful");
                            CancelEdit(RowID);
                        }
                        else {
                            alert("Updation failed!");
                        }
                    }
                }
            };
            //Call the PageMethods
            $.ajax(options);         
        }
 
        function CancelEdit(RowID) {
            $("#" + RowID + "> TD").filter(function() {
                if ($(this).find("INPUT[type=text]").val() != null) {
                    return true;
                }
            }).each(function() {              
                $(this).html($(this).find("INPUT[type=text]").val());
            });
          $("#tblEmployee > tbody > tr[id=" + RowID + "] > td:first> input[value=Update]").hide();
          $("#tblEmployee > tbody >  tr[id=" + RowID + "] > td:first> input[value=Cancel]").hide();
          $("#tblEmployee > tbody >  tr[id=" + RowID + "] > td:first> input[value=Edit]").show();
      }
 
      function ResetOtherRowEdit() {
          $("#tblEmployee > tbody > tr ").each(function() {
              var TRID = $(this).attr("id");
              if ($(this).find("td:first > input[value=Update]").css("display") == "inline") {
                  CancelEdit(TRID);
              }
          });
      }       
    </script>

Execute the page and see it in action.

The ajax() method uses JSON and POST method to send the employee data to the page method. Once the data is updated successful, the page method will return 1 which indicates success(No of rows affected in ExecuteNonQuery() in our case). On success, you will see a success alert message.

Things to consider

The above jQuery code will call the page method even if you have not changed the details in any cell. You can modify UpdateRow() method to call the page method only if the value is changed by comparing with initial table cell value.
The above jQuery code will change the table cell to textbox by populating its value to textbox directly. You can get the employee detail for that row using the employeeid from the server to get the latest data. You can write one more page method that can return the employee detail in JSON format and populate the textboxes.

How to read, insert, update and delete from an XML file Using LINQ to SQL

2010-02-01T10:47:00.000-08:00

This is an introduction to Linq to XML showing how to read, insert, update and delete from an XML file.
First of all lets look at the XML file I will be using:

<?xml version="1.0" encoding="utf-8"?>
<Customers>
 <Customer ID="1">
  <Forename>Joe</Forename>
  <Surname>Stevens</Surname>
  <DOB>31/01/1983</DOB>
  <Location>Sydney</Location>
 </Customer>
 <Customer ID="2">
  <Forename>Tom</Forename>
  <Surname>Male</Surname>
  <DOB>02/02/1977</DOB>
  <Location>Brisbane</Location>
 </Customer>
 <Customer ID="3">
  <Forename>Emily </Forename>
  <Surname>Stevens</Surname>
  <DOB>14/01/1988</DOB>
  <Location>Sydney</Location>
 </Customer>
 <Customer ID="4">
  <Forename>Lee</Forename>
  <Surname>Phipps</Surname>
  <DOB>05/12/1982</DOB>
  <Location>Melbourne</Location>
 </Customer>
 <Customer ID="5">
  <Forename>Saul</Forename>
  <Surname>Stevens</Surname>
  <DOB>02/08/1984</DOB>
  <Location>Perth</Location>
 </Customer>
</Customers>

As you can see it’s a very simple list of customers. In my project I have also created a Customer class to represent each customer:

public class Customer
{
    public int ID { get; set; }
    public string Forename { get; set; }
    public string Surname { get; set; }
    public string DOB { get; set; }
    public string Location { get; set; }
}

Firsly I want to be able to select a single customer based on their ID. The following method shows how to load the XML file and query it to find the customer we want, and return the data as a single Customer object:

public static Customer GetCustomer(int customerID)
{
    XDocument data = XDocument.Load(HttpContext.Current.Server.MapPath("~/Data/Customers.xml"));

    return (from c in data.Descendants("Customer")
            where c.Attribute("ID").Value.Equals(customerID.ToString())
            select new Customer()
            {
                ID = Convert.ToInt32(c.Attribute("ID").Value),
                Forename = c.Element("Forename").Value,
                Surname = c.Element("Surname").Value,
                DOB = c.Element("DOB").Value,
                Location = c.Element("Location").Value

            }).FirstOrDefault();
}

Firstly the XML document is loaded using the XDocument class. I then use Linq to look at all the Customer elements and find the one where the ID attribute matches the value passed to the method. The Customer object is then populated with each element within the Customer element.
I’ve created a simple web form that uses an ObjectDataSource with this method to display a customer based on the ID in the query string:

<asp:DetailsView
    ID="dvCustomer"
    DataSourceID="odsCustomer"
    runat="server">
</asp:DetailsView>

<asp:ObjectDataSource
    ID="odsCustomer"
    TypeName="LinqToXml.Data.DAL"
    SelectMethod="GetCustomer"
    runat="server">
    <SelectParameters>
        <asp:QueryStringParameter Name="customerID" QueryStringField="id" DefaultValue="1" />
    </SelectParameters>
</asp:ObjectDataSource>

The page creates the following table:

To get a list of all customers is very similar to getting a single customer, although the method will return a generic list of Customer objects:

public static List<Customer> GetCustomers()
{
    XDocument data = XDocument.Load(HttpContext.Current.Server.MapPath("~/Data/Customers.xml"));

    return (from c in data.Descendants("Customer")
            orderby c.Attribute("Surname")
            select new Customer()
            {
                ID = Convert.ToInt32(c.Attribute("ID").Value),
                Forename = c.Element("Forename").Value,
                Surname = c.Element("Surname").Value,
                DOB = c.Element("DOB").Value,
                Location = c.Element("Location").Value

            }).ToList();
}

Here I am also using the orderby operator to order the results by the value of the Surname element.
I have a single method called Save which is used for both inserting and updating. It accepts a Customer object and performs an insert or update depending on the ID value of that object:

public static void Save(Customer customer)
{
    XDocument data = XDocument.Load(HttpContext.Current.Server.MapPath("~/Data/Customers.xml"));

    if (customer.ID > 0)
    {
        XElement customerElement = data.Descendants("Customer").Where(c => c.Attribute("ID").Value.Equals(customer.ID.ToString())).FirstOrDefault();
        if (customerElement != null)
        {
            customerElement.SetElementValue("Forename", customer.Forename);
            customerElement.SetElementValue("Surname", customer.Surname);
            customerElement.SetElementValue("DOB", customer.DOB);
            customerElement.SetElementValue("Location", customer.Location);

            data.Save(HttpContext.Current.Server.MapPath("~/Data/Customers.xml"));
        }
    }
    else
    {
        XElement newCustomer = new XElement (   "Customer",
                                                new XElement("Forename", customer.Forename),
                                                new XElement("Surname", customer.Surname),
                                                new XElement("DOB", customer.DOB),
                                                new XElement("Location", customer.Location)
                                            );

        newCustomer.SetAttributeValue("ID", GetNextAvailableID());

        data.Element("Customers").Add(newCustomer);
        data.Save(HttpContext.Current.Server.MapPath("~/Data/Customers.xml"));
    }
}

In this method I load the XML document as before and then check the value of customer.ID to see whether to insert or update.

If the value is greater than zero then it is an update. Firstly I get the element matching the ID using the Where extension method and a lambda expression using the given ID. If the element is found (not null), I use the SetElementValue method to update the values of the child elements with their new values. After this is done I call save on the XDocument and pass the URL on the original XML file to update it.

If customer.ID is zero then I know this is a new record and I need to perform an insert. This is done by creating a new XElement with the name Customer, then by creating a list of XElements for the children. I then set the ID attribute on the Customer element by calling a method called GetNextAvailableID which I’ll explain in a moment. Now my element is ready to be inserted so using my XDocument I use the Element method to get the Customers element and the Add method to add my new element to it. As with the update I then need to call the save method on the XDocument.

The GetNextAvailableID method simply finds the highest ID used in the XML document and adds one to it:

private static int GetNextAvailableID()
{
XDocument data = XDocument.Load(HttpContext.Current.Server.MapPath("~/Data/Customers.xml"));

return Convert.ToInt32(
(from c in data.Descendants("Customer")
orderby Convert.ToInt32(c.Attribute("ID").Value) descending
select c.Attribute("ID").Value).FirstOrDefault()
) + 1;
}

public static void Delete(Customer customer)
{
XDocument data = XDocument.Load(HttpContext.Current.Server.MapPath("~/Data/Customers.xml"));

XElement customerElement = data.Descendants("Customer").Where(c =&gt; c.Attribute("ID").Value.Equals(customer.ID.ToString())).FirstOrDefault();
if (customerElement != null)
{
customerElement.Remove();
data.Save(HttpContext.Current.Server.MapPath("~/Data/Customers.xml"));
}
}

As with the update code I’m selecting the element based on the customer ID. Once I have that element all I need to do is call the Remove method on it, then save the XDocument.

I have put all this code to use with a GridView and ObjectDataSource in the following form:

<div>
<table><tbody>
<tr>                 <th>
Forename</th>                 <td>
<asp:textbox id="txtForename" runat="server">
</asp:textbox></td>             </tr>
<tr>                 <th>
Surname</th>                 <td>
<asp:textbox id="txtSurname" runat="server">
</asp:textbox></td>             </tr>
<tr>                 <th>
DOB</th>                 <td>
<asp:textbox id="txtDOB" runat="server">
</asp:textbox></td>             </tr>
<tr>                 <th>
Location</th>                 <td>
<asp:textbox id="txtLocation" runat="server">
</asp:textbox></td>             </tr>
</tbody>         <tfoot>
<tr>                 <td colspan="2">
<asp:button id="btnAddCustomer" onclick="btnAddCustomer_Click" runat="server" text="Add Customer">
</asp:button></td>             </tr>
</tfoot>     </table>
</div>
<div>
<asp:gridview autogeneratecolumns="false" autogeneratedeletebutton="true" autogenerateeditbutton="true" datakeynames="ID" datasourceid="odsCustomers" id="gvCustomers" runat="server">
<columns>
<asp:boundfield datafield="Forename" headertext="Forename">
<asp:boundfield datafield="Surname" headertext="Surname">
<asp:boundfield datafield="DOB" headertext="DOB">
<asp:boundfield datafield="Location" headertext="Location">
</asp:boundfield></asp:boundfield></asp:boundfield></asp:boundfield></columns>
</asp:gridview>

<asp:objectdatasource dataobjecttypename="LinqToXml.Customer" deletemethod="Delete" id="odsCustomers" runat="server" selectmethod="GetCustomers" typename="LinqToXml.Data.DAL" updatemethod="Save">
</asp:objectdatasource></div>

The only code required on the web form is the code to add a new customer, as the selecting, updating and deleting is handled by the ObjectDataSource by calling the methods discussed above:

protected void btnAddCustomer_Click(object sender, EventArgs e)
{
Customer customer = new Customer()
{
Forename = txtForename.Text.Trim(),
Surname = txtSurname.Text.Trim(),
DOB = txtDOB.Text.Trim(),
Location = txtLocation.Text.Trim()
};

Data.DAL.Save(customer);

ClearForm();
gvCustomers.DataBind();
txtForename.Focus();
}

private void ClearForm()
{
txtForename.Text = string.Empty;
txtSurname.Text = string.Empty;
txtDOB.Text = string.Empty;
txtLocation.Text = string.Empty;
}

My resulting form looks like this:

Open all Hyperlinks in Separate Window using jQuery

2010-01-20T10:06:00.000-08:00

This is a simple but very powerful script which will prove the jQuery library's ability. The following script will make all the hyperlinks in the page bolder and add opens the link in new window if clicked.

<script src="../_scripts/jquery-1[1].3.2.js" type="text/javascript"></script>
<script language="javascript">
$(function() {
$('A').css('font-weight', 'bold').attr('target', '_blank');
});
</script>

How to alert when the form is Submitted or Posted to Server using jQuery

2010-01-20T10:04:00.000-08:00

Sometimes, we require intercepting whenever a page is posted or submitted to the server.
The below jQuery snippet will alert teh user with a confirm box with teh message "Are you sure to continue?" Clicking "Yes" will post the page and "No" will cancel the submit.

<head runat="server">

<title></title>

<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script language="javascript">

$(document).ready(function() {

$("form").submit(function() {

return confirm('Are you sure to continue?');

});

});

</script>

Top 15 Elements All Top Web Sites Should Have

2010-01-10T12:11:00.000-08:00

There are a lot of details to consider when designing and developing a web site. In reality, it can seem like an endless list — but if you look carefully you’ll see that there are certain elements that are more important than others, elements that are used consistently among the most successful sites.
Once you’ve completed the Planning Stage of your website, the rest of the elements fall into broad categories ranging from User Interface Design to Content Creation to actual Development. Of course, there are also the issues surrounding Search Engine Optimization (SEO) — but we’ll save that for another day…

With that in mind, here are the 15 elements that should always be included on any top web site.

1. Good Visual Design

First things first… Visual design. I don’t know about you, but if I go to a web site that is not visually pleasing, it is a quick turn off.

That’s not to say that every top website needs an incredible visual design — but if a site looks like it hasn’t been updated since 1994, it’s just not going to be associated with other great websites.

A clean and simple design is usually all you need. Bells and whistles are nice, but I’m one who tends to go with the “less is more” theory. You don’t want your design to be over crowded. You just want it to look good so it can stand out from your competitor(s) in the minds of your potential clients.

First impressions are key. Although good design alone will not keep someone on your site — an eye-catching design will, at the very least, grab their attention long enough to take a look around.

2. Thoughtful User Interface

User Interface / NavigationAlong with good design comes a good user interface. The user interface is the foundation of any good functional web site. When designing a site, you’ll need to take into consideration your average user. Who is going to be visiting your web site — who is your ideal customer? Are they tech-savy? Are they computer illiterate?

It’s helpful to create an image of your ideal visitor and have them in mind when planning out the design for your site. Be sure you offer everything on your site that they would want to find before buying from you or becoming a subscriber.

You’ll want to be sure that your navigation is easy to spot and consistent throughout the entire web site. Make it obvious where the user should click both in terms of your primary navigation, as well as for links within your content areas.

3. Primary Navigation Above The Fold

Part of having an easy to navigate web site is ensuring that the primary means of navigation — links to the key areas of your site — are kept above the fold. With today’s large computer monitors and growing screen resolutions “above the fold” is generally considered to be within the top 500-600 pixels of your site design.

Elements to include here are your logo (which should link back to your home page), as well as links to the main sections of your site. If you can link to sub-pages here that is great, but in most cases that will over-clutter your design.

For example put “Home | About | Services | FAQ | Contact” in a very easy to find location at the top of your site. You can place sub-links such as About-Bio / About-Resume somewhere else, such as in your sidebar or as sub-links under the main page title of that section, etc.

Consistency is key here — be sure to place both your primary and sub-navigational links in the same spot throughout the various pages of your web site.

4. Repeat Navigation In The Footer

If you use images (or even flash) for your main navigation, it’s especially important to offer a duplicate set of navigation links in your footer. Even if you use text links at the top, the duplication is still helpful. You want to make it as easy as possible for people to find the content they are looking for on your site.

Often times the footer will link to additional information — such as Terms of Service — as well. Things that should be easy to find, but not necessarily something you want taking up real estate on the primary navigation area of the site

5. Meaningful Content

You know the saying… “Content is King” — you might have a pretty web site which will catch someone’s eye, but if the content is no good, you can be willing to bet that they aren’t going to stick around.

When writing the copy for your web site, it’s important to provide helpful, knowledgeable information about your company, products, services, etc. If you’re running a blog, informative articles related to your area of expertise are incredibly helpful as well.

While it’s important to sell yourself or your company, you also don’t want to oversell, either. Particularly in a blog setting — people reading a blog don’t want to hear all about “me me me” — they want to know how you can help them.

6. A Solid About Page

Among the top 10 most popular pages of my own site (after the home page, blog, 3 specific blog posts and my portfolio) is the About page. I have more clicks to my about page than to my services or portfolio pages, if you can believe that!

It’s simply because people are curious. They want to know who is behind a company or a blog. I was personally quite shy about including a photo on my own bio page, but finally did it a few months ago. It’s amazing what the sense of curiosity does — I myself am always clicking on about pages too, trying to find out more about the designer or writer, etc.

Include information on your background and how it pertains to your own business and expertise, etc. The about page gives potential clients a little bit more information about you and can often help create a more personal bond. If they are reading your writing and know a bit more about you, they’ll have a better sense of connection and better be able to relate to you on another level.

More often than not, a potential client will select the company with a “real” person behind it, rather than the faceless organization that refuses to get even a little bit personal.

7. Contact Information

Contact InformationNothing can turn off a prospective client more than not being able to find a way to contact you. If they’re interested in your services, and can’t find a simple contact page with a way to get in touch and hire you they’re going to end up going over to the competition.

Ideally you’ll want to give more than one method of contact. At the very least an email address and contact form. To make you more “real” though you should try to include a phone number (and if possible a mailing address) as well. I know many freelancers work from a home office – as do I. A quick solution is to get a separate phone line for business calls, as well as either a PO Box or other mailing service address.

Keep in mind that these are tax deductible expenses and makes you look that much more professional than someone who only includes an email address. To other home business owners in the same boat, it might not make a difference. But if you work with any larger or corporate clients, they’ll see a public phone number and address as an added sign of stability and that could play a small part in them choosing you over someone else.

8. Search

If you have a large web site or blog, having a search field is incredibly helpful, as well. There’s nothing like wading through hundreds of pages to find specific content without a search feature. If a potential customer can’t find something easily on your site, but Joe Designer over there does… odds are they are going to go with Joe whose content is easy to search through.

You can often use a Google Search on your site, or if you have WordPress (or another blogging platform or CMS / Content Management System) this will be fairly easy to accomplish. It’s not quite as easy to set this up with a static html site, but there are still services out there that will let you incorporate a functional search box onto your site.

9. Sign-Up / Subscribe

RSS SubscriptionIf your web site offers content on a consistent basis — such as with a blog — you’ll want to make it as easy as possible for people to sign up for updates.

This is something else that’s extremely easy to add if you have a WordPress blog. By default they’ll provide you with a feed address. But if you want to step it up a notch, you’ll want to sign up for a free account with FeedBurner. Better yet, you might consider using the FeedBurner FeedSmith plugin that will help re-direct all feeds through your FeedBurner account for easy tracking of your subscribers.

If you don’t have a blog, but still want to offer subscriptions to an email newsletter, for example, there are many companies that will let you setup and manage a mailing list. They will provide you code for your site to enable your web site visitors to sign up for updates using their email address. (FeedBurner allows you to collect email addresses too, btw). In some ways this is better than an RSS subscription because you are able to collect email addresses of potential prospects. While you can keep track of subscription numbers and other generic statistics, RSS subscribers get your updates via feed reader and have no need to provide an email address.

10. Sitemap

There are two kinds of sitemaps – one for humans and one for the search engines. An html (or php, etc.) sitemap meant for visitors to your site can be an invaluable tool for finding just what they are looking for.

Creating a sitemap – a structured list of all pages of a web site – is especially useful if you are unable to add a search feature to your site. A link to the sitemap is another item that is helpful to place down in the footer of your site, as well. A good sitemap will list out every page of your site in a hierarchial format – clearly showing the relationship of pages in terms of primary pages with sub-pages and sub-sub-pages, etc.

11. Separate Design from Content

Long gone are the days of using html tables for layout and design. The best developed sites use a combination of XHTML and CSS (Cascading Style Sheets), which create a separation of design vs content.

With use of tags you can create containers for various areas of text and images on your page. Without a corresponding CSS file you’ll see just the basics – text – which is what the search engines want to see, too.

By linking to an external CSS file in order to separate your content from the design, it leaves your html page with mostly nothing but actual relevant text in your source code. The separate CSS file is what specifies the fonts, colors, background images, etc. for your site design.

What’s great about this is you can update just one CSS file and have the change made site-wide (no longer having to go into each and every html page of a static site, to change your main link color from blue to green, for example).

With this separation of content from design, the search engines no longer have to wade through all of the excess code to find out if your content is relevant, either. And with separate files, the content can load quicker, too – always a good thing in the mind of visitors to your site.

12. Valid XHTML / CSS

It’s not just enough to develop your site using XHTML and CSS, though. It has to be accurate code. Two invaluable tools for checking your source code are offered by the World Wide Web Consortium (W3C):

W3C Markup Validation Service

W3C CSS Validation Service

There are many reasons to write valid code… With valid code, you are a few steps closer to ensuring your site will look good across the different web browsers (see number 13 below) and will help you with the search engines, too. If your site is built to current web standards, the search engines can easily wade through your content.

Not to mention it just shows that you know what you are doing. Yes, many clients don’t know the difference, but a few do – and specifically request standards compliant code. If you can offer this but your competitor can’t – that gives you an extra edge.

And besides this, other web developers are likely to check out the source code of a site to see what’s under the hood… both out of sheer curiosity, and just because they can!

13. Cross Browser Compatibility

Although you might live and breathe inside Firefox, your client may not. There’s a good chance your client is using Internet Explorer. Unfortunately there’s an even better chance they’re using Internet Explorer 6 (please don’t get me started on this issue – lets just say I know I’m not the only web developer who wishes this browser will simply GO AWAY!)

It’s imporant that your own web site and the site(s) you create for customers display well in as many of the mainstream web browsers as possible. If you can make them compatible across platforms too, that’s ideal. Most end users are on a PC so this is probably the most important platform to target. However many people in the creative fields are on a Mac, so if this is your audience they are important to pay attention to as well.

Unfortunately most people aren’t lucky enough to have both a PC and a Mac (not to mention Linux, etc.) but with the help of a site called Browser Shots you can enter a URL – select from a variety of web browsers across different platforms – and have them create screenshots for you. Very helpful if you’re on a PC running Vista for example, where you no longer have access to an old copy of IE6.

14. Web Optimized Images

When designing for the web, it’s important that you save all your images in a compressed format. Not too much that your images become pixelated, but as much as possible while retaining quality.

If you’re accustomed to doing print work, you know that 300dpi is the standard. Not the case with web sites, though. When designing for the screen you’ll want to save your images at 72dpi which will make for a much smaller file size (aka quicker download time for your web visitors).

Programs like Adobe Photoshop have a “Save for Web” feature that will automatically convert your image to 72dpi if you forgot, as well as give you a variety of compression settings when saving your imges. For web this will likely be either png, jpg or gif depending on the particular usage.

15. Statistics, Tracking and Analytics

Although this element is behind the scenes and not one you’re likely to know about as the web visitor — as a web site owner it is crucial, if not down-right addictive!

There are many services that offer tracking of web site statistics which include information such as:

How many hits does my site receive?

How many of these are from unique visitors?

How are people finding my web site?

What search terms are they finding me under?

What web sites link to me?

What are the most popular pages on my site?

Who is my average visitor (platform / browser / screen resolution)?

It’s actually quite amazing what kind of information you can keep track of with a good analytics program. Perhaps the most popular site for this is Google Analytics which offer a very robust (and free) tracking solution.

If you want to monitor your web site’s performance and figure out how you can improve your site, having a good stats package is key!

Top 10 SEO Techniques For Any Website

2010-01-10T11:55:00.000-08:00

SEO is such a hot topic these days. How do you get your web site within the first page or two of the search engines? How do you increase your Google page rank?

There are companies who dedicate themselves full time to doing SEO at a pretty penny. Something a lot of people can’t necessarily afford to pay for or spend the time on.

However, there are some simple things you can do when building your site that will help increase your chances of having good results. In no particular order, below are 10 of these items…

1. Title Tag

Near the very top of a web site’s source code you’ll find various meta tags — the standard ones being the Title, Description and Keyword tags. The title tag is technically not a meta tag, though it is commonly associated with them. The title tag plays such a large role in the indexing of your web site, that it is considered the most important of the three.

A page title is the first thing a search engine will look at when determining just what the particular page is about. It is also the first thing potential visitors will see when looking at your search engine listing.

It’s important to include a keyword or two in the title tag — but don’t go overboard – you don’t want to do what’s known as “keyword stuffing” which does nothing but make your web site look like spam. Most people will include either the company name, or title of the particular page here, as well.

2. Meta Tags

Meta TagsThere are two primary meta tags in terms of SEO — the description and the keyword tag. It’s debatable whether the search engines use the description tag as far as ranking your results. However it is one of the more important tags because it is listed in your search result — it is what users read when your link comes up and what makes them decide whether or not to click on your link.

Be sure to include a few relevant keywords in this tag, but don’t stuff it with keywords either. The description tag should read like a sentence — not a keyword list.

Due to “keyword stuffing” many search engines now completely disregard the keyword tag. It is no longer nearly as important as it was years ago, however it doesn’t hurt to include them in your source code.

When creating your keyword list, you’ll want to think of the specific terms people will type in when searching for a site like yours. Just don’t go overboard — too many duplicates are not a good thing (as in “web designer” “web designers” “custom web designer” “html web designer” “your state here web designer” – you get the idea). Those are all basically the same, so pick one or two variations at the most and move onto the next keyword.

3. Proper Use of Heading Tags

This is a very important element to consider when writing out your site copy. Use of heading tags helps users, web browsers and search engines alike know where the major key points of your copy are.

Your main page title should use the "h1" tag — this shows what your page is about. Use of additional tags, such as "h2" and "h3" are equally important by helping to break down your copy. For one, you’ll see a visual break in the text. But as far as the search engines are concerned, it will automatically know what your topics are on a page. The various heading tags give a priority to the content and help index your site properly.

4. Alt Attributes on Images

Putting alt attributes on your images actually serves two purposes. In terms of SEO, putting a brief yet descriptive alt attribute along with your image, places additional relevant text to your source code that the search engines can see when indexing your site. The more relevant text on your page the better chance you have of achieving higher search engine rankings.

In addition, including image alt attributes help the visually impaired who access web sites using a screen reader. They can’t see the image, but with a descriptive alt attribute, they will be able to know what your image

5. Title Attributes on Links

Including title attributes on links is another important step that any good web site will have. That’s the little “tool tip” that pops up when you place your mouse over a link. These are especially important for image links, but equally useful for text links.

As a note, you should use descriptive text for your links. “Click here” doesn’t really tell a person – or more importantly, the search engines — what the link is. At the very least put a title tag that will explain that “Click Here” really means “Web Design Portfolio” for example. Better yet – make the main link text something like “View my web design portfolio” — this will give some value to the link showing that the resulting page is relevant to searches for portfolio’s.

6. XML Sitemap

My last post referenced the sitemaps used by web visitors to help them navigate through your site themselves. However, there’s another version — XML sitemaps — that are used by the search engines in order to index through your site, as well.

This list of ALL pages / posts / etc. of your site also includes information such as the date the page was last modified, as well as a priority number of what you feel the most important pages of your sites are. All elements that help the search engines properly find and link to all content of your site.

7. Relevant Content

Having content relevant to your main page or site topic is perhaps the most important SEO aspect of a page. You can put all the keywords you want in the meta tags and alt image tags, etc — but if the actual readable text on the page is not relevant to the target keywords, it ends up basically being a futile attempt.

While it is important to include as many keywords in your page copy as possible, it is equally as important for it to read well and make sense. I’m sure we’ve all seen keyword stuffed pages written by SEO companies that honestly don’t make much sense from the reader’s point of view.

When creating your site copy, just write naturally, explaining whatever information you’re discussing. The key is to make it relevant, and to have it make sense to the reader. Even if you trick the search engines into thinking your page is great — when a potential customer arrives at the site and can’t make heads or tails of your information and it just feels spammy to them — you can bet they’ll be clicking on the next web site within a matter of seconds.

8. Link Building

We’ve probably all heard of Google Page Rank — it seems to be every web site owner’s dream to have as high a page rank as possible. While the algorithm for determining page rank encompasses many elements, and is constantly changing, one item is the number of links pointing to your web site.

Now, you’ll want to steer clear of link farms and other spammy attempts at getting links to your site. However there are many reputable and niche directory sites that you can use to submit your web site, or specific blog articles to.

With genuine content — especially if you have a blog — you’ll be able to generate links with other web sites and blogs, as well. It’s somewhat of a give and take, in that if you link out to other sites, you’ll find sites linking back to you — and hopefully see your page rank going up, as well!

9. Social Media

Although technically not SEO, Social Media is such a growing factor in getting your web site noticed, that it’s an important element to include in your plan.

Social media ranges from social networks like Twitter, Facebook and LinkedIn — to social bookmarking sites such as Delicious, Digg, StumbleUpon and many more. There is a lot of relationship building involved, but as you build your own networks and build quality content on your web site or blog, you’ll see traffic to your web site increasing, as well.

As with any relationship, it is a give and take. Don’t just expect to join a site like Twitter for the pure sake of pushing your content. That just won’t fly — your true intentions will stick out like a sore thumb and do nothing but turn people off.

Even if you are on the site purely for networking reasons, the key is to make friends. Help out members of your network if they ask for a “retweet” or Digg, give helpful advice if asked, etc. You’ll see the same in return.

If you write a great post and have built meaningful relationships with peers in your niche, you’ll often find that friends will submit your posts and give you votes on the social bookmarking sites. The more votes you receive, the more likely your post is to be noticed by others and shared around, often resulting in additional link backs from other blogs, etc.

10. A Few SEO Don’ts — Flash and Splash

Flash PlayerAlong with any list of Do’s come the Don’ts. As far as SEO is concerned, two of these items are splash pages (often consisting of a flash animation) and all flash web sites.

Yes, flash is pretty! Full flash web sites can actually be amazing to look at — their own bit of interactive artwork. But unfortunately the search engines don’t get along well with Flash. Although there is talk of possible advancement in this area, for the most part the search engines cannot read Flash.

All that great content that you wrote for your site will not be seen by the search engines if it’s embedded into a Flash web site. As far as the search engines are concerned, your all flash web site might as well be invisible. And if the search engines can’t see your site content, a good chunk of potential customers will miss out on what you have to offer, too.

Equally as “pointless” are splash pages. Once very popular, the splash page should no longer be an important feature of any site. While splash pages used to serve as an introduction into a web site (often with a flash animation), it is no longer seen as helpful, and often times might actually annoy visitors.

For one — it’s an extra click to get into your content. Worse is when you don’t give a “skip intro” option or set of links into your main site content — because you’re essentially forcing your visitors to sit through the full animation. If you’re lucky, this will only annoy them… if not — they’ll just leave without giving your main web site a shot. And without an html link pointing into your site, the search engines have no way to continue either (unless you made use of a sitemap.xml file — but still…)

A good alternative to both issues is to make use of a flash header. There’s no problem to include a flash animation at the top of your main site, or as a feature within the content area, etc. Because this is an addition to your web site, as opposed to a full separate element.

Importance of ALT tag in SEO

2010-01-09T10:53:00.000-08:00

Alt Tag Definition:
With the help of HTML tag which provides alternative text when non-textual elements, typically images, cannot be displayed.
ALT Tag is a one of the important factor while Optimizing Image for a web page.

Alt Tag in Html:
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
Free SEO Article

Important Factor for On-page Optimization Alt Tag to Image:

Alt tag generally means the alternative tag. Alt Tag is the HTML tag that tells search engine about the images. Because search engines cannot read text in the images, so with the help of alt tag, search engines come to know about images.

Search engines crawlers are able to index text but they are unable to index the text in the images can create problems. So while making a website you can not only target search engines but the outcome will be generated through visitors.

According to Google friendly site guidelines, we have to create a website SEO friendly and it must helpful to visitors. If we are using the images in the WebPages, in such a situation, alt tag is the best option to add more beauty to your website.

Here are few Tips to add Alt Tag Text to Images:

Use ALT Tags to label every image on your web page.
Only use the most relevant keyword in ALT Tag to label your image.
Do not add unrelated keywords in ALT Tags.
Try not to make ALT Tag look like spam for search engines.
Add keyword or phrase for important images.
For other images like background images, spacers, dividing lines, table borders, and other images used for designing use alt=”” as the Alternate Text.
Do not repeat keywords.
ALT Text should be a sentence or phrase, instead of keywords separated by commas.
The correct way to use ALT Text is:”FreeWhere seo.jpg is the image name and “Free SEO Articles” is the ALT Tag added to the image so as to label it.

It is recommended to use ALT tag with every image of your web page.

Alt Tag optimization Tips:

Use alt tag for all images in the web pages and add most relevant keyword in your Alt tag.
Use keywords that are present in title tag, Meta tag and body text.
Use 2-3 relevant keywords rather than the repetition of keywords.
Use plural keywords in alt tag.
Alt tag should not be long and must not exceed more than 7 words.
Avoid using of irrelevant keywords in the alt tag that are not related to images instead use keywords that directly explain the images.