signalR send notification to specific client - ajax

when i pass the userId to stored procedure i need to refresh the page to get the realtime notification.but when i use the stored procedure without any parameters it works fine below is my controller.
using NuNetwork.Hubs;
using NuNetwork.Models;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace NuNetwork.Controllers
{
public class NotificationController : Controller
{
// GET: Notification
public ActionResult Notification()
{
return View();
}
public ActionResult GetMessages()
{
return PartialView("GetMessages", GetAllMessages());
}
public IEnumerable<Messages> GetAllMessages()
{
string connString =ConfigurationManager.ConnectionStrings["ConNew"].ConnectionString;
var messages = new List<Messages>();
using (var connection = new SqlConnection(connString))
{
connection.Open();
using (SqlCommand command = new SqlCommand("dbo.USPNotificationSelect", connection))
{
command.CommandType = CommandType.StoredProcedure;
command.Parameters.AddWithValue("#UserId", SqlDbType.Int).Value =Session["UserId"];
command.Notification = null;
var dependency = new SqlDependency(command);
dependency.OnChange += new OnChangeEventHandler(dependency_OnChange);
if (connection.State == ConnectionState.Closed)
connection.Open();
var reader = command.ExecuteReader();
while (reader.Read())
{
messages.Add(item:
new Messages
{ notification = (int)reader["NotificationId"],
post = (string)reader["Post"],
notificationType = (string)reader["Note"],
createdBy =(string)reader["CreatedBy"],
viewedBy =(string) reader["ViewedBy"] });
}
}
}
return messages;
}
private void dependency_OnChange(object sender, SqlNotificationEventArgs e)
{
if (e.Type == SqlNotificationType.Change)
{
MessagesHub.SendMessages();
}
}
}
}
and my Hub is
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Configuration;
namespace NuNetwork.Hubs
{
public class MessagesHub : Hub
{
private static string constr = ConfigurationManager.ConnectionStrings["ConNew"].ConnectionString;
public void Hello()
{
Clients.All.hello();
}
[HubMethodName("sendMessages")]
public static void SendMessages()
{
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<MessagesHub>();
context.Clients.All.updateMessages();
}
}
}
my cshtml page is
#{
Layout = "~/Views/Shared/HomeNavBar.cshtml";
}
<div class="row">
<div class="col-md-12">
<div id="messagesTable"></div>
<div id="text"></div>
</div>
</div>
#section Scripts{
<script src="~/Scripts/jquery.signalR-2.2.2.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.messagesHub;
//debugger;
// Create a function that the hub can call to broadcast messages.
notifications.client.updateMessages = function () {
getAllMessages()
};
// Start the connection.
$.connection.hub.start().done(function () {
getAllMessages();
}).fail(function (e) {
alert(e);
});
});
function getAllMessages()
{
var tbl = $('#messagesTable');
$.ajax({
url: '/Notification/GetMessages',
contentType: 'application/html ; charset:utf-8',
type: 'GET',
dataType: 'html'
}).success(function (result) {
tbl.empty().append(result);
}).error(function () {
});
}
</script>
}
so how can i get realtime notifications without refreshing the page while passing userId to stored procedure

Related

jqueryui autocomplete render HTML returned by server

