Solution Explorer Not Showing Solution

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

Sometimes when you are working with the VisualStudio solution which only has one project, it creates the issue of the actual solution node not showing up in the Solution Explorer.

This is because of the following setting. If the highlighted Checkbox is not checked then it will not show the solution if it has only one project under it.


Understanding jQuery

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In this first post of the series of blog posts, we will start looking at jQuery and how it is making Web a much more interactive place. This series assumes that you have a basic understanding of JavaScript and how it runs inside your browser along with CSS and HTML. With that assumption, let's dive into understanding what jQuery is and some basics of jQuery framework.

What is jQuery

So, what exactly is jQuery ?

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

-From WikiPedia

As the definition says, it is a framework written on top of existing JavaScript to simplify client-side scripting during web development process. It is a pure JavaScript technology and can be used in conjunction with any other server side technology. Let's quickly go through some common usages of jQuery.

Usages of jQuery

Selecting

  • Selecting an Element on your page by it's ID
  • Selecting an Element on your page by a Class
  • Selecting an Element on your page by it's Type [Button,RadioButton,Checkbox,Label]

Actions on the Elements

  • Attaching Events To Selected Element(s) [Click,MouseIn,MouseOut]
  • Changing CSS classes, attribute values for Selected Element(s)
  • Adding/Removing HTML elements from the Selected Element(s)

These are some of the most common use cases you will find while working with jQuery. However you can do many other advanced stuff like Validation,Ajax operations etc. using jQuery.

Basic jQuery Concepts

$(document).ready()

From the usages it seems, almost anything you do with jQuery is tightly attached to your DOM. So before the DOM is loaded you can not really do anything. And that is where you will find the first jQuery function $(document).ready().

What this function essentially doing is, selecting the document and when it is ready, executing rest of your JavaScript. So the code included inside this function will only be executed when the page is downloaded and ready to be acted upon. This guarantees that whatever HTML elements your JavaScript manipulates, are available.

Creating A Simple Application

There is no server side code involved in the sample we are creating here, so you do not have to have a VisualStudio. Any HTML editor will be just fine. I am more comfortable using VisualStudio as the editor for my HTML pages. So Let's go ahead and create an Empty Asp .Net Web application.

Create Asp .Net Empty Web Application

Now, let's go ahead and add a jQuery file into our application. For the purpose of this tutorial we will be using jQuery 1.9.1.

  • Download the file from this URL
  • Create Script folder in your project
  • And add the downloaded jQuery file to that folder


Basic Broadcast Hub Using SignalR

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In this short blog post we will see how to create SignalR broadcast hub. To keep things short and simple we will not be going in much of the details of what SignalR is and how it provides almost real time communications to the web applications.In order to understand the basics of SignalR, you can hit this link, understanding SignalR.

Setting up the Project

Let's start by creating a basic shell application where we will be hosting our SignalR HUB. I have created a basic Asp .Net MVC 4 application using Visual Studio 2012.


Understanding SignalR

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

I need my data and I need it now !!! Isn't it what you think while on any web site or any application these days. Everyone working with some sort of IT system being a Website/Application/ConsoleApp, they all demand real time updates on their data. With modern mobile platforms and Push services, applications are becoming almost real time and more engaging. Instead of users asking for the data, data gets delivered to them as soon as back end services receive them. But but.. what about our old friends web sites and web applications ? How do they keep up with this demand of real time updates ?

Being a web programmer so long, the first thing that crosses your mind is "AJAX". You say it's easy, what are you talking about. Just setup a JavaScript function that polls server every 2 seconds and gets the update. I agree, that's easy but at what cost ?

  • Every request takes up some CPU cycles from client's machine and from Server.

  • Imagine this being done by 10,000 users at the same time and only 2000 of them had any real updates. Those 8000 calls are a waste.

  • Imagine the network traffic being generated by these requests. On top of those whatever session management information you are passing back and forth(e.g. cookie) with every request and response.

  • And the top of all, if client needs the update he has to earn it by making an explicit request to the server. There is no way for server to pass information to the client as soon it has it.

And that is why SignalR was created. SignalR will solve the problems listed above and provide a robust infrastructure of near-real time communication.

What was before SignalR

Before we jump into details of SignalR, let's see what web developers have been using for near-real time communication prior to SignalR.

  • AJAX Long polling
  • Forever Frames (IE Only)
  • Server Sent Events (SSE)
  • WebSocket

AJAX Long polling As the name suggests, client creates an AJAX request which stays open until server responds. After that client creates next brand new request which stays open until the response is received.

Forever Frames The idea is to create a hidden IFrame which makes requests to server endpoint. This request does not complete and so server keeps sending chunk of JavaScript snippet to the client. Again this is a one way communication from Server to client.

Next two options are features introduced as part of HTML5 specifications.

Server Sent Events In this protocol the web page receives updates automatically. You can explore this more at W3Schools. This was possible before too, but clients had to explicitly ask for the data.

WebSocket If the server and client both are capable of communicating over this protocol, this is the most persistent two way full duplex communication channel between client and server in web applications. Again, this is pretty new and only the latest versions of all browsers supports this.

Okey, so these are different options you have as a web developer when you have been tasked to implement real-time communication in your web application. now imagine that you have to implement such real-time communication feature in your application. In order to make that application cross browser compatible you will have to consider all of the above options and fallback on one after the other if a specific feature is not supported by a specific client.

This is exactly where SignalR saves you a ton of time. You can think of SignalR as a wrapper around all of these different protocols. So as a developer you will not have to handle fallback scenarios on your own. You just create a simple SignalR HUB, and it will do the rest. While your application is running, it will negotiate a suitable protocol with the client automatically.

To demonstrate the negotiation, I have captured few screen shots of a simple Chant SignalR hub (We will be building this in the next blog post).

First latest version of Firefox tried connecting to the HUB and following was the negotiation sequence.


JQuery AJAX CRUD Operation On Web API - Part II

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In previous post we created a simple Contacts management API, and a jQuery AJAX operation to invoke Get operation on the API. In this post we will continue working with the same sample and implement remaining three operations PUT/POST/DELETE.

jQuery Function To Perform POST Operation

This function will help us crate a new contact entity using JavaScript client. For this, let's first create some HTML elements where we can enter new contact details.