SignalR C# ASP.NET .NET MVC 4 Web API Razor HTML5 CSS3 jQuery WCF SQL knockout.js AJAX APIs

Learn SignalR Code

  • What is Asp.Net SignalR
  • Outline MVC4,Knockout,SignalR
  • Useful Links
  • HTML5
  • Contents Anchor E
  • What is Asp.Net SignalR

    Real-time, persistent connection abstraction over HTTP for .NET
    Dashboards & monitoring
    Collaborative anything
    Job progress
    Real-time forms
    "If you care to email me at or come into the SignalR room on JabbR ( I'd be happy to dig a bit further."

    Outline MVC4,Knockout,SignalR

    The first edit of the MVC4 Razor Project is to RouteConfig.cs
    // AppStart\RouteConfig.cs extract from RegisterRoutes() which is called in Global.asax.cs Application_Start()  
        RouteTable.Routes.MapHubs();    /* Older SignalR Code*/
                    name: "Default",
                    url: "{controller}/{action}/{id}",
                    defaults: new { controller = "Person", action = "Index", id = UrlParameter.Optional }
    The latest jquery-signalR-2.2.0.js when downloaded via NuGet packages requires the following added to App_Start c# code.
        using Microsoft.Owin;
        using Owin;
        //[assembly: OwinStartup(typeof(montegodata.Startup))]
        namespace montegodata
            public class Startup
                public void Configuration(IAppBuilder app)
    The Model-View architecture implies a "Person" folder under the "Views" folder and the file Index.cshtml from the code above. The second edit is to create a Person.cs Class in the "Models" folder.
    // Model\Person.cs
    using System.ComponentModel.DataAnnotations;
    namespace SiteList.Models
        public class Person 
            public int Id { get; set; }/* "prop"TABTAB */
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Email { get; set; }
    Along with a PersonContext.cs Class also in the "Models" folder.
    // Model\PersonContext.cs
    using System.Data.Entity;
    namespace SiteList.Models
        public class PersonContext : DbContext
            public DbSet<Person> People { get; set; } 
    The Penny Drops with View Engines At 17 minutes the video shows the IDE form filling to create the "document templates". Below is the PersonController.cs Class in the "Controllers" folder.
    // Controllers\PersonController.cs
    namespace SiteList.Controllers
        public class PersonController : Controller
            // GET: /Person/
            public ActionResult Index()
                return View(); 
    Now it gets complicated:
    1. The SignalR Server-Client Remote Procedure Calling Hub, where the c sharp code calls the camelCode javaScript (dynamic expression)
    2. The Person.js file, that uses the knockout observables and subscribe
    3. The Views\Person\Index.cshtml file, with Razor Lambda syntax using the data-bind="...:..."
    The Web.Config file contains the database connection string, which by project default is an EXPRESS connection. There are extensive database modelling support available inside Visual Studio.

    Useful Links

    Process Monitor (Download)

    ASP.Net and Web Tools 2012.2

    The Samples Page To Work Through

    Sample: ASP.NET SignalR and ASP.NET MVC 4

    Great Sample:knockout,signalr

    Get From GitHub

    Eric Vogel covers how to create a real-time Web data entry form with ASP.NET MVC, KnockOutJS and SignalR

    Explain of David Fuller Stock Ticker

    Chat Example - Create Along With

    Roadmap for Microsoft ASP.NET and Web Tools 2012.2 Html5 documentation style ...

    Reading Entry Point

    In this chapter, you'll learn:
    These videos give you background and application examples for using SignalR to add real-time functionality to web applications.

    1. SignalR and Web Sockets

      Scott Hanselman gives an overview of the ASP.NET SignalR library and Websockets development.

    2. Building Real-Time Web Applications with SignalR

      In this video from Build 2012, Damian Edwards introduces using SignalR to build real-time web applications.

    3. ASP.NET and the Real-Time Web - Teched Europe

      Brady Gaster presents real-time web development with ASP.NET SignalR at TechEd Europe.

    4. ASP.NET and the Real-Time Web - Teched US

      Damian Edwards presents real-time web development with ASP.NET SignalR at TechEd US.

    5. Codemania 2012: SignalR

      In this video at Codemania 2012, Damian Edwards demonstrates using the ASP.NET SignalR library for real-time web development.


    Below is a 2d Canvas Red Filled Rectangle
    No Canvas Support
    Above is a 2d Canvas Red Filled Rectangle















    	<section id="login">
    	<ul id="menu">
    There is a script library modernizr-2.5.3.js that allows older browsers to handle html5, example above

    Contents Anchor E

        var chat = $; = prompt("What's your name?", "");
        chat.receive = function(name, message){
            $("#messages").append("  "+name+": "+message);
        public class Chat : Hub 
            public void Distribute(string message) 
                Clients.receive(, message);
    Wilmott Online Technical Forum For Derivative Experts   Brad Wilson:.webstack-of-love   channel9 msdn Series: Building-Web-Apps-with-ASP-NET 01-Whats-New-in-ASPNET-45   Damian Edwards and David Fowler Demonstrate SignalR  


    <a href="#" style="color:red;">NOTHIS</a>
    <a href="#" style="color:red;">NOTHIS</a>
    <h3 class="myclass"><a href="#" style="color:red;">HELLO</a></h3>
    var n = document.getElementById('some').getElementsByTagName('h3')[0].getElementsByTagName('a')[0].innerHTML;
    var linkText = document.getElementById('some').getElementsByTagName('a')[0].innerHTML;
    //or if you have jQuery
    var linkText = $('#some').find('a').html();
        $('.submit').click( function(){
            $('.submit').css('color', '#ff0000');
                .click(function(){alert('foo'); }));
    public User FindUserByEmail(string email)
        User user = null;
        using (var connection = new SqlConnection(ConfigurationManager.ConnectionStrings["Default"].ConnectionString))
        using (var command = new SqlCommand("select id, email, hashed_password, salt from users where email = @email", connection))
            command.Parameters.Add("@email", SqlDbType.NVarChar, 50).Value = form.Email);
            using (var reader = command.ExecuteReader())
                if (reader.Read())
                    user = new User {Id = reader.GetInt32(0), Email = reader.GetString(1), Password = reader.GetString(2), salt = reader.GetString(3)};
        return user;
    Content Site: Home Page  » Content Site: Programming Page  Site Frames Explained In A JS Windows Tab  Sample - JS Windows Page  Content Site: Colours Page  Content Site: Article Style   Article Ideas Wilmott Online Technical Forum For Derivative Experts