I have a simple page with an input text-box. The text box is bound to jquery ui autocomplete that makes an AJAX call to the server. My server side code is an ASP.NET MVC site. The only difference I have as compared to most examples found over the Internet is that my Server side code returns a PartialView (html code) as results instead of JSON. I see the AJAX call happening and I see the HTML response in the AJAX success event as well.
My question is how do I bind this HTML data to show in the AutoComplete?
The code I have so far is:
$("#quick_search_text").autocomplete({
minLength: 3,
html: true,
autoFocus: true,
source: function (request, response) {
$.ajax({
type: "POST",
url: "serversideurl",
data: "{ 'SearchTerm': '" + request.term + "', 'SearchCategory': '" + $("#quick_search_category").val() + "' }",
contentType: "application/json; charset=utf-8",
dataType: "html",
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
},
success: function (data) {
//THIS IS WHERE MY HTML IS RETURNED FROM SERVER SIDE
//HOW DO I BIND THIS TO JQUERY UI AUTOCOMPLETE
}
});
},
select: function (event, ui) {
},
response: function (event, ui) {
console.log(ui);
console.log(event);
}
});
This works:
1) Create an action in your controller and set the RouteConfig to start this action
public class HomeController : Controller
{
public ActionResult Index20()
{
MyViewModel m = new MyViewModel();
return View(m);
}
Create a view without any type of master page
Add this view model:
public class MyViewModel
{
public string SourceCaseNumber { get; set; }
}
Go to Manage Nuget Packages or PM Console and add to MVC 5 project - Typeahead.js for MVC 5 Models by Tim Wilson
Change the namespace for the added HtmlHelpers.cs to System.Web.Mvc.Html and rebuild
Add this class:
public class CasesNorm
{
public string SCN { get; set; }
}
Add these methods to your controller:
private List<Autocomplete> _AutocompleteSourceCaseNumber(string query)
{
List<Autocomplete> sourceCaseNumbers = new List<Autocomplete>();
try
{
//You will goto your Database for CasesNorm, but if will doit shorthand here
//var results = db.CasesNorms.Where(p => p.SourceCaseNumber.Contains(query)).
// GroupBy(item => new { SCN = item.SourceCaseNumber }).
// Select(group => new { SCN = group.Key.SCN }).
// OrderBy(item => item.SCN).
// Take(10).ToList(); //take 10 is important
CasesNorm c1 = new CasesNorm { SCN = "11111111"};
CasesNorm c2 = new CasesNorm { SCN = "22222222"};
IList<CasesNorm> aList = new List<CasesNorm>();
aList.Add(c1);
aList.Add(c2);
var results = aList;
foreach (var r in results)
{
// create objects
Autocomplete sourceCaseNumber = new Autocomplete();
sourceCaseNumber.Name = string.Format("{0}", r.SCN);
sourceCaseNumber.Id = Int32.Parse(r.SCN);
sourceCaseNumbers.Add(sourceCaseNumber);
}
}
catch (EntityCommandExecutionException eceex)
{
if (eceex.InnerException != null)
{
throw eceex.InnerException;
}
throw;
}
catch
{
throw;
}
return sourceCaseNumbers;
}
public ActionResult AutocompleteSourceCaseNumber(string query)
{
return Json(_AutocompleteSourceCaseNumber(query), JsonRequestBehavior.AllowGet);
}
credit goes to http://timdwilson.github.io/typeahead-mvc-model/

Sending data by using AngularJS to an action method of ASP.NET MVC 5 controller

I've used Umbraco 7.3 and ASP.NET MVC 5 in my project.
I want to Send data from AngularJS to ASP.NET MVC 5 controller.
How can I do it?
reply.html :
<div ng-controller="Reply.controller">
<input type="button" name="Send Reply" ng-click="SendReply()"/>
</div>
Reply.controller.js:
angular.module("umbraco")
.controller("Reply.controller", function ($scope) {
$scope.SendReply = function () {
var SendTo = $("#Email").val();
var TextMessage = $("#TextMessage").val();
//TODO: It's need to write some codes to handle data to an action in ASP.NET MVC controller.But how?
}
});
ASP.NET MVC controller:
public class IncomingCallSurfaceController : BaseSurfaceController
{
public ActionResult Reply(SendMailModel sendMailModel)
{
//TODO: how I should be write this method that be proper for getting data from angularjs?
return null;
}
}
SendMailModel:
public class SendMailModel
{
public string TextMessage { get; set; }
public string SendTo { get; set; }
}
package.manifest:
{
propertyEditors: [
{
alias: "Send.Reply",
name: "Send Reply",
editor:{
view:"/App_Plugins/Reply/Reply.html"
},
}
]
,
javascript:[
'/App_Plugins/Reply/Reply.controller.js'
]
}
Updated: add a picture of structure of solution folders
Reply.controller.js :
angular.module("umbraco")
.controller("Reply.controller", function ($scope, $http, $routeParams) {
$scope.SendReply = function () {
var sendTo = $("#Email").val();
var textMessage = $("#TextMessage").val();
var contentId = $routeParams.id;
$scope.xxx = "I'm here!";
var dataObj = {
TextMessage: textMessage,
SendTo: sendTo,
ContentId: contentId
};
$http.post("backoffice/Reply/ReplyToIncomingCall/ReplyMessage", dataObj)
.then(function (response) {
alert("YES!");
//TODO:
});
}
});
ReplyToIncomingCallController.cs :
namespace Jahan.Nuts.Web.Mvc.UmbracoCms.App.App_Plugins.Reply
{
[PluginController("Reply")]
public class ReplyToIncomingCallController :UmbracoAuthorizedJsonController
{
[HttpPost][ChildActionOnly]
public ActionResult ReplyMessage(SendMailViewModel vm)
{
return null;
}
}
}
SendMailViewModel :
public class SendMailViewModel
{
public string TextMessage { get; set; }
public string SendTo { get; set; }
public int ContentId { get; set; }
}
Tree Structure Of Files :
If you want to know more about backoffice-routing in Umbraco 7.x, you can visit this link.
Firstly, when you use Angular try to avoid use jQuery.
Use ng-model from angular to bind input value to your controller. And use $http module to send data to API.
View:
<div ng-controller="Reply.controller">
<input type="text" ng-model="message.TextMessage"/>
<input type="text" ng-model="message.SendTo"/>
<input type="button" name="Send Reply" ng-click="SendReply()"/>
</div>
Angular:
angular.module("umbraco")
.controller("Reply.controller", function($scope, $http) {
$scope.message = {
TextMessage: '',
SendTo: ''
};
$scope.SendReply = function() {
//TODO URL
$http.post('/umbraco/api/IncomingCallSurface/Reply', $scope.message)
.then(function(response) {
//TODO
});
}
});
ASP.NET MVC:
public class IncomingCallSurfaceController : UmbracoApiController
{
[HttpPost]
public ActionResult Reply(SendMailModel sendMailModel)
{
//TODO: how I should be write this method that be proper for getting data from angularjs?
return null;
}
}

WebSockets - ASP.NET 4.5 IIS 8 Final Release

All the blogs online have been in reference to the beta with the old namespaces and use nuget packages. Im trying to get a simple low level websockets example going based on whats in the wild now and its just not working.
The client is never able to establish a connection. The error from the chrome debug console is:
"Port error: Could not establish connection. Receiving end does not exist. "
However, I know the request is being received because I put code in my ashx handler to email me at various points just to confirm the request was coming in and my task was firing etc.
Config - All Final Release Versions:
Windows Server 2012/IIS 8/ ASP.NET 4.5
My sample is based on:
http://www.asp.net/vnext/overview/whitepapers/whats-new#_Toc318097383
The handler:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.WebSockets;
using System.Net.WebSockets;
using System.Threading;
using System.Text;
using System.Threading.Tasks;
namespace myWebSocket
{
/// <summary>
/// Summary description for wsHandler
/// </summary>
public class wsHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
context.AcceptWebSocketRequest(MyWebSocketTask);
}
public async Task MyWebSocketTask(WebSocketContext context)
{
WebSocket socket = context.WebSocket;
while (true)
{
System.Net.Mail.MailMessage message = new System.Net.Mail.MailMessage();
message.To.Add("email#address.com");
message.Subject = "Handler";
message.From = new System.Net.Mail.MailAddress("michaelo#hostcollective.com");
message.Body = string.Format("Task Launched {0}", socket.State.ToString());
System.Net.Mail.SmtpClient smtp = new System.Net.Mail.SmtpClient("localhost");
smtp.Send(message);
ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024]);
// Asynchronously wait for a message to arrive from a client
WebSocketReceiveResult result =
await socket.ReceiveAsync(buffer, CancellationToken.None);
// If the socket is still open, echo the message back to the client
if (socket.State == WebSocketState.Open)
{
string userMessage = Encoding.UTF8.GetString(buffer.Array, 0,
result.Count);
userMessage = "You sent: " + userMessage + " at " +
DateTime.Now.ToLongTimeString();
buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMessage));
// Asynchronously send a message to the client
await socket.SendAsync(buffer, WebSocketMessageType.Text,
true, CancellationToken.None);
}
else { break; }
}
}
public bool IsReusable
{
get
{
return true;
}
}
}
}
As for the client, this is the simplest one based on the stuff at websockets.org
<script language="javascript" type="text/javascript">
// var wsUri = "ws://echo.websocket.org/";
var wsUri = "ws://iis8hosting.com/mikey/wshandler.ashx";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function (evt) { onOpen(evt) };
websocket.onclose = function (evt) { onClose(evt) };
websocket.onmessage = function (evt) { onMessage(evt) };
websocket.onerror = function (evt) { onError(evt) };
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onClose(evt) {
writeToScreen("DISCONNECTED");
}
function onMessage(evt) {
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message);
websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
<h2>WebSocket Test</h2><div id="output"></div>
Anybody have any ideas or another simple sample such as this that is confirmed to work with the final release stuff. Thanks for taking the time to read and respond.
I could make your code work with some changes in your code. You may not require to do all of the below changes in your environment.
On Server side put a try catch block around SMTP code Verify context.IsWebSocketConnection is true
if (context.IsWebSocketRequest)
{
context.AcceptWebSocketRequest(MyWebSocketTask);
}
else
{
throw new HttpException("This isn't a WebSocket request!");
}
On client side: I changed code like below based on errors i got :).
This code will work in IISExpress 8 as well.
var wsUri = "ws://<%: Request.Url.Host %>:<%: Request.Url.Port %><%:
Response.ApplyAppPathModifier("~/wshandler.ashx")
Added serverData inside form like below.
<form id="form1" runat="server">
<div id="serverData"></div>
</form>
And used it in writeToScreen() function.
function writeToScreen(message) {
var serverData = document.getElementById("serverData");
var newElem = document.createElement("p");
newElem.style.wordWrap = "break-word";
newElem.innerHTML = message;
serverData.insertBefore(newElem, serverData.firstChild);
}
onMessage() function closes the connection from client side. So only one message is sent and received.
Make sure the IE10 browser's document mode is "Standard". I used IE10 for testing your code.

