▼

Tuesday 29 November 2016

SignalR Examples

ChatHUBS.cs 

Code
  1. public void Send(string name, string message) {  
  2.     // Call the broadcastMessage method to update clients.  
  3.     Clients.All.broadcastMessage(name, message);  
  4. }  
Startup.cs

  1. public void Configuration(IAppBuilder app)  
  2. {  
  3.     // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888  
  4.     app.MapSignalR();  
  5. }  
Htmlpage

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .container {  
  8.             background-color: #99CCFF;  
  9.             border: thick solid #808080;  
  10.             padding: 20px;  
  11.             margin: 20px;  
  12.         }  
  13.     </style>  
  14.     <meta charset="utf-8" /> </head>  
  15.   
  16. <body>  
  17.     <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" />  
  18.         <ul id="discussion"></ul>  
  19.     </div>  
  20.     <!--Script references. -->  
  21.     <!--Reference the jQuery library. -->  
  22.     <script src="Scripts/jquery-1.6.4.min.js"></script>  
  23.     <!--Reference the SignalR library. -->  
  24.     <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>  
  25.     <!--Reference the autogenerated SignalR hub script. -->  
  26.     <script src="signalr/hubs"></script>  
  27.     <!--Add script to update the page and send messages.-->  
  28.     <script type="text/javascript">  
  29.         $(function() {  
  30.             // Declare a proxy to reference the hub.  
  31.             var chat = $.connection.chatHub;  
  32.             // Create a function that the hub can call to broadcast messages.  
  33.             chat.client.broadcastMessage = function(name, message) {  
  34.                 // Html encode display name and message.  
  35.                 var encodedName = $('<div />').text(name).html();  
  36.                 var encodedMsg = $('<div />').text(message).html();  
  37.                 // Add the message to the page.  
  38.                 $('#discussion').append('<li><strong>' + encodedName + '</strong>:  ' + encodedMsg + '</li>');  
  39.             };  
  40.             // Get the user name and store it to prepend to messages.  
  41.             $('#displayname').val(prompt('Enter your name:', ''));  
  42.             // Set initial focus to message input box.  
  43.             $('#message').focus();  
  44.             // Start the connection.  
  45.             $.connection.hub.start().done(function() {  
  46.                 $('#sendmessage').click(function() {  
  47.                     // Call the Send method on the hub.  
  48.                     chat.server.send($('#displayname').val(), $('#message').val());  
  49.                     // Clear text box and reset focus for next comment.  
  50.                     $('#message').val('').focus();  
  51.                 });  
  52.             });  
  53.         });  
  54.     </script>  
  55. </body>  
  56.   
  57. </html>  
Hub connect check

  1. <script>  
  2.     $.connection.hub.start().done(function() {  
  3.         alert("Hub Connected");  
  4.     }).fail(function() {  
  5.         alert("Hub error");  
  6.     });  
  7. </script>  
- No comments:

AngularJs ng-repeat Example

Angular js URL:
  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
Html tag:
  1. <div ng-app="myApp" ng-controller="myCntrl">  
  2.         <table>  
  3.             <thead>  
  4.                 <tr>  
  5.                     <th>  
  6.                         Emp Code.  
  7.                     </th>  
  8.                     <th>  
  9.                         Employee Name  
  10.                     </th>  
  11.                     <th>  
  12.                         Pan No  
  13.                     </th>  
  14.                        
  15.                 </tr>  
  16.             </thead>  
  17.             <tr ng-repeat="student in EmployeeList">  
  18.                 <td ng-bind="student.StudentID">  
  19.                 </td>  
  20.                 <td ng-bind="student.StudentName">  
  21.                 </td>  
  22.                 <td ng-bind="student.PanNO">  
  23.                 </td>  
  24.                    
  25.             </tr>  
  26.         </table>  
  27.     </div>  

