Tuesday, November 30, 2010

jQuery autocomplete with Asp.Net WCF service

jQuery autocomplete is a very good tool to provide user selection from a number of choices. We can easily create jQuery autocomplete with static JavaScript array. In this article we will see how we can use jQuery autocomplete with ASP.Net and WCF service.

In this article below version of scripts are used

jQuery version 1.4.1

jQuery UI version 1.8.6

We will create 2 example with WCF service.

First of all we will create a WCF service and configure it to response as json format.

We will bind endpoint with webHttpBinding. We will create service with name “AutoComplete” and our interface will be IAutoComplete. We will create an endpoint behavior which uses webHttp behavior. So our web.config file will have configuration as below.


<system.serviceModel> <behaviors> <serviceBehaviors> <behavior name="jQueryExamples.Services.AutoComplete.AutoCompleteBehavior"> <serviceMetadata httpGetEnabled="true" /> <serviceDebug includeExceptionDetailInFaults="false" /> </behavior> </serviceBehaviors> <endpointBehaviors> <behavior name="webHttpEndpoint"> <webHttp /> </behavior> </endpointBehaviors> </behaviors> <services> <service behaviorConfiguration="jQueryExamples.Services.AutoComplete.AutoCompleteBehavior" name="jQueryExamples.Services.AutoComplete.AutoComplete"> <endpoint address="" binding="webHttpBinding" contract="jQueryExamples.Services.AutoComplete.IAutoComplete" behaviorConfiguration="webHttpEndpoint"> <identity> <dns value="localhost" /> </identity> </endpoint> <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" /> </service> </services> </system.serviceModel>

Now we will add reference of System.ServiceModel.Web to our application, because we will be using some of its features.

Example 1

In our first example of jQuery autocomplete, we will create a WCF service method which will return simple string array.

In our interface we will create method GetTagString which will return us string array.

[OperationContract] [WebInvoke(Method = "GET", UriTemplate = "GetTagString?term={term}", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)] string[] GetTagString(string term);

In above declaration you will be able to find that apart from OperationContract there are some more attributes are assigned to method. WebInvoke attribute is part of System.ServiceModel.Web. WebInvoke adds meta data to the service method, provide operation behavior and verb on which method will be invoked. Method parameter will define which method will be used for invocation, we will use GET. UriTemplate will define url template in the service and bind url parameter to method parameter. We will use RequestFormat and ResponseFormat as WebMessageFormat.Json.

We will implement the interface and write below method into AutoComplete.svc file.

public string[] GetTagString(string term) { string[] tags = //Your logic to retive tags return tags.Where(t => t.StartsWith(term, StringComparison.InvariantCultureIgnoreCase)).ToArray(); }

Currently I have used static array of tags and then filtered it with LINQ to response only those items which are starting with the term our autocomplete have provided.

Now on the aspx page, we will create a html input and then add a script to add auto complete to it.

<div class="ui-widget"> <label for="tags"> Tags: </label> <input id="tags" /> </div>

And our script to initialize autocomplete will be

<script type="text/javascript" language="javascript"> $(function () { $("#tags").autocomplete({ source: "Services/AutoComplete/AutoComplete.svc/GetTagString" }); }); </script>

In the JavaScript function we have created autocomplete with URL to our AutoComplete.svc as source and followed by our method name which will be requested each time user hit a key.

So it will give us output as below.


This output and method of autocomplete is not much different from the original jQuery example. The only difference is we have created autocomplete with a WCF service.

Example 2

In above example we have created autocomplete with only names. In real life scenario we have different requirements as well. One of the scenario is when we retrieve a tag name we need its id as well. So how we will achieve it with modification in our above example.

To achieve it we need to first change original jquery.ui.autocomplete.js file. We will add our function into this file so that our example works perfect.

As first item we will add a “normalize” option in the autocomplete widget options. Its declaration will be look like-

$.widget("ui.autocomplete", { options: { appendTo: "body", delay: 300, minLength: 1, position: { my: "left top", at: "left bottom", collision: "none" }, source: null, normalize: null } //Further code

Second step will be the use of normalize function in code. We will modify the call in _response method. Now this method will look like -

_response: function (content) { if (content && content.length) { content = (this.options.normalize != null) ? this.options.normalize(content) : this._normalize(content); this._suggest(content); this._trigger("open"); } else { this.close(); } this.element.removeClass("ui-autocomplete-loading"); }

We have put a check that if normalize function defined by us is not null then we will call it otherwise we will call default _normalize function. You must have question that what does this normalize function will do. Normalize function will parse our service response and pass it to autocomplete so that it can generate the output.

HTML for second example is as below -

<div class="ui-widget"> <label for="tags"> Tags object: </label> <input id="tags2" /> <label id="lblId"> </label> </div>

In html we have added a label as “lblId” and we require autocomplete to add id of the tag to this label. You can also use hidden field to store the id. We will modify our WCF method, JavaScript to initialize autocomplete

We will create a class named Tags which will have property of tag name and id.

[DataContract] public class Tags { [DataMember] public int id { get; set; } [DataMember] public string tagName { get; set; } }

We have applied DataContract attribute to our class so that it can be transferred with out WCF service.

Our WCF Service Method definition in interface will be as below

[OperationContract] [WebInvoke(Method = "GET", UriTemplate = "GetTagObject?term={term}", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)] List<Objects.Tags> GetTagObject(string term);

In above method we have returned a list of our class Tags. Hence implementation of this method will be as follows

public List<Objects.Tags> GetTagObject(string term) { List<Objects.Tags> lstTags = new List<Objects.Tags>(); //Logic to retive list of tags return lstTags.Where(t => t.tagName .StartsWith(term, StringComparison.InvariantCultureIgnoreCase)) .ToList(); }

In above example I have added items manually to list and then filtered it with LINQ to return desired output.

now we will initialize autocomplete with script

$(function () { $("#tags2").autocomplete({ source: "Services/AutoComplete/AutoComplete.svc/GetTagObject", normalize: function (items) { if (items.length && items[0].label && items[0].value) { return items; } return $.map(items, function (item) { return $.extend({ label: item.tagName, value: item.id }, item); }); }, select: function (event, data) { $('#tags2').val(data.item.tagName); $('#lblId').text(data.item.id); return false; } }); });

In above script we have specified two functions in the options. One is normalize and another is select. I will first explain normalize (which I have created with reference from jQuery’s original _normalize function) it will have items as input. When jQuery request to our service it will parse the response as json and pass it to normalize function. In first if block we have checked that whether json output contains label and value as attribute then we will return same items as output to process further. We will note here that if we always want to use label and value as class member then we do not need to modify autocomplete.js file. Now after the if block we have mapped our data with assigning tagName and id to label and value respectively. So autocomplete can parse our item and display us the autocomplete menu.

In select function we will specify that when user select an item how should it be processed with the data. In our case we have assigned tagName to our textbox value and id to our label text.

When we run our code it will provide us output as below


With this logic you can create your own autocomplete and even you can convert your dropdowns into a nice autocomplete.

Let me know if you have any query over it.



del.icio.us Tags: ,,

Wednesday, November 24, 2010

BlogEngine.NET 2.0 Release Candidate download available now

Release Candidate of BlogEngine 2.0 is available for download now.

In BlogEngine 2.0 below are some of new features are listed

  • A completely new Control Panel
  • Syntax Highlighter
  • Anti spam comment filter
  • Captcha for reduce comment spam
  • Included jQuery
  • Media element extension for HTML5 video support
  • JS/CSS minimization

Most stable version for BlogEngine is 1.6 till now.

You can find more information for BlogEngine on blogengine.codeplex.com You can try new BlogEngine 2.0 by downloading it from BlogEngine 2.0 Release Candidate

Keep up the good work BlogEngine team.

Tuesday, November 9, 2010

How To: Extension Methods with C#, definition and implementation of Extension Methods in code

We all know that there are many types in .Net Framework. Each type contains value, property(ies) and Methods. We can create derived types to use existing type properties and methods and add our own custom methods and properties. But in some cases we do not need to add any properties but only need to add some method which can be used, Extension Method provides a functionality with which we can create a method and use it with existing type and there is no need to create a derived type, isn’t it interesting?

In this article we will see how to define an Extension Method and how to use it. An Extension Method is static method to specially work with an existing type, but it will be called like it is part of original type. In coding there is not any difference between call of an y method defined in type or an Extension Method of the type.

As a type we can consider string, int, arrays of any type and even List, Collection or a DateTime can be treated as a type and we can create extension method for that.

First of all we will take example of string and create an extension method for it. Most of the time we need to check length of the string and then we need to remove extra characters beyond certain limit, lets create an extension method for it.

public static class StringExtension
        public static string TrimToLength(this string objString, int Length)
            return objString.Length > Length ? objString.Substring(0, Length) : objString;

In above example we have created a static class which will contains extension methods for string. And we have created a static method containing 2 arguments. Now first argument defines on which type the method will work and this argument is preceded with modifier this. Second argument and onwards if any will be arguments in the client calls. Method return types define what output our method will return. Now lets see how we will use above extension method in our code.

string s = "This is a dummy string";

Above implementation will generate output as below

This is a dummy string

This i

Lets take an example of DataReader. When we use data reader and we are retrieving data from various method we are using dataReader.GetString(dataReader.GetOrdinal("fieldName")) this method will raise error if the field value is null so we will modify our code to check the whether field is null or not with dataReader.IsDBNull(dataReader.GetOrdinal("fieldName")). Generally there are many fields and we need to check null for all of them. Lets see if we create extension method for it how much easily we can do for all of the fields.

public static class DataReaderExtension
    public static string GetStringOrDefault(this IDataReader dataReader, string fieldName)
        return dataReader.IsDBNull(dataReader.GetOrdinal(fieldName)) 
            ? string.Empty 
            : dataReader.GetString(dataReader.GetOrdinal(fieldName));

Implementation of the above method will be as below (dr is a SqlDataReader)


So you can see that we do not need to repeat our code of check of db null and get ordinal and we can directly use our single method.

We can create extension method for DateTime to calculate difference between date instance and current date. We can also create extension method with all the types which are inherited from System.Object.




del.icio.us Tags: ,