HTML5 Web Development to the next level Session at MAJU

August 10, 2011 1 comment

Yesterday I invited as a Guest Speaker at MAJU where I delivered one hour session on HTML5 Web Development to the next level. The session was organized by Microsoft Student Partner for the Computer Science students.

The session was quite great because number of audience more than 50 and they all were showing their keen to learn something about HTML5. It was really a good opportunity for me to deliver the introductory session on HTML5 to a great no. of audience. I started session with spoke about initial period of HTML5 and moved towards current state, where I covered various current browser supported features, TAGS of HTML5, JavaScript APIs and new features of CSS3.The great part of session when I stared to face questions from students at the end, they asked me lots of questions, they really wanted to know more about HTML5.

 

I would like to appreciate students interest and also thanks to all students who attended the session.

Advertisements
Categories: Events, HTML5

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

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

Overlay/Restrict the user during Postback

Last couples of months I have been doing a project which is going to end and I have learned some of new experiences. Here I would like to share one of my experience which might be quite simple but really worth able to makeover of the web application.

Most of the time we need to restrict the user during the post back otherwise user can click any other link or button on the page. It might not be so important in traditional website but if we have a web application where every click is responsible to perform the complex calculation or process, off course for completing the complex process the page gets the time for a while. Here developer needs to stop the user to perform any other clickable operation. I think we have various other options to handle that, here is some links to show that how can we handle it

http://www.4guysfromrolla.com/articles/061108-1.aspx

http://aspdotnet-suresh.blogspot.com/2010/11/how-to-disable-button-after-click-or.html

http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx

I faced the issue to restrict the user and made a little trick which is suitable to my project. I made a simple DIV which shows during the post back with animated gif image. In my case I did not use any kind of ASP.NET validation controls and update panel for Ajax, I did all the validation and Ajax using JQuery, because I did not want add any external  file of the ASP.NET generated JavaScript on application.

Here is I make a little sample for overlay during post-back.

I have created an ASP.NET Empty Web Application and added a SamplePage.aspx. The page contains markup and references link of the external CSS, Jquery Library and JavaScript file.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”SamplePage.aspx.cs” Inherits=”Overlay.SamplePage1″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head id=”Head1″ runat=”server”>

<title>overlay</title>

<link href=”Styles/style.css” rel=”Stylesheet” type=”text/css” />

<script type=”text/javascript” src=”Scripts/jquery-1.4.1.min.js”></script>

<script type=”text/javascript” src=”Scripts/script.js”></script>

</head>

<body onunload=””>

<form id=”form1″ runat=”server”>

<div>

<asp:LinkButton ID=”LinkButton1″ runat=”server” onclick=”LinkButton1_Click” >Click Link</asp:LinkButton><br />

<asp:Button ID=”Button1″ runat=”server” Text=”Click Submit” onclick=”Button1_Click” />

</div>

</form>

</body>

</html>

The style.css which is in Style folder contains the following CSS code for the overlay div.

#overlay {
         display: none;
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         cursor:wait;
         background: #041128;
         z-index:50;
         opacity: 0.5;
         -ms-filter: "alpha (opacity=50)";
         filter: alpha (opacity=50);
}

#overlay img {
    position:relative;    
    left:50%; 
    top:50%;
    z-index:100;    
}

Here is the filter properties for IE browser(IE7 &IE8) because IE(IE7 &IE8) does not support the Opacity property of CSS so that’s
we need to put IE filter properties to make it possible.

Now it’s time to add some JavaScript.

The script.js which is under the folder of Script contains the following code

jQuery(function ($) {

    $("<div id='overlay'><img src='Styles/images/ajax-loader.gif' alt='loading image' /></div>").appendTo('body');

    $('body a').each(function () {
        $(this).addClass('is-overlay');
    });

    $('body input[type=submit]').each(function () {
        $(this).addClass('is-overlay');
    });

    $('.is-overlay').bind('click', function () {
        setTimeout(ShowOverlay, 1);
    });
});

function ShowOverlay() {
    $('#overlay').show();
}

