Review

As the Title of the book states, this book covers about Visual Studio and most of the topics that are widely used amongst .NET developers under the umbrella of .NET.

The book starts with Visual Studio 2012 IDE features and this chapters discusses most of the features that are available since beginning and introduced with the new version. I can assure you that Visual Studio IDE provides lots of features that are very helpful in our day to day development and almost half of these features is not used by most of us. After reading this chapter, you’ll feel that now your day to day coding become easy and more manageable.

Second chapter covers the insights of .NET programs and Memory Management. This chapters discusses from writing the code, compilation, binaries , the execution  in detail. If you want to know the little insight that How all these compilation, packages and execution takes place, you’ll really like this chapter.

Third chapter talks about Asynchronous programming in detail. Most of developer either does not write the asynchronous programs or do not follow the best practices. This chapters covers all the aspects of asynchronous programming with proper code snippets. it also suggests that in which scenario what pattern one should follow.

Fourth Chapter covers the changes that took place in ASP.NET 4.5 and covers the new changes with examples. It also includes the IDE changes that helps writing ASP.NET 4.5 application. In all, it gives a quick hands on for ASP.NET 4.5

Fifth Chapter covers the changes in WPF and talks the topic like MVVM pattern, Ribbon User Interface and WorkEvent pattern in WPF with examples. So if have worked on WPF you’ll get to know the enhancements made in it.

Sixth Chapter talks about Touch-sensitive device Applications in Windows 8. This is relatively new topic and covers about different flavors of writing windows 8 apps.  In all, after reading this chapter you’ll get practical knowledge on writing Windows 8 apps and app life cycle.

Last (Seventh) Chapter and it is also the chapter covers about Communications and Sharing about Windows 8 apps. It is relatively advance topic and talks about the communication between multiple windows 8 apps and working network enable windows 8 apps. After getting basics of Windows 8 apps in last chapter, this covers advance topics wit examples.

One thing that I see as a flaw considering a common developers that most of the chapters are little lengthy includes more than 50 pages and cover lots of things. If you are book lover then it should not be an issue but for normal developer, you start a chapter and keep reading little long to complete a chapter.

At last, I would highly recommend this book to those who want to learn the changes took place in .NET 4.5 including IDE and other various technologies like ASP.NET, WPF , Windows 8 apps. This book includes many code snippets and example so that once gets practical knowledge with diagrams whenever required. As this books covers most of the topics so it focuses mainly the changes in .NET 4.5 and gives brief about the earlier existing feature. So it’s better if you have earlier working knowledge on the technologies that it discusses.

You can buy this book from the blow link

http://www.packtpub.com/visual-studio-11-and-dotnet-4-5-expert-development-cookbook/book

Thanks to you all

C# Corner Delhi Chapter is organizing a full day event in Noida on 18th May 2013. The theme of the day is WCF and there will be full day Hands on Lab on various topics on WCF. I’ll be speaking on few topics there.

To get the event details Click Here

So if you want practical oriented learning on WCF, Join us in time and grab your seat.

Thanks,

Brij

I am going to write another post on ASP.NET MVC. Here in this post, I’ll be talking about WebGrid. If you have read my last post ( to go Click here), I had a main View and many Partial Views that are integrated with main View. Every partial view was independent and we loaded each partial view via jQuery AJAX call.

I got another requirement to have one more partial view on that page which also shows the data similar to other controls but here the requirement was to provide a specific feature Sorting. So as I was looking for various options for it. First I thought to making my custom partial view which provides the desired behavior. But I thought of using any existing control.

Later I found, that a class WebGrid is provided and available under namespace System.Web.Helpers, that renders the data in HTML table element and also provide feature like sorting, paging etc. I required sorting feature so I decided to use it and found fairly simple to write the code for it.

The code at my partial view is as

@model IList
@{
    WebGrid grid = new WebGrid(Model);
}

@grid.GetHtml( columns:grid.Columns(
	        grid.Column("ProductName", "Product Name"),
		grid.Column("UnitPrice", "Unit Price"),
		grid.Column("SaleDate", "Sale Date"),
                grid.Column("SoldQuantity", "Sold Quantity"),
		grid.Column("SalesPersonName", "Sales Man")
     )
 )

