ASHISH SRIVASTAVA

Tuesday 29 November 2016

SignalR Examples

ChatHUBS.cs

Code

public void Send(string name, string message) {
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}

Startup.cs

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

Htmlpage

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
background-color: #99CCFF;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
</style>
<meta charset="utf-8" /> </head>
<body>
<div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="signalr/hubs"></script>
<script type="text/javascript">
$(function() {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function(name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<li><strong>' + encodedName + '</strong>: ' + encodedMsg + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function() {
$('#sendmessage').click(function() {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
</script>
</body>
</html>

Hub connect check

<script>
$.connection.hub.start().done(function() {
alert("Hub Connected");
}).fail(function() {
alert("Hub error");
});
</script>

AngularJs ng-repeat Example

Angular js URL:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  

Html tag:

<div ng-app="myApp" ng-controller="myCntrl">
<table>
<thead>
<tr>
<th>
Emp Code.
</th>
<th>
Employee Name
</th>
<th>
Pan No
</th>
</tr>
</thead>
<tr ng-repeat="student in EmployeeList">
<td ng-bind="student.StudentID">
</td>
<td ng-bind="student.StudentName">
</td>
<td ng-bind="student.PanNO">
</td>
</tr>
</table>
</div>

Angular js Script :

<script>
var app = angular.module("myApp", []);
app.controller("myCntrl", function ($scope, $http) {
$scope.fillList = function () {
$scope.EmployeeName = "";
var httpreq = {
method: 'POST',
url: 'Default2.aspx/GetList',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: {}
}
$http(httpreq).success(function (response) {
$scope.EmployeeList = response.d;
})
};
$scope.fillList();
});
</script>

Asp.net Cs page code:

using System;  
using System.Collections.Generic;  
using System.Data.SqlClient;  
using System.Data;  
  
public partial class Default2 : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
  
    }  
    [System.Web.Services.WebMethod()]  
    public static List<Employee> GetList()  
    {  
        List<Employee> names = new List<Employee>();  
        DataSet ds = new DataSet();  
        using (SqlConnection con = new SqlConnection(@"Data Source=140.175.165.10;Initial Catalog=Payroll_290716;user id=sa;password=Goal@12345;"))  
        {  
            using (SqlCommand cmd = new SqlCommand())  
            {  
                cmd.Connection = con;  
                cmd.CommandText = "select EmpId,Empcode, name,PanNo from EMPLOYEEMASTER  order by Name;";  
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))  
                {  
                    da.Fill(ds);  
                }  
            }  
        }  
        if (ds != null && ds.Tables.Count > 0)  
        {  
            foreach (DataRow dr in ds.Tables[0].Rows)  
                names.Add(new Employee(int.Parse(dr["EmpId"].ToString()), dr["name"].ToString(), dr["PanNo"].ToString()));  
        }  
        return names;  
    }  
}  
public class Employee  
{  
    public int StudentID;  
    public string StudentName;  
    public string PanNO;  
    public Employee(int _StudentID, string _StudentName, string _PanNO)  
    {  
        StudentID = _StudentID;  
        StudentName = _StudentName;  
        PanNO = _PanNO;  
    }  
}   

Whole HTML page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div ng-app="myApp" ng-controller="myCntrl">  
        <table>  
            <thead>  
                <tr>  
                    <th>  
                        Emp Code.  
                    </th>  
                    <th>  
                        Employee Name  
                    </th>  
                    <th>  
                        Pan No  
                    </th>  
                       
                </tr>  
            </thead>  
            <tr ng-repeat="student in EmployeeList">  
                <td ng-bind="student.StudentID">  
                </td>  
                <td ng-bind="student.StudentName">  
                </td>  
                <td ng-bind="student.PanNO">  
                </td>  
                   
            </tr>  
        </table>  
    </div>  
    <script>  
        var app = angular.module("myApp", []);  
        app.controller("myCntrl", function ($scope, $http) {  
  
            $scope.fillList = function () {  
                $scope.EmployeeName = "";  
                var httpreq = {  
                    method: 'POST',  
                    url: 'Default2.aspx/GetList',  
                    headers: {  
                        'Content-Type': 'application/json; charset=utf-8',  
                        'dataType': 'json'  
                    },  
                    data: {}  
                }  
                $http(httpreq).success(function (response) {  
                    $scope.EmployeeList = response.d;  
                })  
            };  
            $scope.fillList();  
        });  
    </script>  
    </form>  
</body>  
</html>

Tuesday 29 November 2016

SignalR Examples

AngularJs ng-repeat Example

Upload valid file in C#