Workaround for missing whitelist in phonegap for windows phone

In my other question I found out that there is no whitelist for windows phones.
Now I am looking for a native code workaround but I have never written a line of native code for windows phones. So it's not easy for me. I think I can download a page like this:
void GetAirportData()
{
var url = new Uri("http://server.example.com/data.php", UriKind.Absolute);
var webClient = new WebClient();
webClient.OpenReadCompleted += new OpenReadCompletedEventHandler(webClient_OpenReadCompleted);
webClient.OpenReadAsync(url, url);
}
But how can a get this data to my javascript app?
Here is a workaround. The following code is a Phonegap command that implements Cross Domain Call functionality.
using System;
using System.IO;
using System.Net;
using System.Runtime.Serialization;
using WP7CordovaClassLib.Cordova;
using WP7CordovaClassLib.Cordova.Commands;
using WP7CordovaClassLib.Cordova.JSON;
namespace Cordova.Extension.Commands //namespace is predefined, don't change it!
{
public class Cdc : BaseCommand //Cross domain call
{
[DataContract]
public class CdcOptions
{
[DataMember(Name = "path")]
public string Path { get; set; }
}
public void Call(string args)
{
CdcOptions options = JsonHelper.Deserialize<CdcOptions>(args);
var url = new Uri(options.Path, UriKind.Absolute);
var webClient = new WebClient();
webClient.OpenReadCompleted += (s, e) =>
{
if (e.Error != null)
{
DispatchCommandResult(new PluginResult(PluginResult.Status.ERROR, "Error"));
return;
}
//Stream -> string
var sr = new StreamReader(e.Result);
var result = sr.ReadToEnd();
DispatchCommandResult(
new PluginResult(PluginResult.Status.OK, result));
};
webClient.OpenReadAsync(url, url);
}
}
}
Test on the client side:
<script type="text/javascript">
function cdc(path, success, fail) {
PhoneGap.exec(
success, //success
fail, //fail
"Cdc", //service
"Call", //action
path //args
);
};
function onDeviceReady(e) {
cdc(
{
path: "http://stackoverflow.com/questions/9291809/workaround-for-missing-whitelist-in-phonegap-for-windows-phone"
},
function (arg) {
document.getElementById('test').innerHTML = arg;
}, function (arg) {
document.getElementById('test').innerHTML = arg;
});
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

Deployed Mvc app won't work

I'm having some problems publishing an asp.net mvc3 application. When deployed, the application fails with "The controller for path '/Dashboard/Alarmes' was not found or does not implement IController" where Alarmes is an action at DashboardController. Not sure if it has something to do with it, but Alarmes return an Json result.
Another thing I noticed is that some assemblies, that are referenced by another project in the same solution, are not deployed (only if I reference them in the mvc project itself).
Any tips on these?
Update:
The routes registration:
public static void RegisterRoutes(RouteCollection routes) {
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.IgnoreRoute("{*allpng}", new { allpng = #".*\.png(/.*)?" });
routes.IgnoreRoute("{*favicon}", new { favicon = #"(.*/)?favicon.ico(/.*)?" });
routes.IgnoreRoute("{directory}/{resource}.asmx/{*pathInfo}");
routes.MapRoute("Default", "{controller}/{action}/{id}", new {
controller = "Dashboard",
action = "Index",
id = UrlParameter.Optional
});
}
the action:
public ActionResult Alarmes() {
var alarmesPorPonto = new Dictionary<string, List<Ponto>>();
var alarmes = _repositorioDeAlarmes.Pesquise(ObtenhaInicio(), DateTime.Today);
foreach (var alarme in alarmes) {
var tipo = alarme.Tipo;
var ponto = alarme.Ponto;
if (!alarmesPorPonto.ContainsKey(tipo.Nome)) {
alarmesPorPonto.Add(tipo.Nome, new List<Ponto>());
}
if (!alarmesPorPonto[tipo.Nome].Contains(ponto)) {
alarmesPorPonto[tipo.Nome].Add(ponto);
}
}
return Json(alarmesPorPonto.Select(a => new { Tipo = a.Key, a.Value.Count }), JsonRequestBehavior.AllowGet);
}
Another missing info: I'm deploying this application to a virtual directory.
Update 2
the full controller class:
public class DashboardController : Controller {
private readonly IRepositorioDeAlarmes _repositorioDeAlarmes;
private readonly bool _enableMap;
public DashboardController(IRepositorioDeAlarmes repositorioDeAlarmes) {
_repositorioDeAlarmes = repositorioDeAlarmes;
_enableMap = Convert.ToBoolean(ConfigurationManager.AppSettings["EnableMap"]);
}
public ActionResult Index() {
ViewBag.EnableMap = _enableMap;
return View();
}
public ActionResult Alarmes() {
var alarmesPorPonto = new Dictionary<string, List<Ponto>>();
var alarmes = _repositorioDeAlarmes.Pesquise(ObtenhaInicio(), DateTime.Today);
foreach (var alarme in alarmes) {
var tipo = alarme.Tipo;
var ponto = alarme.Ponto;
if (!alarmesPorPonto.ContainsKey(tipo.Nome)) {
alarmesPorPonto.Add(tipo.Nome, new List<Ponto>());
}
if (!alarmesPorPonto[tipo.Nome].Contains(ponto)) {
alarmesPorPonto[tipo.Nome].Add(ponto);
}
}
return Json(alarmesPorPonto.Select(a => new { Tipo = a.Key, a.Value.Count }), JsonRequestBehavior.AllowGet);
}
}
I suspect that you have hardcoded the url in your javascript when invoking the action instead of using an url helper.
So you wrote:
<script type="text/javascript">
$.getJSON('/Dashboard/Alarmes', function(result) {
...
});
</script>
instead of:
<script type="text/javascript">
$.getJSON('#Url.Action("Alarmes", "Dashboard")', function(result) {
...
});
</script>
which would have generated the correct url in the case when your application is hosted in a virtual directory which would be:
<script type="text/javascript">
$.getJSON('/MyAppName/Dashboard/Alarmes', function(result) {
...
});
</script>
What if you try to clean the ASP.Net temporary files and restart the web server?
[{windows-path}\Microsoft.NET\Framework{framework-version}\Temporary ASP.NET Files]

Resources