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
    Gaming...
    "If you care to email me at dedward@microsoft.com or come into the SignalR room on JabbR (http://jabbr.net/#/rooms/signalr) 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*/
                 
        routes.MapRoute(
                    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)
                {
                    app.MapSignalR();
                }
            }
        } 
    
    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 
        {
            [Required]
            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.

    HTML5

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

    type="color"

    type="date"

    type="datetime"

    type="datetime-local"

    type="email"

    type="month"

    type="number"

    type="range"

    type="search"

    type="tel"

    type="time"

    type="url"

    type="week"

    type="submit"

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

    Contents Anchor E

    Client:
        var chat = $.connection.chat;
        chat.name = prompt("What's your name?", "");
     
        chat.receive = function(name, message){
            $("#messages").append("  "+name+": "+message);
        }
     
        $("#send-button").click(function(){
            chat.distribute($("#text-input").val());
        });
    
    Server:
        public class Chat : Hub 
        {
            public void Distribute(string message) 
            {
                Clients.receive(Caller.name, message);
            }
        }
    
    vanilla.json
    [
    	{"key":"data","key1":"data1","date":"\/Date(1230375600000+1300)\/"},
    	{"key":"data","key1":"data1","date":"\/Date(1230375600000+1300)\/"}
    ]
    
    Wilmott Online Technical Forum For Derivative Experts   Brad Wilson:.webstack-of-love   http://channel9.msdn.com/Events/TechEd/Europe/2012/DEV213   channel9 msdn Series: Building-Web-Apps-with-ASP-NET 01-Whats-New-in-ASPNET-45   Damian Edwards and David Fowler Demonstrate SignalR  
    NOTHIS NOTHIS

    HELLO

    <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();
    
    //$(/*document).ready(*/function(){
    
    $(function(){
        $('.submit').click( function(){
            $('.submit').css('color', '#ff0000');
            $('#container')
                .append($('Clicked!')
                .click(function(){alert('foo'); }));
            });
    });
    
    
    $('.datepicker').pickadate()
    $('.timepicker').pickatime() 
    
    
    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);
            connection.Open();
            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