Angular js Script :

  1. <script>  
  2.        var app = angular.module("myApp", []);  
  3.        app.controller("myCntrl", function ($scope, $http) {  
  4.   
  5.            $scope.fillList = function () {  
  6.                $scope.EmployeeName = "";  
  7.                var httpreq = {  
  8.                    method: 'POST',  
  9.                    url: 'Default2.aspx/GetList',  
  10.                    headers: {  
  11.                        'Content-Type': 'application/json; charset=utf-8',  
  12.                        'dataType': 'json'  
  13.                    },  
  14.                    data: {}  
  15.                }  
  16.                $http(httpreq).success(function (response) {  
  17.                    $scope.EmployeeList = response.d;  
  18.                })  
  19.            };  
  20.            $scope.fillList();  
  21.        });  
  22.    </script> 
Asp.net Cs page code:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data.SqlClient;  
  4. using System.Data;  
  5.   
  6. public partial class Default2 : System.Web.UI.Page  
  7. {  
  8.     protected void Page_Load(object sender, EventArgs e)  
  9.     {  
  10.   
  11.     }  
  12.     [System.Web.Services.WebMethod()]  
  13.     public static List<Employee> GetList()  
  14.     {  
  15.         List<Employee> names = new List<Employee>();  
  16.         DataSet ds = new DataSet();  
  17.         using (SqlConnection con = new SqlConnection(@"Data Source=140.175.165.10;Initial Catalog=Payroll_290716;user id=sa;password=Goal@12345;"))  
  18.         {  
  19.             using (SqlCommand cmd = new SqlCommand())  
  20.             {  
  21.                 cmd.Connection = con;  
  22.                 cmd.CommandText = "select EmpId,Empcode, name,PanNo from EMPLOYEEMASTER  order by Name;";  
  23.                 using (SqlDataAdapter da = new SqlDataAdapter(cmd))  
  24.                 {  
  25.                     da.Fill(ds);  
  26.                 }  
  27.             }  
  28.         }  
  29.         if (ds != null && ds.Tables.Count > 0)  
  30.         {  
  31.             foreach (DataRow dr in ds.Tables[0].Rows)  
  32.                 names.Add(new Employee(int.Parse(dr["EmpId"].ToString()), dr["name"].ToString(), dr["PanNo"].ToString()));  
  33.         }  
  34.         return names;  
  35.     }  
  36. }  
  37. public class Employee  
  38. {  
  39.     public int StudentID;  
  40.     public string StudentName;  
  41.     public string PanNO;  
  42.     public Employee(int _StudentID, string _StudentName, string _PanNO)  
  43.     {  
  44.         StudentID = _StudentID;  
  45.         StudentName = _StudentName;  
  46.         PanNO = _PanNO;  
  47.     }  
  48. }   
Whole HTML page: 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div ng-app="myApp" ng-controller="myCntrl">  
  12.         <table>  
  13.             <thead>  
  14.                 <tr>  
  15.                     <th>  
  16.                         Emp Code.  
  17.                     </th>  
  18.                     <th>  
  19.                         Employee Name  
  20.                     </th>  
  21.                     <th>  
  22.                         Pan No  
  23.                     </th>  
  24.                        
  25.                 </tr>  
  26.             </thead>  
  27.             <tr ng-repeat="student in EmployeeList">  
  28.                 <td ng-bind="student.StudentID">  
  29.                 </td>  
  30.                 <td ng-bind="student.StudentName">  
  31.                 </td>  
  32.                 <td ng-bind="student.PanNO">  
  33.                 </td>  
  34.                    
  35.             </tr>  
  36.         </table>  
  37.     </div>  
  38.     <script>  
  39.         var app = angular.module("myApp", []);  
  40.         app.controller("myCntrl", function ($scope, $http) {  
  41.   
  42.             $scope.fillList = function () {  
  43.                 $scope.EmployeeName = "";  
  44.                 var httpreq = {  
  45.                     method: 'POST',  
  46.                     url: 'Default2.aspx/GetList',  
  47.                     headers: {  
  48.                         'Content-Type': 'application/json; charset=utf-8',  
  49.                         'dataType': 'json'  
  50.                     },  
  51.                     data: {}  
  52.                 }  
  53.                 $http(httpreq).success(function (response) {  
  54.                     $scope.EmployeeList = response.d;  
  55.                 })  
  56.             };  
  57.             $scope.fillList();  
  58.         });  
  59.     </script>  
  60.     </form>  
  61. </body>  
  62. </html>
- 1 comment: