Archive

Archive for June, 2011

WCF 4.0 Automatic Formatting with Jquery Ajax

June 23, 2011 3 comments

As I discussed in my last post about standard endpoints, at this time I am going to look at Automatic Formatting in WCF 4.0.That is one of the great addition in WCF Web HTTP programming model(WCF RESTful). By using this feature it’s dynamically determine the format for the service operation. Previously, if consumed JSON and XML format for the same operation of the service then must have defined two different operations with explicitly annotated RequestFormat parameter of the WebGetAttribute and WebInvokeAttribute attributes.

For getting json format in WCF 3.5

[OperationContract]

[WebGet(RequestFormat = WebMessageFormat.Json)]

string GetJsonData();

For getting Xml format in WCF 3.5

[OperationContract]

[WebGet(RequestFormat = WebMessageFormat.Xml)]

string GetXmlData();

Now we have option either go with explicit as above or go with new automatic way .By default Automatic format selection is disable due to backwards compatibility and when it’s enabled, it would automatically get the best format in which to return the response. WCF infrastructure actually checks the type which is contained the request messages of Accept Header. The first priorities for media types, if it’s not found in Accept Header than its checks the content-type of the request message and if content-type would not give the suitable response than it would be used default format setting which is defined by RequestFormat parameter of the WebGetAttribute and WebInvokeAttribute attributes and at the last if there is no any default format setting than it would be used value of the DefaultOutgoingResponseFormat property.

  1. Priorities of media types in request message’s Accept Header.
  2. The content-type of the request message.
  3. The default format setting in the operation.
  4. The default format setting in the WebHttpBehavior.

Automatic format selection depends on AutomaticFormatSelectionEnabled property. It can be enabled programmatically or using configuration, for getting the clarification I would like to show example of it with Jquery, using  jquery I will be getting the different  format by calling the same operation of the service, for keeping it simple I am enabling the AutomaticFormatSelectionEnabled through standard endpoints, so let’s start it.

First I am going to create an empty web application JqueryWithWCF and hosting it at IIS.

I am going to add following items in the solution.

  • WCFService item named RestfulService.svc , 
  • html page named jqueryPage.htm
  • jquery scripts file.

We have to add System.ServiceModel.Web reference for working with WCF RESTful services.

Now let’s look at the IRestfulService.cs code

namespace WCFRestfulService
{
    [ServiceContract]
    public interface IRestfulService
    {
        [OperationContract]
        [WebGet(UriTemplate = "/data")]
        string GetData();
    }
}

I added ServiceContract attribute at intrface to expose the service and OperationContract attribute for expose the operation out of the world ,now we have to add WebGet attribute with property name UriTemplate=”/data”, it means, it can be called using UriTemplate property name.

Look at the RestfulService.cs code

namespace WCFRestfulService
{
    public class RestfulService : IRestfulService
    {
        public string GetData()
        {
            return "WCF 4.0 has introduced
            a new property \"automaticFormatSelectionEnabled\"";
        }
    }
}

There is nothing special I did, just implemented IRestfulService interface and return a string.

Here is very key part for enabling the Automatic formate, we have Three different ways to enable the automaticFormatSelectionEnabled ,

  1. Using Coding with ServiceHost object we can enable it.
  2. Using webhttp behavior option
  3. Using the standard endpoints

I am going with standard endpoints, because in standard endpoints we don’t need to configure each and every attribute , it has already configured the some attribute build in , so here is the configuration

As we can see in the above, I have commented behavior and serviceHostEnviroment tag, because we don’t need to service metadata and I have add the standard endpoint with “automaticFormatSelectionEnabled” attribute with value true.

That’s it, we have made a restful service and we can get the JSON or XML format by using single operation.