If we see the above code, we have created am instance of WebGrid and gave the model in the constructor itself. So that it can bind with the model. Then I have defined the column in the WebGrid that I want to show on the page.

I have just added this control to my sample that I created in last post. (I’ll attach the complete code) and wrote my Client side to load the control as

        $.ajax({
            url: '/Home/GetSalesDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'

        })
       .success(function (result) {

           $('#dvSalesDetailsLoader').hide();
           $('#dvSalesdetails').show();
           $('#dvSalesdetails').html(result);
       })
       .error(function (xhr, status) {
           alert(status);
       })

Apart from this  I created the model class for SalesDetails and corresponding Controller method.

Here if we see I am again using jQuery ajax to load the control and assigning the returned HTML to the corresponding div.

I have shown the specific code that is required for this post. The complete code is attached.

When I ran the code, it worked perfectly as

You can see the newly added control (Sales Details in the encircled area), It displays the data perfectly. But when I clicked on Unit Price column header to sort, I got shocked because it got displayed as

But when I gave it a thought, I understood the problem. After clicking on Unit Price the page did not maintained the state of the page and after the refresh only control that I clicked got available on the refreshed page.

But if you see the column is sorted and if check the URL grid itself send the sort column name and sort direction as query string.

I had to refresh the only that area of the page that contains the last control. So I did some research on it and made changes and finally got succeeded. For that I had to made the change in the code.

First I updated the code where I instantiated the WebGrid class in the Partial View as

WebGrid grid = new WebGrid(Model, ajaxUpdateCallback: "SalesDetailsUpdate", ajaxUpdateContainerId: "dvSalesdetails");

Here, if you see I have assigned two more properties; one is ajaxUpdateContainerId which is assigned with the div id where the control’s rendered HTML is displayed. And another ajaxUpdateCallback this is assigned a Client side method that is fired on every refresh initiated from the grid. So the Client side method is simple and is as

        function SalesDetailsUpdate(result) {
            $('#dvSalesdetails').html(result);
        }

Here I am just putting the result in the defined div. Now when I ran the code, It started working fine and the now only the grid
is updating on sorting.

Hope you have enjoyed this post.

Thanks,
Brij

Last week, I was working on an application that was made in ASP.NET MVC3. Earlier I thought of using ASP.NET MVC 4 but didn’t find any specific feature of ASP.NET MVC4 so moved ahead with ASP.NET MVC3 version.

So as I worked on a POC using with ASP.NET MVC initial version long back so I was excited working on it. I had to display multiple user controls and the data of these controls was getting picked up from multiple sources. So I thought of loading the controls via ajax call individually. So let me share my understanding with a example. I have created a sample application in ASP.NET MVC3. I created a main View (called here HomePage.cshtml)and created two Partial Views (_ProductDetails.cstml and _UserDetails.cshtml) that will be displayed. So I’ll show you how easily we can load these controls via Ajax. It will make page more intuitive and seamless to users.

I am showing simple data in these controls and and one control display the details of the users and other control displays product details. For this, I have created two models User and Product.

While we can load each controls easily via jQuery ajax. For this jQuery must be included in the on the View. By default it is included in the __Layout.cshtml. It works as a master layout of the page but if you are not using it in your View then include jQuery file specifically. So my HomePage.cshtml looks like

and my Client side code is as

<script type="text/javascript">// <![CDATA[
        $.ajax({
            url: '/Home/GetUserDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'

        })
        .success(function (result) {
           $('#dvUserdetails').show();
            $('#dvUserdetails').html(result);
        })
        .error(function (xhr, status) {
            alert(status);
        })

        $.ajax({
            url: '/Home/GetProductDetails',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'

        })
       .success(function (result) {
           $('#dvProductDetails').show();
           $('#dvProductDetails').html(result);
       })
       .error(function (xhr, status) {
           alert(status);
       })

// ]]></script>

So here you can see as each control is loaded individually. For each control, I have defined a method in Controller and that method is called via Ajax . When result is returned from the ajax call successfully that success event gets fired. Here I am setting the returned HTML in a div and displaying it.

Also here we can easily pass the parameter to the controller methods if we want, via url itself.