Here is the some Description of the above script

$(“<div id=’overlay’><img src=’Styles/images/ajax-loader.gif’ alt=’loading image’ /></div>”).appendTo(‘body’)

We have created an overlay div object and using the jquery appendTo method for adding the div on the page.

$('body a').each(function () {
    $(this).addClass('is-overlay');
});

$('body input[type=submit]').each(function () {
    $(this).addClass('is-overlay');
);

These methods for adding the is-overlay class on each ‘a’ tag and ‘input type submit’ button of page

$('.is-overlay').bind('click', function () {
     setTimeout(ShowOverlay, 1);
});

Now we have attach the click event on is-overlay class, you might be thinking that why I added here setTimeout JavaScript function and why
I do not directly show the overlay div here, so the answer is that if we direct call jquery show method than at IE(IE7 & IE8)shows the static image of the loading so it’s a way to animate the image on IE during the post-back.

Now here is one more issues, most of the modern browser FireFox and Safar cache the page, once we click the page and the new page has been loaded than if you click on the back button the overlay div will be there especially in FireFox and Safari, so here is way to resolved it, simple add the onUnload=”” attribute on the page body and that’s it.

I am not telling that is the best way but here is one of the suitable solution in my case and it’s just not for ASP.NET , I think it can be used in other languages as well

I hope that you enjoyed the post. Please share me your valuable feedback and commits so that I can write some more effective things.

Categories: Events

ASP.NET workshop at UIT(Hamdard University)

Last Thursday  I conducted a workshop on “Basic Web Programming Concepts, Introduction to ASP.NET and ADO.NET” at Usman Institute of Technology (Hamdard University). The workshop’s duration was spanned over 3 hours after interest shown by the participants, in which I talked about fundamentals and ground-level basic concepts for students .The key points of the workshop were, that students should have awareness of the web technologies and how they can work on it using ASP.NET. As it was not possible for me to could cover each and every aspect of the technology in detail considering the short time, I tried to make sure that I provide them with different flavors to generate their interest in the technologies they can use in making simple database-driven web applications.

In the workshop I covered the following topics:

Basic Web Programming Concepts

  • Different Between Client side and Server side
  • Role of the Web Server
  • Role of the Web Browser
  • Role of HTTP Protocol

Introduction to ASP.NET

  • Introduction to Web Forms
  • Difference Between HTML Server Controls and Web Server Controls
  • ASP.Net Page Life Cycle

Introduction to ADO.NET

  • ADO.Net Provider names
  • Working with SQL Provider
  • Difference between Dataset and Data Reader
  • Declarative data source such as SQL Data Source

In the end, I would like to express my gratitude towards all in attendance for showing their interest.

 

Categories: Events

Poster Session at PAF KIET

February 20, 2011 Leave a comment

Last Monday, on 14th February 2011, Once again I was invited at PAF KIET University but  this time the special thing was that, I was  invited as a guest for evaluating the Final year projects for undergraduates of  Computer Science students. The Event name was “Poster Session” which is organized by PAF KIET University every year where  students represent their final year projects in front of a professional panel of judges. Beside me in the event lot of other professionals were there and all of them came from well known companies.Experts related to every discipline were present and I was invited as a Computer Science professional to evaluate the FYP for the students.

The whole Event was distributed into three parts. In the first part the students were representing the banner or the poster(sort of branding there product/project) and verbally defining there advantages, benefits and features of the software, and the students were faced with questions regarding there projects by the jury. The second part was quite interested, as Dr. Irfan Hayder (Dean of PAF-KIET University) had a little speech which increased the motivation level of the students to some good extent, at the end he disturbed the shields to all the honorable guests including me :). Eventually in the third and last part, the session started to rock , the students  presented their projects on projector and that was a time where the professionals  evaluated the projects and gave them comments on their efforts.We tried not to demotivate any student , to guide them were they had been considered weak and to let them know where they need to go according to the standards of the industry . The last but not the least ,  refreshment and dinner for all.

Categories: Events
%d bloggers like this: