pjax with MVC, and form post like pjax

Last weekend I was working on a interesting project, and came across an interesting JavaScript library called pjax.

More information on pjax:

https://github.com/defunkt/jquery-pjax/

http://pjax.heroku.com/

pjax loads HTML from your server into the current page without a full reload. It's ajax with real permalinks, page titles, and a working back button that fully degrades, It just enhances the browsing experience.

I just loved the way we could use it with MVC; Below code sample explains how we could use the
same with MVC.
Clientside code would look as below:

Since the Form post is not handled with pjax, we can do a work around as below.

Updated _ViewStart.cshtml as below:

@{
    if (Request.Headers["X-PJAX"] != null || Request.Headers["AJAX-FORM"]!=null)
    {
        Layout = "~/Views/Shared/_PjaxLayout.cshtml";
    }
    else
        {
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
}

_PjaxLayout.cshtml page content can be as simple as abelow

@{
    ViewBag.Title = "_PjaxLayout";
}
@RenderBody()

Why not to have a static const in c#

This is just a thought, that I was thinking why can't we have a constant with static in C#, and the answer is 'NO'; That we cannot have a static constant; e.g: I created a class as below:

 public class Constants1
    {
        public const string Const1 = "Hello";
        public const string Const2 = "World";

        public static string Static1 = "Hello Static";
    }

When we compile the program into IL, the C# compiler does a magic in IL, that the constants converts into static literals, of course it has to, that's why we are able to access the constants as Constants1.Const1

Revealing Module Pattern in JavaScript

Revealing Module Pattern makes the code to read better and more structured way, This really useful when we had to repeat the name of the main object when we wanted to call one public method from another or access public variables. This is done by adding a return statement at the end of the function that exposes the public members.

The benefits of this approach are. The Revealing Module Pattern allows the syntax of your script to be fairly consistent - it also makes it very clear at the end which of our functions and variables may be accessed publicly, something that is quite useful. In addition, we also able to reveal private functions with more specific names if we wish.

The following code demonstrates how the module can be revealed.

var myModule = (function () {
 
    var name = 'Mohamed Rafeeq';
    var age = 28;
 
    function updatePerson() {
        name = 'Mohamed Rafeeq Updated';
    }
    function setPerson() {
        name = 'Mohamed Rafeeq Set';
    }
    function getPerson() {
        return name;
    }
    return {
        set: setPerson,
        get: getPerson
    };
} ());

() –> Indicate the self invoking, this act as singleton call to myModule.

This can be called as below

myModule.get();

For more reference, read below posts:

http://weblogs.asp.net/dwahlin/archive/2011/08/02/techniques-strategies-and-patterns-for-structuring-javascript-code-revealing-module-pattern.aspx

http://weblogs.asp.net/dwahlin/archive/2011/08/03/techniques-strategies-and-patterns-for-structuring-javascript-code-revealing-prototype-pattern.aspx

http://blog.davidlitmark.com/post/6009004931/an-introduction-to-the-revealing-module-pattern

Simplified signaling with SignalR

Introduction

Users are always interested in a rich experience, or a well UI Experience. They expect real-time action between both client and server, no matter if the technology used is HTML5 web sockets or something else. There comes the SignalR. It is framework built on top of ASP.NET and JavaScript library that helps to build rich interactive web applications.

We can use signalR in the scenarios where require polling server after fix interval to check if server has something which client needs to update. Well, In Definition “SignalR is an asynchronous signaling framework that helps maintain persistent connections between client and server”. It uses the raw technique of keeping connections open between a web client and a web server. Actually it uses an existing technique called long polling. Behind the scenes, it could very well use Web Sockets transparently.

How it works

Long Polling: With long-polling, the browser sends a request to the server and the server keeps the request open for a set period.  If a notification is received within that period, a response containing the message is sent to the client. If a notification is not received within the set time period, the server sends a response to terminate the open request

SignalR: SignalR registers some code to run at application start time that finds all hubs in your application which is done by jquery.signalR.min.js and SignalR.dll. On the first request to signalr/hubs, the proxy is generated and cached for the lifetime of the application.

Server Hub:
[HubName("testHub")]

public class TestingHub :Hub

{

 /// <summary>

        /// This method is called from signalR client

        /// Clients is dynamic property.

        /// </summary>

        /// <param name="message"></param>

        public void Send(string message)

        {

            Clients.broadcastMessage(message);

        }

}

Client Side Scripting:

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

<script src="Scripts/jquery.signalR.min.js" type="text/javascript"></script>

<script src="/signalr/hubs" type="text/javascript"></script>

   

    <script type="text/javascript">

        $(function () {

            var broadCaster = $.connection.testHub;

            broadCaster.broadcastMessage = function (message) {

                $('#brodcastArea').html(message);

            };

            $.connection.hub.start();

            $('#btnBroadCast').click(function () {

                broadCaster.send($('#txtMessage').val());

            });

        });

    </script>

Business problem with SignalR

Real time stock update system, we can create a very interactive stock updating tool, which reflects the live stock market change to the clients.  Our server will communicate to Stock API’s and updates all the open clients with the real time market data. 

History

The concept of SignalR that is long polling or server side scripting is not new in the world of Web. It is an existing technique which can be achieve by Socket.IO, node.js and Nowjs. We could say SignalR is related to this, but a new prospect that it is completely uses JavaScript on Client side and ASP.NET on server side.