Now when page load it fires two ajax calls fired individually and when the result is returned then the control is displayed. In the meantime, user may see blank screen, so here we can show some loader image and once result is returned and we hide it display the control in success event.

I have included the sample in attachment. (I have created this demo using Visual Studio 2012). When we’ll run the application, it looks like

Hope you have enjoyed.

Thanks,
Brij

This is going to be a small post and I am going to share one problem that I faced few days back.

I received a service a web service URL that was written in some different technology other than .NET and I added the the reference of it using add service reference but when I compiled that application,I received many build errors.

Then I just realized that I am using Add service reference option and it uses svcutil.exe to create the proxy. As we know this utility was introduced with WCF and works well for WCF  services.

I recalled the way the way we used to write the WCF services like writing different contracts like service contract, message contract and message contract and the way we write in asmx web services is totally different. The assemblies are different as well. So I tried to find where I can get the option to Add Web Reference ( Although I had the option to use the command line utility). I found it here

Right Click on the project -> add service reference

Click advanced as above

Now Click on Add Web Service Reference.

You can remember the above screen. We used it a lot while working with VS2005. The above one uses the wsdl.exe to generate the proxy from the wsdl.

After using this utility my application started working. Svcutil.exe is a sophisticated tool (provides many options and other features as well) and it’s generates the proxy in different way to create it. For details refer the links below

For wsdl.exe

http://msdn.microsoft.com/en-us/library/7h3ystb6%28VS.71%29.aspx

and for Svcutil.exe

http://msdn.microsoft.com/en-us/library/aa347733.aspx

Hope that helps.

Happy Coding,
Brij

Delhi User Group has planned event planned on 20th April (Saturday) and all professional developers invited.

I’ll be speaking on T-SQL features in SQL 2012. So if you are a SQL dev and excited to learn the SQL 2012, Join us on coming 20th April.
There are many other Talks are planned of PowerShell,  SQL and .NET, you will enjoy. This is free event and will be taking place at Microsoft Office, Gurgaon.

Register for the event here.

For complete details about the event click here

I am excited to see you at event and so if this topics interests you, Join the event and learn!!

Thanks,
Brij

In this month (April’13), I’ll be speaking in three events on ASP.NET, WCF, SQL Server 2012. Join these sessions with me and learn the technology you are interested in. Event details are

Simple steps to improve performance of ASP.NET Applications Significantly

This is webcast and you can join from anywhere. Just require a PC and internet connection. Register at the following site and you’ll get the attendee details

http://kolkatageeks.com/WebCast.aspx

Timing details – 07th April 2013, 2-3PM

N-tier architecture using WCF and ASP.NET and ASP.NET MVC

This will offline event and organised by C3 Corner at Noida on 13th April 2013. Please get the details from below link.

Learn WCF With C# Corner

Exciting feature for SQL devs in SQL 2012

This will be a offline event and organized by Delhi User Group and will be taking Place in Microsoft Office Gurgaon on 20th April 2013.

To connect with Delhi User Group (Group), join it on facebook at below link and get updated on all the events organised by DUG and join that interest you.

Connect with Delhi User group

Join with me on these events and you’ll also get to hear other Speakers in these event. Hope you all learn and enjoy.

Thanks,
Brij

Learning ASP.NET SignalR – Part 1

In this post, we’ll examine, How SignalR works on various environments. We’ll try dig it out with the help of an example.

First let me know, when you require real time update your UI?
A chat application?

Right. But it’s not the chat application only, you can use it at many other scenarios like any real time data requirement, collaborative applications, Real time loggers, Real Time dashboards, Games, Stock market, Real time news, Live match feeds etc… and many more.

But for this analysis, we’ll use chat application. And will discuss other scenarios in my next post.

So let’s create an chat sample application.

Let me tell you my environment. I am using VS2012 Pro for this development and my OS is Windows 8.

So to create a simple chat application. Start  File -> New Project-> ASP.NET Empty Web Applications and say name it SignalRChat

Now Tools -> Library Package Manager ->Package Manager Console.

A console will be opened and put the following command

install-package Microsoft.AspNet.SignalR

and Press enter. Wait for few seconds, it will install the SignalR and will download all the required libraries in your project. Add Global.asax in your project and add the following line in your Application_Start() method

RouteTable.Routes.MapHubs();

This is required to add the default hub route and it will be added at Client side. Now lets add a class say named ChatHub which implements Hub Class and it is available under the namespace Microsoft.AspNet.SignalR . Now add a method as

 public void Distribute(string name, string message)
        {
            // Call the broadcastMessage method to update all clients.
            Clients.All.broadcastMessage(name, message);
        }

Now it’s time add an HTML page. Let’s add Chat.htm. On this page add the following scripts and hub class

  <script src="/Scripts/jquery-1.8.2.min.js" ></script>
  <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
  <script src="/signalr/hubs"></script>

Update the the version of the scripts file that is available in your solution. Now add the following javascript code in your HTML file,

  <script type="text/javascript">
         $(function () {
             // Declare a proxy to reference the hub.
             var chat = $.connection.chatHub;
             // Create a function that the hub can call to broadcast messages.
             chat.client.broadcastMessage = function (name, message) {
                 // Html encode display name and message.
                 var encodedName = $('<div />').text(name).html();
                 var encodedMsg = $('<div />').text(message).html();
                 // Add the message to the page.
                 $('#discussion').append('<li><strong>' + encodedName
                     + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
             };
             // Get the user name and store it to prepend to messages.
             $('#displayname').val(prompt('Enter your name:', ''));
             // Set initial focus to message input box.
             $('#message').focus();
             // Start the connection.
             $.connection.hub.start().done(function () {
                 $('#sendmessage').click(function () {
                     // Call the Send method on the hub.
                     chat.server.distribute($('#displayname').val(), $('#message').val());
                     // Clear text box and reset focus for next comment.
                     $('#message').val('').focus();
                 });
             });
         });
    </script>

If you see the above script, first it creates the reference of HUB Class. This is actually, required to perform all the steps. It adds a method which receives the chat message.  It receives the message at run time and update the UI accordingly. And It also adds a event on the send button and call the distribute method on the server to broadcast the message. One thing, you keep in mind that it has a check whether the HUB is started or not. And Click event of Send button will be fired only if HUB is ready or it is ready to accept the request. Also we require to add some HTML Controls. It could be as

  <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">
        </ul>
    </div>

So now the code is ready to start. Let’s run the code. Now You’ll be prompt to put name and you can open the same URL on some other browser and starts chatting amongst browsers. So your code is running.

So this is a very simple application of Application. So now I’ll try to run the same application in different environment. Current browser is Firefox19 on windows 8. Let’s visit firebug net tab

Now if you see the the above first red marked encircled area, there is a negotiation request sent to the server to negotiate the protocol that will be used. Again if you see the next encircled area where it is written transport=websockets  and also a connectionToken is there. It means websockets is supported and it is used here.

Now I am going to run the same application on different environment that has OS WinXP SP3 and IE8. So let’s run, now when see this

Now if you see here red encircled area, here the transport is foreverFrame. And when I ran this it was working as similar as I ran on Win8 and FF19 it was transport=websockets. Here also you can see the page is getting refreshed.

Now I will show it you on another browser on the winXp3 machine

So here if see here the encircled area and here is the transport is serverSentEvents.

You can see here, as I discussed in my first post in this series, that according to the supported technologies appropriate one is selected  based on the order that was pictorially shown and discussed.

So the whole Idea, in this post to explain you that SignalR provides complete abstraction over technology and you need to use the similar simple API to work on it. You don’t need to care about the underneath technologies and environment.

Now in my next post, I’ll discuss various scenarios, where you can use this technology and make best use of it.

So hope, you must have enjoyed this post a lot.

Thanks,
Brij

Today I am going to discuss one of the new technologies that changed the way we used to think about How the web works. I’ll be writing a series on this technology and this post is first part of it.

You must have been working on the ASP.NET for long or might be since inception. And till date (or till this technology got introduced) , You got to know from every where that Web is stateless. A webpage is recreated every time from scratch it is posted back to server. In traditional web programming, all the information within the page and control gets wiped off on every postback.

I have taken the above lines from one of my post which I had written long back.

The web page used to work on PULL approach means you have to pull the data from the server. It means whenever you want to get some data from server, you require to send some request to server so that it can send the updated data along with the response. Remember, many times we required to update the UI as soon as the data gets updated to the server and then we used some polling method which keeps sending some request to server and checks if the data is updated and if yes, it refreshes the page or you have done something similar. So it works like

But things are changing rapidly. Web Sockets introduced in HTML5 provides us a capability to create a full duplex channel over web.

But SignalR provides an abstraction over persistent connection. It makes you tension free about the type of browser and web server versions.It works in a consistent way in all the environment.

Although all the latest web browsers supports the new technology WebSockets but this is not the case every time. Some of your user might be still using IE6/IE7 etc and you cannot simply say that I cannot support this. Ultimately this is buyer’s world. So you have to support as per your Client’s requirement and here SignalR wont let you down. So How does SignalR work on all the browsers? It actually checks the browser’s capability and accordingly takes the decision as

So I think you all must have got an Idea the way SignalR works. but let’s try to dig into it. As you can see in the pic, it starts from top to bottom as if the environment supports Web Sockets else server sent event else forever frame else polling, means it has fall back one step further until your browser supports it.

So in simple words, What is ASP.NET SignalR?

We can say it is Real time – Means updates the web page Real time
Push Approach – Server pushes the data to all the connected Clients.

So let’s see How it works pictorially?

As you can see in the above pic the An event generator generates event and notifies to SignalR hub. Signal R Hub process it and forwards the the message to the appropriate Client(s).

You also can see that Client could be any like any .NET windows, web, console client, WP, Windows store apps, Android etc.  Similarly, event generator could be any Client initiates notification on some logic, database, any other server based on some logic. You can imagine the reach and simplicity of it. And I can assure you that it is very fast as well.

So what are the main components of ASP.NET SignalR?

•     SignalR – A meta package that brings in SignalR.Server and SignalR.Js
•     SignalR.Server – Server side components needed to build SignalR endpoints
•     SignalR.Js – Javascript client for SignalR
•     SignalR.Client – .NET client for SignalR
•     SignalR.Ninject – Ninject dependeny resolver for SignalR

You can install SignalR via Nuget. I’ll let you know, How to install it.

First, let me tell you, that to work on it, you need to have either VS 2010 SP1 or VS 2012.

Then you can install SignalR via Nuget Packages using the following command. To install it ,

Open Visual Studio, Go to  Tools-> Library Package Manager -> Package Manager Console.  A console (Named as Package Manager Console) will be opened and run the following command

Install-Package Microsoft.AspNet.SignalR

You can also install the SignalR sample using the following NuGet package..

Install-Package Microsoft.AspNet.SignalR.Sample

Hope you all got have basic Idea about SignalR and the way it works. In my next post, I’ll be discussing one example and show, How does SignalR works on various browsers and environment?

Keep Learning,
Brij

So let’s jump to the topic. What is the difference between let’s first go by an example.

I have created a simple default.aspx page in my asp.net empty application and added few images and put the path from web and added few text. Now I put a general alert and called it on load method of window as

<script type="text/javascript" language="javascript">
        window.onload = OnLoad();
        function OnLoad() {
            alert('I am called by window.onload');
        }
    </script>

Now again I tried to change the code to jQuery document.ready function. And used the code as

$(document).ready(function () {
              OnLoad();
         });
        function OnLoad() {
            alert('I am called by document.ready');
        }

and when I ran it. I got the alert very fast. So what I wanted to point out here that jQuery’s document.ready runs much earlier the JavaScript onload. Why?

document.ready get’s fired as soon as DOM is ready and registered with the browser. It does not wait for the all the resources to get loaded. It allows us some very cool showing, hiding and other effects as soon as user sees the first element on the page.

While Javascript’s onload method gets fired only when all content of the webpage and image, iframes etc get loaded in browser then onload get’s fired.

So do we have a method in JavaScript that works in similar way as document.ready?

Partially yes.

We have a method called DOMContentLoaded  that is actually called by jQuery from document.ready. But that’s not it.  DOMContentLoaded is not available to every browser and versions. For IE > 9,  onreadystatechange works in the same way. In case nothing works in browser, jQuery has a fallback and it implemented own logic to traverse the DOM and check the when the DOM got registered and fires document.ready accordingly.

So I hope you all got to know the basic difference between these two.

Cheers,
Brij