Now we have to put code at jqueryPage.htm page , here is the code of the page

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        ul{
            border:1px solid black;
            overflow:hidden;
            width:270px;
        }
        li {
            list-style-type:none;
            float:left;
            padding:5px;        
        }
    </style>
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            // javascript object for getting all the jquery objects
            var pageElements = {
                actionButton: $('#btnAction'),
                xmlRadio: $('#rdoXml'),
                jsonRadio: $('#rdoJson'),
                xmlLabel: $('#lblGetXml'),
                jsonLabel: $('#lblGetJson'),
                isXML: true,
                dataTypeValue: 'XML'                
            };

            // set the button value on page load
            SetButtonValue(pageElements.xmlRadio, pageElements.xmlLabel,
                           pageElements.actionButton);

            //click event of xml radio button
            pageElements.xmlRadio.bind('click', function () {
                pageElements.isXML = true;
                SetButtonValue(pageElements.xmlRadio, pageElements.xmlLabel,
                           pageElements.actionButton);
            });

            //click event for json radio button
            pageElements.jsonRadio.bind('click', function () {
                pageElements.isXML = false;
                SetButtonValue(pageElements.jsonRadio, pageElements.jsonLabel,
                           pageElements.actionButton);
            });

            //click event of the action button
            pageElements.actionButton.bind('click', function () {

                if (!pageElements.isXML) {
                    pageElements.dataTypeValue = 'JSON';
                } else {
                    pageElements.dataTypeValue = 'XML';
                }

                //jquery ajax method for getting the result
                $.ajax({
                    type: 'GET',
                    url: '/WCFRestfulService/RestfulService.svc/data',
                    contentType: 'application/json; charset=utf-8',                    
                    dataType: pageElements.dataTypeValue,
                    processdata: true,
                    success: function (msg) {                        
                        AjaxSuccess(msg, pageElements.isXML);
                    },
                    error: function (msg) {
                        alert(msg.error);
                    }
                });
            });
        });

        //it will call when the ajax hit successful
        function AjaxSuccess(result,isXML) {
            if (isXML) {
                alert($(result).find('string').text());
            } else {
                alert(result);
            }
        }

        //set button value on click on radio buttons
        function SetButtonValue(elem,label,button) {
            var buttonAction = $('#btnAction');
            if (elem.is(':checked')) {
                button.val(label.text());
            }
        }
    </script>
</head>
<body>    
    <div>
        <ul>            
            <li>
                <input type="radio" name="rdobutton" id="rdoXml"
                 value="Get XML" checked="checked" /></li>
            <li id="lblGetXml">Get XML</li>

            <li>
                <input type="radio" name="rdobutton" id="rdoJson"
                 value="Get JSON" /></li>
            <li id="lblGetJson">Get JSON</li>
        </ul>
        <input type="button" id="btnAction" value="" />
    </div>
</body>
</html>

I have created two radio buttons and a input button, when we hit the button it will call the jquery ajax method and check the pageElements.isXML Boolean value, if its false than JSON format called otherwise XML. For getting the proof i am using firebug, here is the result of firebug when we check radio button with Get XML and Get JSON.

I hope so you enjoyed the post , please give me your valuable feedback. It will give me support to write more valuable things.

Download Demo

Advertisements
Categories: Jquery, WCF

Standard Endpoints in WCF 4.0

As we know that when we work with WCF, we always define the endpoint at server side and client side, both of endpoint must be same for making the communication channel between them. As we know that there are at least three attributes for making endpoint, Address, Binding and Contract, and Contract is the way where you define your service operations for external world but in some cases I have seen in WCF 3.5 we have already Contracts such as IMetadataExchange which are not implemented in our service, but its implementation is handled by WCF and similarly when we used WebHttpEndpoint for REST, it must need to configure some specific behavior. Its means we need to way where we have already define their default values and which should be re-usable. As per the need WCF 4.0 has come with the concept of Standard Endpoints which give the support that don’t need to define each and every attribute of the endpoints, it has already configured some of its properties.  Standard endpoints can be used for infrastructure and application endpoints.

Infrastructure Endpoints

Infrastructure Endpoints means that some of endpoints properties have already been configured and we don’t have rights to configure them with alternative values such that IMetadataExchange, when we using the mexHttpBinding for getting the meta data, we don’t have any other alternative options for Contract, we must be used IMetadataExchange and it can’t be changed while we are able to define its binding and address properties. However we are not implementing IMetadataExchange and as I said at above its implementation is handled by WCF. We can identify the infrastructure endpoints by using the property IsSystemEndpoint.

Application Endpoints

Application Endpoints give support to build standard endpoints, its means we can define endpoints with default values, some of properties can be changed and some of static property cannot be changed. For making the application endpoint we have to drive the class from ServiceEndpoint.

In my next post I will show practical example.

Categories: WCF

ASP.NET 4.0 New Features Session At SZABIST

Yesterday I was invited in a session to speak on ASP.NET 4.0 New Features. The session was organized by Microsoft Student Partner for the Computer Science students at SZABIST.

We started the session with an interactive discussion with students to know interest in web development. Later on, I jumped to demonstrate the web basics and ASP.Net 4 features.

During the session, I briefly discussed the following topics:

  1. Features of Visual Studio 2010
  2. View State Improvement
  3. Cleaner HTML
  4. Routing in Web Forms
  5. Chart Control

I would like to appreciate students’ interest as during the session I could see a number of inquisitive faces and raised hands wanting to learn and know more about it.

For those who were unable to join can download the entire demos from folder shared below.

Please don’t forget to share your valuable feedback about the session.

Download Demo

Categories: Events
%d bloggers like this: