Check the difference between two dates with a custom JavaScript implementation

This might be useful if you are having problems with different browsers and how they handle JavaScript and date + time data.


var duedateString = "you due date time value here";

 var today = new Date();

 var ddYear = parseInt(duedateString.substring(0 ,4));
 var ddMonth = parseInt(duedateString.substring(4 ,6));
 var ddDay = parseInt(duedateString.substring(6 ,8));

 var yearDifference = ddYear - (today.getFullYear()) ;
 var monthDifference = ddMonth - (today.getMonth() +1);
 var dayDifference = ddDay - (today.getDate());
 var stringDueDateParsed = duedateString.substring(6 ,8) + "." + duedateString.substring(4 ,6) + "." + duedateString.substring(0 ,4);
 var dueDate = new Date((ddYear),(ddMonth),(ddDay));

 var totalDifference = 0;

 if(yearDifference < 0)
 {
 totalDifference = -1;
 } else if(yearDifference > 0)
 {
 totalDifference = 1;
 } else if(monthDifference < 0)
 {
 totalDifference = -1;
 } else if(monthDifference > 0)
 {
 totalDifference = 1;
 } else if(dayDifference < 0)
 {
 totalDifference = -1;
 } else if(dayDifference > 0)
 {
 totalDifference = 1;
 } else
 {
 totalDifference = 0;
 }

 // the dates are equal
 if(totalDifference === 0)
 {
 // do something
 }
 // The dueDate is greater than the current date, in the future
 else if(totalDifference > 0)
 {
 // do something
 }
 // The dueDate is smaller than the current date, in the past
 else if(totalDifference < 0)
 {
 // do something
 }

Hiding and showing HTML elements with ASP .NET

Hi,

Ok, this is probably a quite simple thing to do and maybe everyone knows it BUT just in case… :).

Well, you need two things a C# code(or some other way to ouput HTML) to generate and anchor link by which to display or hide a given HTML element.

In this case, let’s say that you have a DIV element. You assign as the ID value the client ID which your control receives from ASP .NET(notice that the unique ID or the ID but the ClientID, it is HTML friendly).

Then you would do something like the code below. You are calling a JavaScript function which receives as parameters the full ID for the DIV element and the start of the DIV full id.

The idea is to be able to identify all of the elements which are under this same hide and show logic while still being able to identify a single item.

Exmaple ID:
id =”cars_ASP.NETUserControlClientID_carnumber”

The bolded part would be used to identify ALL of the items which need be processed at the same time. While the non-bolded value(carnumber) is the identifier for a single item.

The C# code below creates an anchor calling the function below the C# code. Notice the href definition “javascript:void(0)“, this is to avoid page jump in certain browsers and their versions.

String.Format("<a href=\"javascript:void(0)\" onclick=\"showInfo('{0}','{2}')\">{1}</a>", "HTML Element ID to find unique counter or ID" + this.ClienID, "The link title/name", this.ClienID);

function showInfo(id, controlUniqueID) {
// Search for all items and hide them
 $('*[id*=' + controlUniqueID + ']').each(function () {
 $(this).hide();
 });

// Next open only the item which you want to see
 if ($('#' + id).css('display') == 'none') {
 $('#' + id).show();
 }
 else {
 $('#' + id).hide();
 }

 }

How to use: Azure Service Bus – Notification hub, Azure hosted SignalR Hub with .NET clients, Android clients and web JavaScript clients

Huh that is a looong title for a blog post :). It is easier for me to write these all in one post since they are related the code in this case. So here I go, bear with me, it’s going to be alot of stuff and code.

The codes and examples here are from the own personal technology workbench project hosted in Azure. More code and examples how these features and functionality work can be found here.

I will go in the following order with the topics covered in this post:

  • Notification Hub
    • Setting up the Azure Service Bus – Notification Hub
    • Connecting with a .NET Client and sending messages
    • Connecting and listening to messages with an Android device client
  • SignalR Hub
    • Setting up a Azure hosted SignalR hub
    • Connecting and listening to activities with the following clients:
      • Connecting with the .NET Client
      • Connecting with the JavaScript client
      • Connecting with the Android client

Notification Hub

Some links to get you started:

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-push-notifications-app-users/

Setting up the Azure Service Bus – Notification Hub

I wont go into much details here. Microsoft has done a great job documenting these steps, I recommend you go to the following link and follow the first part of these instructions:

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/

What you will need for my code example is a Google Developer account and a API Key from google to be able to send and receive GCM messages to Android devices. Of course you will also need a Azure account to be able to create the notification hub.

Add the following Nugget package:

Microsoft Azure Service Bus

Connecting with a .NET Client and sending messages

The code below will connect from a .NET Client to the Notification Hub. This is done in the class constructor. At the moment this code can only send GCM messages to Android devices. Note that these operations are asynchronous.

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessTrackerLibrary/ServiceBus/NotificationGateway.cs

But you could use a "central" hub from where to send these messages which will handle sending messages to different devices through a WebAPI:
https://github.com/lionadi/MyFitnessTracker/tree/master/FitTrackerHubCentral
https://github.com/lionadi/MyFitnessTracker/blob/master/FitTrackerHubCentral/FitTrackerHubCentral/Controllers/NotificationsController.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.ServiceBus.Notifications;

namespace MyFitnessTrackerLibrary.ServiceBus
{
    // TODO: Replace this with a connection to the notification central hub, do not sent message directly from here in the future!!!!
    public class NotificationGateway
    {
        private NotificationHubClient hub = null;
        private static NotificationGateway _notificationGateway;
        public NotificationGateway()
        {

            hub = NotificationHubClient.CreateClientFromConnectionString(MyFitnessTrackerLibrary.Globals.MyFitAppSettings.NotificationHubConnectionString, MyFitnessTrackerLibrary.Globals.MyFitAppSettings.NotificationHubName);

        }

        ~NotificationGateway()
        {

        }

        public async Task<NotificationOutcome> SendMessage(string message)
        {
            var toast = "{ \"data\" : {\"message\":\"" + "From : " + message + "\"}}";
            return await hub.SendGcmNativeNotificationAsync(toast);
        }

        public static NotificationGateway GetInstance()
        {
            if(_notificationGateway == null)
            {
                _notificationGateway = new NotificationGateway();
            }

            return _notificationGateway;
        }
    }
}

Connecting and listening to messages with an Android device client

The Android side is a bit more complicated and annoying. You have to do more work here.

At the first you need two Microsoft java libraries to be able to connect to a notification hub:

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/libs/notification-hubs-0.4.jar

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/libs/notifications-1.0.1.jar

After this you need to add them to your Android Studio gradle file:

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/build.gradle

dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile 'com.android.support:appcompat-v7:21.0.3'
 compile 'com.google.android.gms:play-services:6.5.87'
 compile 'com.google.code.gson:gson:2.3.1'
 compile files('libs/signalr-client-sdk.jar')
compile files('libs/notifications-1.0.1.jar')
compile files('libs/notification-hubs-0.4.jar')
 compile files('libs/Java-WebSocket-1.3.0.jar')
 compile project(':signalr-client-sdk-android-release')
}

 Please remember to follow these instructions to setup your Android Studio project in a correct manner, more details here:

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/

http://azure.microsoft.com/fi-fi/documentation/articles/notification-hubs-aspnet-backend-android-notify-users/

The most important piece of code is the class named MyHandler in this case which will handle your notifications once your device is registered to the notification hub:

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MyHandler.java


package com.example.adriansimionescu.myfitnessandroidapp;

import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.NotificationCompat;
import com.microsoft.windowsazure.notifications.NotificationsHandler;

public class MyHandler extends NotificationsHandler {
    public static final int NOTIFICATION_ID = 1;
    private NotificationManager mNotificationManager;
    NotificationCompat.Builder builder;
    Context ctx;

    static public MainActivity mainActivity;

    @Override
    public void onReceive(Context context, Bundle bundle) {
        ctx = context;
        String nhMessage = bundle.getString("message");

        sendNotification(nhMessage);
        mainActivity.DialogNotify("Received Notification",nhMessage);
    }

    private void sendNotification(String msg) {
        mNotificationManager = (NotificationManager)
                ctx.getSystemService(Context.NOTIFICATION_SERVICE);

        PendingIntent contentIntent = PendingIntent.getActivity(ctx, 0,
                new Intent(ctx, MainActivity.class), 0);

        NotificationCompat.Builder mBuilder =
                new NotificationCompat.Builder(ctx)
                        .setContentTitle("Notification Hub Demo")
                        .setStyle(new NotificationCompat.BigTextStyle()
                                .bigText(msg))
                        .setContentText(msg);

        mBuilder.setContentIntent(contentIntent);
        mNotificationManager.notify(NOTIFICATION_ID, mBuilder.build());
    }
}</pre>
<pre>

You also need a class that will register you device to the notification hub:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/RegisterClient.java

 


package com.example.adriansimionescu.myfitnessandroidapp;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Set;

import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.methods.HttpPut;
import org.apache.http.client.methods.HttpUriRequest;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.content.Context;
import android.content.SharedPreferences;
import android.util.Log;

public class RegisterClient {
    private static final String PREFS_NAME = "ANHSettings";
    private static final String REGID_SETTING_NAME = "ANHRegistrationId";
    private String Backend_Endpoint;
    SharedPreferences settings;
    protected HttpClient httpClient;
    private String authorizationHeader;

    public RegisterClient(Context context, String backendEnpoint) {
        super();
        this.settings = context.getSharedPreferences(PREFS_NAME, 0);
        httpClient =  new DefaultHttpClient();
        Backend_Endpoint = backendEnpoint + "/api/register";
    }

    public String getAuthorizationHeader() {
        return authorizationHeader;
    }

    public void setAuthorizationHeader(String authorizationHeader) {
        this.authorizationHeader = authorizationHeader;
    }

    public void register(String handle, Set<String> tags) throws ClientProtocolException, IOException, JSONException {
        String registrationId = retrieveRegistrationIdOrRequestNewOne(handle);

        JSONObject deviceInfo = new JSONObject();
        deviceInfo.put("Platform", "gcm");
        deviceInfo.put("Handle", handle);
        deviceInfo.put("Tags", new JSONArray(tags));

        int statusCode = upsertRegistration(registrationId, deviceInfo);

        if (statusCode == HttpStatus.SC_OK) {
            return;
        } else if (statusCode == HttpStatus.SC_GONE){
            settings.edit().remove(REGID_SETTING_NAME).commit();
            registrationId = retrieveRegistrationIdOrRequestNewOne(handle);
            statusCode = upsertRegistration(registrationId, deviceInfo);
            if (statusCode != HttpStatus.SC_OK) {
                Log.e("RegisterClient", "Error upserting registration: " + statusCode);
                throw new RuntimeException("Error upserting registration");
            }
        } else {
            Log.e("RegisterClient", "Error upserting registration: " + statusCode);
            throw new RuntimeException("Error upserting registration");
        }
    }

    private int upsertRegistration(String registrationId, JSONObject deviceInfo)
            throws UnsupportedEncodingException, IOException,
            ClientProtocolException {
        HttpPut request = new HttpPut(Backend_Endpoint+"/"+registrationId);
        request.setEntity(new StringEntity(deviceInfo.toString()));
        request.addHeader("Authorization", "Basic "+authorizationHeader);
        request.addHeader("Content-Type", "application/json");
        HttpResponse response = httpClient.execute(request);
        int statusCode = response.getStatusLine().getStatusCode();
        return statusCode;
    }

    private String retrieveRegistrationIdOrRequestNewOne(String handle) throws ClientProtocolException, IOException {
        if (settings.contains(REGID_SETTING_NAME))
            return settings.getString(REGID_SETTING_NAME, null);

        HttpUriRequest request = new HttpPost(Backend_Endpoint+"?handle="+handle);
        request.addHeader("Authorization", "Basic "+authorizationHeader);
        HttpResponse response = httpClient.execute(request);
        if (response.getStatusLine().getStatusCode() != HttpStatus.SC_OK) {
            Log.e("RegisterClient", "Error creating registrationId: " + response.getStatusLine().getStatusCode());
            throw new RuntimeException("Error creating Notification Hubs registrationId");
        }
        String registrationId = EntityUtils.toString(response.getEntity());
        registrationId = registrationId.substring(1, registrationId.length()-1);

        settings.edit().putString(REGID_SETTING_NAME, registrationId).commit();

        return registrationId;
    }
}

After all these steps and setups you can finally go to your activity and add the following pieces of codes to fire up the connection and start listening to messages:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MainActivity.java

import com.microsoft.windowsazure.messaging.*;
import com.microsoft.windowsazure.notifications.NotificationsManager;

// Define this properties in you activity class</pre>
<pre>private RegisterClient registerClient;
private String SENDER_ID = "";
private GoogleCloudMessaging gcm;
private NotificationHub hub;
private String HubName = "fittracker";
private String HubListenConnectionString = "";</pre>
<pre>
@SuppressWarnings("unchecked")
private void registerWithNotificationHubs() {
 new AsyncTask() {
 @Override
 protected Object doInBackground(Object... params) {
 try {
 String regid = gcm.register(SENDER_ID);
 DialogNotify("Registered Successfully", "RegId : " +
 hub.register(regid).getRegistrationId());
 } catch (Exception e) {
 DialogNotify("Exception",e.getMessage());
 return e;
 }
 return null;
 }
 }.execute(null, null, null);
}

/**
 * A modal AlertDialog for displaying a message on the UI thread
 * when theres an exception or message to report.
 *
 * @param title Title for the AlertDialog box.
 * @param message The message displayed for the AlertDialog box.
 */
public void DialogNotify(final String title,final String message)
{
 final AlertDialog.Builder dlg;
 dlg = new AlertDialog.Builder(this);

 runOnUiThread(new Runnable() {
 @Override
 public void run() {
 AlertDialog dlgAlert = dlg.create();
 dlgAlert.setTitle(title);
 dlgAlert.setButton(DialogInterface.BUTTON_POSITIVE,
 (CharSequence) "OK",
 new DialogInterface.OnClickListener() {
 public void onClick(DialogInterface dialog, int which) {
 dialog.dismiss();
 }
 });
 dlgAlert.setMessage(message);
 dlgAlert.setCancelable(false);
 dlgAlert.show();
 }
 });
}</pre>
<pre>

So the first function will register you device and the next one will create a notification with a message in your device. Next you create the connection with this piece of code:


<pre>MyHandler.mainActivity = this;
NotificationsManager.handleNotifications(this, SENDER_ID, MyHandler.class);
gcm = GoogleCloudMessaging.getInstance(this);
hub = new NotificationHub(HubName, HubListenConnectionString, this);
registerWithNotificationHubs();</pre>

Notice how you pass your activity instance you the myhandler class. This is important.

And that’s it :D. Simple yet alot of work. Luckily Microsoft has made a good job documenting these steps. If in trouble don’t hesitate to look up on some documentation.

SignalR Hub

Implementing SignalR on the .NET side is rather easy BUT there is so much automation that it simply feel weird :). Everything seems to work if you just follow the instuctions but as I noticed one you poke around custom authentication and authorization you can really mess thing up. For example I wanted to add to my SignalR hun web project EDM mapping to a database or a custom authentication, well I made the mistake of choosing to use Entity Framework version 6.0 which uses a different version of Newtonsoft.json library which caused all sorts of problems. Another issue which I ran into was that I create a connection identification by client ID to be able to notify the client devices and services of changes within my system. At one point I did a simple mistake of forgeting to pass on the identification information which lead to weird errors on the client side browser such as IE and Chrome. The errors had nothing to do with the fact that the connection failed on the server side because the user ID was missing. The browsers expressed errors related to CORS which made no sense since I configured CORS support. So just be careful.Setting up a

Azure hosted SignalR hub

Start by looking at this source:

http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

To host my SignalR hub in Azure I simply created an empty web application and followed the instructions in the link above. Sample code:

https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/ChatHub.cs

https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/index.html

Also include the following SignalR nuget package:

Microsoft ASP .NET SignalR (to be able to host)

Microsoft ASP .NET Cross-Origin Support

Windows Azure Storage

Lets look at bit more closely at the ChartHub:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using SignalRGateway.AzureTableStorage;
using System.Configuration;

using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Table;
using MyFitnessTrackerLibrary.Globals;

namespace SignalRGateway
{
 public class ChatHub : Hub
 {

 public void Send(string name, string message)
 {
 // Call the broadcastMessage method to update clients.
 var queryResult = this.SendMessageTo(name, message);
 foreach (var entity in queryResult)
 {
 Clients.Client(entity.RowKey).broadcastMessage(name, message);
 }
 }

 public void IsDataUpdateRequiredForWeb(string name, bool isRequired, string message)
 {
 var queryResult = this.SendMessageTo(name, message);
 foreach (var entity in queryResult)
 {
 Clients.Client(entity.RowKey).isDataUpdateRequiredForWeb(name, isRequired, message);
 }
 Clients.All.isDataUpdateRequiredForWeb(name, isRequired, message);
 }

 public void IsDataUpdateRequiredForMobileClient(string name, bool isRequired, string message)
 {
 var queryResult = this.SendMessageTo(name, message);
 foreach (var entity in queryResult)
 {
 Clients.Client(entity.RowKey).isDataUpdateRequiredForMobileClient(name, isRequired, message);
 }
 }

 private List<ConnectionEntity> SendMessageTo(String who, String message)
 {
 //var name = Context.User.Identity.Name;
 var name = this.GetConnectionUser();

 if (!String.IsNullOrEmpty(name))
 {
 var table = GetConnectionTable();

 // Notice that the partition keys are stored in azure storage as lower case
 var query = new TableQuery<ConnectionEntity>()
 .Where(TableQuery.GenerateFilterCondition(
 "PartitionKey",
 QueryComparisons.Equal,
 who.ToLowerInvariant()));

 var queryResult = table.ExecuteQuery(query).ToList();
 if (queryResult.Count == 0)
 {
 Clients.Caller.showErrorMessage("The user is no longer connected.");
 }
 else
 {
 // Load only once the host application connections to display the data there
 if(queryResult.Count(o=>o.PartitionKey.Equals(Constants.SignalR_HostApplicationUserName.ToLowerInvariant())) <= 0)
 queryResult.AddRange(this.SendMessageTo(Constants.SignalR_HostApplicationUserName, message));

 return queryResult;
 }
 }

 return new List<ConnectionEntity>();
 }

 // This assumes that "normmaly" all others clients than the host SignalR web application (this app) will use header named as username for user identification. The SignalR web app will user querystring.
 private String GetConnectionUser()
 {
 var name = Context.Headers[Constants.SignalR_HeaderID_Username];

 if (String.IsNullOrEmpty(name))
 {
 name = Context.QueryString[Constants.SignalR_HeaderID_Username];
 }
 if (String.IsNullOrEmpty(name))
 return null;

 // Notice that the partition keys are stored in azure storage as lower case
 return name.ToLowerInvariant();
 }

 public override Task OnConnected()
 {
 //var name = Context.User.Identity.Name;
 var name = this.GetConnectionUser();

 if(!String.IsNullOrEmpty(name))
 {
 var table = GetConnectionTable();
 var created = table.CreateIfNotExists();

 var entity = new ConnectionEntity(
 name.ToLower(),
 Context.ConnectionId);
 var insertOperation = TableOperation.InsertOrReplace(entity);
 table.Execute(insertOperation);
 }

 return base.OnConnected();
 }

 public override Task OnDisconnected(bool stopCalled)
 {
 //var name = Context.User.Identity.Name;
 var name = this.GetConnectionUser();

 if (!String.IsNullOrEmpty(name))
 {
 var table = GetConnectionTable();

 var deleteOperation = TableOperation.Delete(
 new ConnectionEntity(name, Context.ConnectionId) { ETag = "*" });
 table.Execute(deleteOperation);
 }

 return base.OnDisconnected(stopCalled);
 }

 private CloudTable GetConnectionTable()
 {

 var storageAccount =
 CloudStorageAccount.Parse(
 MyFitnessTrackerLibrary.Globals.MyFitAppSettings.AzureTableStorageConnectionString);
 var tableClient = storageAccount.CreateCloudTableClient();
 var table = tableClient.GetTableReference("connection");

 return table;
 }
 }
}

In my code example connections are stored and managed in Azure Table Storage(check the link below how to create one):
http://azure.microsoft.com/en-us/documentation/articles/storage-dotnet-how-to-use-tables/

When you connect to the hub you will enter the OnConnected() function. Here my implementation seeks for the username header value or QueryString username value(this is to just go around a problem in JavaScript client which I did not want to spend to much time on). After this we connect to the Azure Table Storage and add a new connection to the table.

When disconnecting the reverse is done to the Azure Storage Table.

The GetConnectionTable() function will open a connection to the storage table(check from azure management web console for your connection data).

The SignlarR has threee function which will send information to listening clients based on connection IDs:

  • Send
  • IsDataUpdateRequiredForWeb
  • IsDataUpdateRequiredForMobileClient

The SendMessageTo() function is used to get all of the connection for a user name which needs to be notified of updates.

The code is pretty simple an easy. Microsoft has done a great job documenting this: http://www.asp.net/signalr

Last thing which I recommend to do is to configure CORS support:

https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/Startup.cs


// Branch the pipeline here for requests that start with "/signalr"
 app.Map("/signalr", map =>
 {
 // Setup the CORS middleware to run before SignalR.
 // By default this will allow all origins. You can
 // configure the set of origins and/or http verbs by
 // providing a cors options with a different policy.
 map.UseCors(CorsOptions.AllowAll);
 var hubConfiguration = new HubConfiguration
 {
 // You can enable JSONP by uncommenting line below.
 // JSONP requests are insecure but some older browsers (and some
 // versions of IE) require JSONP to work cross domain
 // EnableJSONP = true
 };
 // Run the SignalR pipeline. We're not using MapSignalR
 // since this branch already runs under the "/signalr"
 // path.
 map.RunSignalR(hubConfiguration);
 });

Simply copy&paste the code above to get it to work but notice that it will allow requests from all possible connections.
http://www.asp.net/signalr/overview/security/introduction-to-security#csrf

Connecting and listening to activities with the following clients:

You will need to import the following libraries in Visual Studio to get you clients to work on SignalR:

Microsoft ASP .NET SignalR .NET Client

Microsoft ASP .NET SignalR JavaScript Client

Connecting with the .NET Client

The .NET Client code is pretty easy to understand:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Client;
using System.Threading.Tasks;
using MyFitnessTrackerLibrary.ServiceBus;
using MyFitnessTrackerLibrary.Globals;

namespace MyFitnessTrackerLibrary.SignalRLogic
{
 public class HubGateway
 {

 private String hubLocation = MyFitAppSettings.SignalRHubHostLocation;
 private static HubGateway _hubGateway = null;
 private String hubProxyName = MyFitAppSettings.SignalRHubProxy;
 private IHubProxy hubProxy = null;
 private HubConnection hubConnection = null;
 private String sourceID = "NO ID";

 public IHubProxy HubProxyPoint
 {
 get { return this.hubProxy; }
 }

 public String SourceID
 {
 get
 {
 return this.sourceID;
 }

 set

 {
 this.sourceID = value;
 }
 }

 public HubGateway()
 {
 hubConnection = new HubConnection(this.hubLocation);
 hubProxy = hubConnection.CreateHubProxy(hubProxyName);
 }

 ~HubGateway()
 {
 this.Stop();
 }

 public async Task SendNormalMessage(String name, String message)
 {
 await this.Start(name);
 await this.HubProxyPoint.Invoke("Send", name, message + " #Source ID: " + this.sourceID);
 }

 public async Task IsDataUpdateRequiredForWeb(String name, bool isRequired, String message)
 {
 await this.Start(name);
 await this.HubProxyPoint.Invoke("IsDataUpdateRequiredForWeb", name, isRequired, message + " #Source ID: " + this.sourceID);
 await NotificationGateway.GetInstance().SendMessage("New data was added. Your UI is updated/updating.");
 }

 public async Task IsDataUpdateRequiredForMobileClient(String name, bool isRequired, String message)
 {
 await this.Start(name);
 await this.HubProxyPoint.Invoke("IsDataUpdateRequiredForMobileClient", name, isRequired, message + " #Source ID: " + this.sourceID);
 await NotificationGateway.GetInstance().SendMessage("New data was added. Your UI is updated/updating.");
 }

 public static HubGateway GetInstance()
 {
 if( _hubGateway == null)
 {
 _hubGateway = new HubGateway();
 }

 return _hubGateway;
 }

 public async Task Start(String userName)
 {
 if (hubConnection.State == ConnectionState.Disconnected)
 {
 if(!this.hubConnection.Headers.ContainsKey(Constants.SignalR_HeaderID_Username))
 this.hubConnection.Headers.Add(new KeyValuePair<string, string>(Constants.SignalR_HeaderID_Username, userName));

 await hubConnection.Start();
 }
 }

 public void Stop()
 {
 hubConnection.Stop();
 }
 }
}

The important part in this code in when you call the Invoke() function to invoke in the SignalR hub the needed function and notify registered clients of updates.

The second important part is the Start() function. We add the username data in the connection, this way the hub knows where to send the messages/updates requests. Yes I know there is a bug in the code above, only one user will receive messages from this piece of code. I haven’t got around to fix this in my original project but it’s a simple matter.

Connecting with the JavaScript client

</pre>
<pre>
var connection = $.hubConnection(Constants.SignalRGatewayLocation);
 connection.qs = { "username": CookieHelper.UserName };
 var contosoChatHubProxy = connection.createHubProxy(Constants.SignalRHubProxyName);

 contosoChatHubProxy.on(Constants.SignalRHubMethod_IsDataUpdateRequiredForWeb, function (name, isRequired, message) {
 // Html encode display name and message.
 var encodedName = $('<div />').text(name).html();
 //var encodedMsg = $('<div />').text("isDataUpdateRequiredForWeb is Update Required: " + isRequired + " Message: " + message).html();
 var encodedMsg = $('<div />').text("Updating UI. New data from the mobile app.").html();
 // Add the message to the page.
 $('#notifications').append('<ul><li><strong>' + encodedName
 + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li></ul>');
 highChartsController.LoadProperChartByUserSelection();
 });

 connection.start()
 .done(function () {
 console.log('Now connected, connection ID=' + connection.id
 );
 })
 .fail(function () {
 console.log('Could not connect');
 });

The code above is rather simple. You create a connection, define the hub name, register to a function on the SignalR hub and start the connection.
The only “weird” part is that the username is passed in the QueryString and not in the header. This was due to a problem which I could not fix and had to go around. There might be a better solution out there.

Connecting with the Android client

Now here comes the hard part. Getting SignalR to work on android was a pain in the but :). Lots of weird problems and lack or proper documentation.

To start with you will need this library downloaded and compiled in Android Studio(or some other Java development tool you are using).

https://github.com/SignalR/java-client

You also might need the following library:

http://java-websocket.org/

Then a good place to go next would be:

https://whathecode.wordpress.com/2014/03/20/getting-started-with-the-java-signalr-sdk/

BUT the example above did not work for me as it was stated in the example. Here what I had to do:

Add to your Android project these libraries:

signalr-client-sdk.jar

Java-WebSocket-1.3.0.jar

signalr-client-sdk-android-release.aar

The following libraries can be added from Android Studio UI: File -> Project Structure. Then add a new library from the plus icon and in the new popup select the “import .JAR or .AAR Package”.

Your gradle file should look something like this:

dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile 'com.android.support:appcompat-v7:21.0.3'
 compile 'com.google.android.gms:play-services:6.5.87'
 compile 'com.google.code.gson:gson:2.3.1'
 compile files('libs/signalr-client-sdk.jar')
compile files('libs/notifications-1.0.1.jar')
compile files('libs/notification-hubs-0.4.jar')
 compile files('libs/Java-WebSocket-1.3.0.jar')
 compile project(':signalr-client-sdk-android-release')
}

The next step is to start to create a background service in Android that will be able to communicate with your desired activity.

We Start this by defining a interface which is implemented in the activity:

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/ServiceCallbacks.java


package com.example.adriansimionescu.myfitnessandroidapp;

public interface ServiceCallbacks {
    void updateUI();
}</pre>
<pre>// To implement it in your activity:</pre>
<pre>public class MainActivity extends ActionBarActivity implements ServiceCallbacks {
...
}

Next we create the background service:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/SignalRService.java


package com.example.adriansimionescu.myfitnessandroidapp;

import android.app.IntentService;
import android.app.Service;
import android.content.Intent;
import android.os.Binder;
import android.os.IBinder;
import android.util.Log;
import android.widget.Toast;

import java.util.concurrent.ExecutionException;

import microsoft.aspnet.signalr.client.SignalRFuture;
import microsoft.aspnet.signalr.client.hubs.HubConnection;
import microsoft.aspnet.signalr.client.hubs.HubProxy;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler1;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler2;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler3;
import microsoft.aspnet.signalr.client.transport.ClientTransport;
import microsoft.aspnet.signalr.client.transport.ServerSentEventsTransport;

public class SignalRService extends Service {

    // Binder given to clients
    private final IBinder binder = new LocalBinder();
    // Registered callbacks
    private ServiceCallbacks serviceCallbacks;

    // Class used for the client Binder.
    public class LocalBinder extends Binder {
        SignalRService getService() {
            // Return this instance of MyService so clients can call public methods
            return SignalRService.this;
        }
    }

    @Override
    public IBinder onBind(Intent intent) {
        return binder;
    }

    @Override
    public void onCreate() {
        super.onCreate();
    }

    public void setCallbacks(ServiceCallbacks callbacks) {
        this.serviceCallbacks = callbacks;
    }

    @SuppressWarnings("deprecation")
    @Override
    public void onStart(Intent intent, int startId) {
        super.onStart(intent, startId);
        Toast.makeText(this, "Service Start", Toast.LENGTH_LONG).show();

        String server = Constants.SignalRGateway;
        HubConnection connection = new HubConnection(server);
        connection.getHeaders().put("username", UserDataContainer.LoginData.userName);
        HubProxy proxy = connection.createHubProxy(Constants.SignalRHubName);

        //SignalRFuture<Void> awaitConnection = connection.start();

// This was added to get around a websocket problem with Android devices to the SignalR hub hosted in Azure
        ClientTransport transport = new ServerSentEventsTransport(connection.getLogger());

        SignalRFuture<Void> awaitConnection = connection.start(transport);
        try {
            awaitConnection.get();
            proxy.subscribe(this );
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (ExecutionException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        //--------------------------------------------------------------------------------
    }

    public void Send( String name, String message )
    {
        final String fmessage = message;
        final String fname = name;

    }

    public void IsDataUpdateRequiredForMobileClient( String name, boolean isRequired, String message ) {
        final String fmessage = message;
        final String fname = name;
        final boolean fisrequired = isRequired;
        if (serviceCallbacks != null) {
            serviceCallbacks.updateUI();
        }
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

}

There are a few important function.

onBind() => Use this to bind the actual instance of the service from your activity
setCallbacks() => use this to create a connection to the activity class interface so that we can call a desired method in the activity when a singalr message is received.

To bind to the SignalR function and message you need to define methods that use the same names as in the hub.
IsDataUpdateRequiredForMobileClient() and Send()

After the connection in made you need to call the subscribe method in the proxy class and pass the service class as a parameter. This will allow the binding between the defined methods above with the one in the SignalR hub.

The last part of the puzzle is that we call the interface function updateUI() which will trigger the same function in the activity to trigger and allow you to perform something in the activity.

Then all you have to do is to create the service instance in the activity, bind it and start it:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MainActivity.java

private SignalRService signalRService;</pre>
<pre>@Override
protected void onStart() {
    super.onStart();
    // Bind to LocalService

        Intent intent = new Intent(this, SignalRService.class);
        bindService(intent, serviceConnection, Context.BIND_AUTO_CREATE);
    // Do this to avoid starting multiple service, only one is needed
    if(this.signalRService == null) {
        this.startService(intent);
    }
}

@Override
protected void onStop() {
    super.onStop();

    // Unbind from service
    if (bound) {
        this.signalRService.setCallbacks(null); // unregister
        unbindService(serviceConnection);
        bound = false;
    }
}

/** Callbacks for service binding, passed to bindService() */
private ServiceConnection serviceConnection = new ServiceConnection() {

    @Override
    public void onServiceConnected(ComponentName className,
                                   IBinder service) {
        // cast the IBinder and get MyService instance
        SignalRService.LocalBinder binder = (SignalRService.LocalBinder) service;
        signalRService = binder.getService();
        bound = true;
        signalRService.setCallbacks(MainActivity.this); // register
    }

    @Override
    public void onServiceDisconnected(ComponentName arg0) {
        bound = false;
    }
};

/* Defined by ServiceCallbacks interface */
@Override
public void updateUI() {
// update your UI here
}

In the OnStart() and OnStop() functions we bind and start the service.

In the serviceConnection class instance we do the actual binding and notice how the code maps the activity to the service to be able to call the updateUI() function below.

 

The End

Huh, a long post but I hope you got the idea how to use notification hub, azure table storage and singnalr to communicate between different service and devices in different manner. SignalR is pretty cool what you can do with it. Especially with games and backend stuff. Cool 🙂

SharePoint 2013 QuickLinksMicroView webpart and MyLinks hidden list – How To Use them

A quick tip on how to use the MyLinks list in SharePoint 2013 which is “hidden”.

To access the list you have to use a “back door”. Type after your mysite address the following aspx location:

http://mysite.dev/_layouts/15/myquicklinks.aspx

To add a link to add a new link list item to the location mentioned above you can use the following JavaScript and HTML to create such an action(you can do this from anywhere in SharePoint):

<script type=”text/javascript”>

function displayLayover(url) {

var options = SP.UI.$create_DialogOptions();

options.url = url;

options.dialogReturnValueCallback = Function.createDelegate(

null, null);

SP.UI.ModalDialog.showModalDialog(options);

}

</script>
<a href=”javascript:displayLayover(‘/_layouts/QuickLinksDialogForm.aspx?Mode=Link’)”>Add Item </a>

The above code will create a modal dialog pointing to the specified list, mylinks list.

 

If you want more functionality related to the MyLinks just open the aspx page in the SharePoint hive and hack it :).

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS

  • myquicklinks.aspx
  • quicklinksdialogform.aspx

The above add link in the aspx page can be found with this line of JavaScript:

function CreateNewQuickLink()
{
ShowNewQuicklinkPopup(‘QuickLinksDialogForm.aspx?Mode=Link’, PageRefreshOnDialogClose);
}

When you are ready you can add the QuickLinksMicroView -webpart anywhere and it will instantly show the links in your MyLinks list.

SharePoint and Google Maps – How to use them together

Here is an example how to use Google Maps and how to integrate it with SharePoint.

To start with you need to include the following files somewhere in your project

<SharePoint:ScriptLink ID=”JQueryJSFunctionality” runat=”server” Name=”/_layouts/myfolder/scripts/jquery-1.11.2.min.js”></SharePoint:ScriptLink>
<script src=”http://maps.google.com/maps/api/js?sensor=false&#8221; type=”text/javascript”>
</script>

<script type=”text/javascript”>
var listName = ‘<%=ListName %>’; // This can be used to pass a list name from web part properties to the JavaScript/JQuery logic, this is a propert defined in the code behind of a user control
</script>

<!–<SharePoint:ScriptLink Name=”SP.js” runat=”server” OnDemand=”true” Localizable=”false” />–>
<SharePoint:ScriptLink ID=”ScriptLink1″ Name=”sp.debug.js” LoadAfterUI=”true” Localizable=”false” runat=”server” />
<SharePoint:ScriptLink ID=”userWorldMapJSFunctionality” runat=”server” Name=”/_layouts/myfolder/scripts/yourGoogleMapsLogicFileName.js”></SharePoint:ScriptLink>

 

Next is the JavaScript/JQuery code

Create instances of needed Google Maps functionalities

var gmGeocoder = new google.maps.Geocoder();
var gmBounds = new google.maps.LatLngBounds();

var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.HYBRID
};

var gmMap = new google.maps.Map($(“#map_canvas”)[0], mapOptions);

// You can use this to listen when the Google Maps has finnished its operations
google.maps.event.addListenerOnce(gmMap, ‘idle’, function () {

});

 

// You can use this function class to pass on information to the Google Maps geo location finder

var street = “”;
var zip = “”;
var city = users[iter].city;
var country = users[iter].country;
address = street + “,” + zip + “,” + city + “,” + country;

gmGeocoder.geocode({ ‘address’: address }, function (user, allUsers) {
return (function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results.length == 0) {
//console.log(“Geocoding: There are no results for address ‘” + results[0].formatted_address + “‘! Expected exactly one result. > Do not show any marker on map for this address.”);
}
else {

// Here is where you get a results back for the specified address and start to construct data for a Google Maps marker
var externalCount = 0;
var internalCount = 0;
gmLatLng = results[0].geometry.location;
//markerBounds.extend(gmLatLng);
var msgForInfoWindow = “<div id=’slider1′ >”;
var colorValue = “red”;
if (user.isexternal == true) {
colorValue = “blue”;
externalCount++;
} else {
internalCount++;
}
var orderID = 0;

// The actual content that goes into the marker starts here
msgForInfoWindow += “<div class=’viewport’>”;
msgForInfoWindow += “<ul class=’overview’>”;

 

orderID++;
msgForInfoWindow += “<li>”;
msgForInfoWindow += “Add your data here”;
msgForInfoWindow += “</li>”;
msgForInfoWindow += “</ul>”;
msgForInfoWindow += “</div>”;
msgForInfoWindow += “<a class=’buttons prev’ href=’#’><</a>”;
msgForInfoWindow += “<a class=’buttons next’ href=’#’>></a>”;

msgForInfoWindow += “</div>”;
var isExternalMarker = false;
if (externalCount > internalCount)
isExternalMarker = true;

// Calling this function will create a maker based on the given parameters
SetMarkerForGoogleMapForSharePointList(gmLatLng, gmMap, gmBounds, user.city + “, ” + user.country, msgForInfoWindow, isExternalMarker);
}
}
else {
//console.log(“Geocode for address ‘” + address + “‘ was not successful for the following reason: ” + status);
}
});
} (users[iter], users));

//getting coordinates
gmGeocoder.geocode({ ‘address’: address }, function (results, status) {

});

 

function NullVerification(stringValue) {
var returnValue = ” “;
if (stringValue != null)
returnValue = stringValue;

return (returnValue);
}

function NullVerificationBool(stringValue) {
var returnValue = false;
if (stringValue != null)
returnValue = true;

return (returnValue);
}

 

function SetMarkerForGoogleMapForSharePointList(gmLatLng, gmMap, gmBounds, title, contentForInfoWindow, isExternalMarker) {

// This is just a logic on how to control the marker styling, you can use your own

var icon = “”;

if (isExternalMarker)
icon = “yellow”;
else
icon = “red”;
icon = “http://maps.google.com/mapfiles/ms/icons/&#8221; + icon + “.png”;

// Create the marker for the Goole Map
var gmMarker = new google.maps.Marker({
position: gmLatLng,
map: gmMap,
title: title,
zIndex: 0,
icon: new google.maps.MarkerImage(icon)
});

// This will center the map based on given marker positions
gmBounds.extend(gmLatLng);
gmMap.setCenter(gmBounds.getCenter());
gmMap.fitBounds(gmBounds);

// Define properties for the info window that is opened when the marker is pressed

if (contentForInfoWindow != null && contentForInfoWindow != “”) {
var gmInfowindow = new google.maps.InfoWindow({
content: contentForInfoWindow,
maxWidth: 500,
maxHeight: 600
});

// This will attach a listener to the marker to that we can apply logic when it is opened.

google.maps.event.addListener(gmMarker, ‘click’, function () {
gmInfowindow.open(gmMap, gmMarker);
$(‘#slider1’).tinycarousel({ bullets: true });
var t = 0;
});
}
}

// This is an example how to retrieve data from a SharePoint list using JavaScript 

function retrieveListItems() {

var clientContext = SP.ClientContext.get_current();
if (IsEmpty(listName))
listName = ‘UsersMapData’;
var oList = clientContext.get_web().get_lists().getByTitle(listName);

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(‘<View><Query><Where><And><IsNotNull><FieldRef Name=”Country” /></IsNotNull><And><IsNotNull><FieldRef Name=”City” /></IsNotNull><IsNotNull><FieldRef Name=”PersonName” /></IsNotNull></And></And></Where><OrderBy><FieldRef Name=”ID” Ascending=”True” /></OrderBy></Query></View>’);
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

 // When the data retrieval from the list succeeds this function is called. Here the needed data is then retrieved and parsed. Then passed on to be used later

function onQuerySucceeded(sender, args) {

var listItemInfo = [];

var listItemEnumerator = collListItem.getEnumerator();

// Here the data from SharePoint is went through and items are retrieved to container objects to be used later

while (listItemEnumerator.moveNext()) {

var oListItem = listItemEnumerator.get_current();
var newUserData = { id: oListItem.get_id(),
name: oListItem.get_item(‘PersonName’),
country: oListItem.get_item(‘Country’),
city: oListItem.get_item(‘City’),
imageLocation: oListItem.get_item(‘UserImageLocation’)
};
listItemInfo.push(newUserData);
}

return (listItemInfo);
}

function onQueryFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

SharePoint 2013 Blog – Change the author of the post with a custom selected user

This is a sample JS to use with the posts webpart in the SharePoint blog(JSLink webpart property). Originally I wanted to the blog.xsl but I simply could not get it to world desirably in SharePoint 2013. Well it worked in a different manner that what it used to be in SharePoint 2010.

Here is the code with comments:

var userID = 0;
var globalListItemIDs = [];
var spjsLoaded = false;
var listName = “Viestit”;
var customUserFieldInternalName = “PostOwner”;

// Main function – Start point
(function () {

var overrideCtx = {};

overrideCtx.Templates = {};

// Register a template override for the author field
overrideCtx.Templates.Fields = {‘Author’:{‘View’:CBody}};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function CBody(ctx) {

// Load SP client context, ote async event
SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, sharePointReady);

// create a point of focus where to add the loaded information from the post item user field, Notice taht we are using the list item ID as an identifier where to put our user data
var ret = “<b><span class=’Blog_userTemplateContextData’ id=’userTemplateContextData” + ctx.CurrentItem.ID +”‘></span></b>”
var newListItemData = { id: ctx.CurrentItem.ID };

globalListItemIDs.push(newListItemData);

//var ret = ctx.CurrentItem.Body;

return ret;

}

function sharePointReady() {
if(spjsLoaded == true)
return;
spjsLoaded = true;

clientContext = SP.ClientContext.get_current();
website = clientContext.get_web();

var oList = clientContext.get_web().get_lists().getByTitle(listName);

// Check if a specific post list item is specified, this would mean that the user is viewing a sigle post
var listItemID = getParameterByName(‘ID’);

// If no single post id is found then load all available posts and their custom users to be used instead of the author(TODO: Optimize for displayed posts only)
if(listItemID === null || listItemID === “”)
{
/*for (var iter = 0; iter < globalListItemIDs.length; iter++)
{
listItemID = globalListItemIDs[iter].id;
MakeNewDataCall(oList, clientContext, listItemID);
}*/
var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml(‘<Query><OrderBy><FieldRef Name=”Created” Ascending=”False” /></OrderBy></Query>’);
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
} else
{
// Only a single post is needed
MakeNewDataCall(oList, clientContext, listItemID);
var newListItemData = { id: listItemID };

globalListItemIDs.push(newListItemData);
}

}

function MakeNewDataCall(oList, clientContext, listItemID)
{
var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml(‘<Query><Where><Eq><FieldRef Name=”ID” /><Value Type=”Counter”>’ + listItemID + ‘</Value></Eq></Where><OrderBy><FieldRef Name=”Created” Ascending=”False” /></OrderBy></Query>’);
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {

var listItemInfo = [];

var listItemEnumerator = collListItem.getEnumerator();

// Get the post data(single or many) and process it
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var listItemID = oListItem.get_id();

// Seek the SharePoint generated posts and seek if the current item is something we want to process
var userDataDiv = document.getElementById(“userTemplateContextData” + listItemID);
if(!(userDataDiv === null))
{
var author = oListItem.get_item(‘Author’);
// IF so then get the custom user information
var personOwner = oListItem.get_item(customUserFieldInternalName);
if(!(personOwner === null))
{
var name = personOwner.get_lookupValue();

// Put default data that is going to be used if a user image is not found, Notice that we define a user image location
userDataDiv.innerHTML = “<span class=’Blog_postUserData’ id=’postUserData” + personOwner.get_lookupId() +”‘>” + name + “</span>”;
var context = SP.ClientContext.get_current();
var web = context.get_web();
var userInfoList = web.get_siteUserInfoList();

// Make a call to the user profile information for this user to see if there is a user image available
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(‘<View><Query><Where><Eq><FieldRef Name=”ID”/><Value Type=”Number”>’ +personOwner.get_lookupId()+ ‘</Value></Eq></Where></Query><RowLimit>1</RowLimit></View>’);
this.listItems = userInfoList.getItems(camlQuery);
context.load(listItems);
context.executeQueryAsync(Function.createDelegate(this, this.onProfileSuccessMethod), Function.createDelegate(this, this.onQueryFailed));
}
}
}
}

function onProfileSuccessMethod(sender, args) {
var item = listItems.itemAt(0);
var firstName = item.get_item(‘FirstName’);
var lastName = item.get_item(‘LastName’);
var userId = item.get_id();
// Get the location where the user image is to be inserted
var userDataDiv = document.getElementById(“postUserData” + userId);
if(!(userDataDiv === null))
{
// If there is an image then use it, if no image is provided do nothing and display the user full name instead.
var picture = item.get_item(‘Picture’);
if (picture!=null) {
userDataDiv.innerHTML = “<img class=’Blog_userDataImgClassStyle’ src='” + picture.get_url() +”‘ height=’42’><span class=’Blog_postUserDataName’ id =’postUserDataName’>” + firstName + ” ” + lastName + “</span>”;
}
}
}

function onQueryFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

function getParameterByName(name) {
name = name.replace(/[\[]/, “\\[“).replace(/[\]]/, “\\]”);
var regex = new RegExp(“[\\?&]” + name + “=([^&#]*)”),
results = regex.exec(location.search);
return results === null ? “” : decodeURIComponent(results[1].replace(/\+/g, ” “));
}

Lessons learned from WebAPI and MVC Implementations

My Notes on a painful journey to learn, make and publish a Azure hosted MVC, Sinlge-Page application, Android client app and a WebAPI working with-one another. Software technology can be real pain in the ass!!!

JSON and Self referencing loop

If you get the following error:

Self referencing loop detected for property ‘your model’ with type ‘System.Data.Entity.DynamicProxies

Solution:

Loop Reference handling in Web API

My Solution:

I used [JsonIgnore] attribute to tell the proper inheritance to JSON serialization.

using Newtonsoft.Json;

public partial class Set
{
public Set()
{
this.Exercises = new HashSet<Exercise>();
}

public long Id { get; set; }
public string Name { get; set; }
public string UserId { get; set; }

public virtual ICollection<Exercise> Exercises { get; set; }
}

public partial class ExerciseRecord
{
public long Id { get; set; }
public double Record { get; set; }
public System.DateTime Date { get; set; }
public System.DateTime StartDate { get; set; }
public System.DateTime EndDate { get; set; }
public long ExerciseId { get; set; }

[JsonIgnore]
public virtual Exercise Exercise { get; set; }
}

public partial class Exercise
{
public Exercise()
{
this.ExerciseAttributes = new HashSet<ExerciseAttribute>();
this.ExerciseRecords = new HashSet<ExerciseRecord>();
}

public long Id { get; set; }
public string Name { get; set; }
public double Target { get; set; }
public long SetId { get; set; }
[JsonIgnore]
public virtual Set Set { get; set; }
public virtual ICollection<ExerciseAttribute> ExerciseAttributes { get; set; }
public virtual ICollection<ExerciseRecord> ExerciseRecords { get; set; }
}

 

MVC loads older script files

This is due to browser script caching. The easiest solution for this is to set the browser which you are using to debug to retrieve the newest versions of web page content on each time you visit a webpage.

Missing Key definition from Model when creating a controller

You might get an error like this: EntityType ‘your type’ has no key defined. Define the key for this EntityType.

To fix such problems simply add this namespace definitions:

using System.ComponentModel.DataAnnotations;

And then define in your data model a key like this:

public class ColumnDataHighChart
{
[Key]
public int ID { get; set; }
public String Title { get; set; }
public String SubTitle { get; set; }
public IList<String> xAxisCategories { get; set; }
public String yAxisTitle { get; set; }
public IList<SeriesDataHighChart> Series { get; set; }

}

 

Intercepting web requests

 

I have two ways of doing this:

  1. A delegation handler
  2. Or an action filter for a controller.

Delegation handler

DelegatingHandler Class

Sample code:

public class AuthHandler : DelegatingHandler
{
protected async override Task<HttpResponseMessage> SendAsync(
HttpRequestMessage request, CancellationToken cancellationToken)
{
// Call the inner handler.
var response = await base.SendAsync(request, cancellationToken);
return response;
}
}

Action filter for a controlle

Notice that for MVC and Web API there are two different sets of action filter definitions:

http://msdn.microsoft.com/en-us/library/system.web.http.filters.actionfilterattribute(v=vs.118).aspx

http://msdn.microsoft.com/en-us/library/system.web.mvc.actionfilterattribute(v=vs.118).aspx

MVC Sample:

public class AuthenticationActionFilterHelper : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
base.OnActionExecuting(filterContext);
if (HttpContext.Current != null && HttpContext.Current.User != null && HttpContext.Current.User.Identity.IsAuthenticated)
{
if (SessionHelper.LoggedInUser<AspNetUser>(HttpContext.Current.User.Identity.Name) == null)
{
//SessionHelper.UserSessionID = user.Id;
AspNetUsersController aspUserCon = new AspNetUsersController();
var sessionUser = aspUserCon.GetUser(HttpContext.Current.User.Identity.Name);
//SessionHelper.UserSessionID = user.UserName;
SessionHelper.LoggedInUser<AspNetUser>(sessionUser, sessionUser.UserName);
}
}
}

}

WebAPI Sample:

public class AuthenticationActionFilterHelper : ActionFilterAttribute
{
public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
{
base.OnActionExecuted(actionExecutedContext);
}

public override System.Threading.Tasks.Task OnActionExecutedAsync(HttpActionExecutedContext actionExecutedContext, System.Threading.CancellationToken cancellationToken)
{
return base.OnActionExecutedAsync(actionExecutedContext, cancellationToken);
}

public override void OnActionExecuting(HttpActionContext actionContext)
{
base.OnActionExecuting(actionContext);
if (HttpContext.Current != null && HttpContext.Current.User != null && HttpContext.Current.User.Identity.IsAuthenticated)
{
if (SessionHelper.LoggedInUser<AspNetUser>(HttpContext.Current.User.Identity.Name) == null)
{
//SessionHelper.UserSessionID = user.Id;
AspNetUsersController aspUserCon = new AspNetUsersController();
var sessionUser = aspUserCon.GetUser(HttpContext.Current.User.Identity.Name);
//SessionHelper.UserSessionID = user.UserName;
SessionHelper.LoggedInUser<AspNetUser>(sessionUser, sessionUser.UserName);
}
}
}

public override System.Threading.Tasks.Task OnActionExecutingAsync(HttpActionContext actionContext, System.Threading.CancellationToken cancellationToken)
{
return base.OnActionExecutingAsync(actionContext, cancellationToken);
}
}

 

Lambda Expression “Magic” 🙂

Retrieve distinct parent from child elements

As the title suggests I needed to retrieve the parent from a multilevel data set:

 

First I needed to get the child elements and in this exmaple it is assumed that you have the child elements retrieved.

Once you have the child elements it is time to get the distinct parent elements. for this I needed a way to group the distinct parent from the child elements. Here are my steps:

  • Get child elements:

ExerciseRecordsController exerciseRecordsController = new ExerciseRecordsController();
var exerciseRecordsData = exerciseRecordsController.GetExerciseRecords().Where(er => er.Date > startDate && er.Date < endDate && er.Exercise.Set.UserId.ToLower().CompareTo(this.user.Id.ToLower()) == 0);

  • Define a custom extension named “DistinctBy”

public static class LambdaExtensions
{
public static IEnumerable<t> DistinctBy<t>(this IEnumerable<t> list, Func<t, object> propertySelector)
{
return list.GroupBy(propertySelector).Select(x => x.First());
}
} Original code from: http://www.elevenwinds.com/linq-distinctby-with-lambda-expression-parameter

  • Apply the new extension on the data set

var setsData = exerciseRecordsData.DistinctBy(o => o.Exercise.SetId).Select( o => o.Exercise.Set);

How to create/populate a collection with data with an unknown data type

You may ask yourself why would anyone needs this? Well I do not why would others needs this but I came into a situation where I needed this.

I had a solution where I needed to be able to create data from a back-end server WebAPI to a JS HighCharts JS library without knowing what kind of data I would be processing, also I wanted to have the possibility to extend the back-end code so that it can return any kind of data to the client and let the client figure out what to do with the data.

So how to do this?

In a human language it goes something like this: Use LINQ in your code to go through the data set, select your data and return it as and array of objects, then create a new collection by passing to the constructor your processed data as an array of objects. Ofcourse your collection must store objects as well. The data type information is going to be stored because every class in C# is a descendant of the Object class.

public class SeriesDataHighChart
{
[Key]
public long ID { get; set; }
public String Name { get; set; }
public IList<object> Data { get; set; }
}

 

// One series corresponds to one set and data for each month
SeriesDataHighChart seriesData = new SeriesDataHighChart();

seriesData.ID = chartSet.Id;
seriesData.Name = chartSet.Name;
var seriesMonthsActivityCountData = (from monthActivityCount in chartSet.ChartSetMonthsData
select new object[] { monthActivityCount.ActivityCount as object });
seriesData.Data = new List<object>(seriesMonthsActivityCountData.ToArray());

hsData.Series.Add(seriesData);

 

You could also return an array of more complex object such as a key value pairs:

var sd = from d in unparsedData
select new object[] { d.Key as object, d.Value as object };

newSeries.Data = new Data(sd.ToArray());

Avoiding “Sequence contains no elements” exception in object initializers

If you have something like this in your code:

chartExercise.ChatMonthsData.Add(new ChartExerciseMonthData
{
ActivityCount = exercise.ExerciseRecords.Where(m => m.Date.Month == month && m.Date >= startDate && m.Date <= endDate).Count(),
StartDate = DateTime.Now.StartOfMonth(month),
EndDate = DateTime.Now.EndOfMonth(month),
MonthRecordAverage = exercise.ExerciseRecords.Where(m => m.Date.Month == month && m.Date >= startDate && m.Date <= endDate).Average(a => a.Record)

});

 

The Average lambda expression will throw the above exception error message because the Where clause may return Zero elements back(Notice that for example the Count expression will not throw a similar exception).

To fix(go around the problem, yes there might be other solutions but this was mine at the moment 🙂 ) I created an anonymous function that checks if there are elements returned by the clause and only then perform the Average operation on the elements. The solution is highlighted with the green color.

chartExercise.ChatMonthsData.Add(new ChartExerciseMonthData
{
ActivityCount = exercise.ExerciseRecords.Where(m => m.Date.Month == month && m.Date >= startDate && m.Date <= endDate).Count(),
StartDate = DateTime.Now.StartOfMonth(month),
EndDate = DateTime.Now.EndOfMonth(month),
MonthRecordAverage = new Func<double>(() => {
double averageRecord = 0;
var exerciseRecordByDateRange = exercise.ExerciseRecords.Where(m => m.Date.Month == month && m.Date >= startDate && m.Date <= endDate);
if (exerciseRecordByDateRange.Count() > 0)
averageRecord = exerciseRecordByDateRange.Average(a => a.Record);

return (averageRecord);
})()
});

 Get the count for a complex data structure/hierarchy, tree like

A rather simple implementation, choose to retrieve any records inside your main records set with a where:

set.Exercises.Where(o => o.ExerciseRecords.Any(m => m.Date.Month == month)).Count()

Update Azure SQL Database via SQL Server management studio and Generated scripts

  1. Mouse second button on database > Taskas > Generate Scripts > Choose your objects (Chose objects view) > Select “Advanced” button, then in the “Script for the database engine type” select option Windows Azure SQL Database
  2. Next open the database connection with management studio to your Azure SQL Database.
  3. Create a new empty database
  4. Open a new query windows and simply add the generated script to this window and run the script against the new empty database. This will create the structure and data if you selected so.

After deploying your WebAPI you get a following error when accessing your database data “There is already an open DataReader associated with this Command which must be closed first.”

To fix this error simply add the following to your connection strings used in your web api in Azure MultipleActiveResultSets=true.

Enable WebAPI Cross-Origin Resource Sharing (CORS)

You might run into problems after deploying your WebAPI to Azure and trying to access your api from different origins. Here is a solution:

http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En

Summary of the article above: Install the following nuget package in your WebAPI project: Microsoft.AspNet.WebApi.Cors

In your webapiconfig add the following(in green):

public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Configure Web API to use only bearer token authentication.
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

var cors = new EnableCorsAttribute(“*”, “*”, “*”);
config.EnableCors(cors);

// Web API routes
config.MapHttpAttributeRoutes();

config.Routes.MapHttpRoute(
name: “DefaultApi”,
routeTemplate: “api/{controller}/{id}”,
defaults: new { id = RouteParameter.Optional }
);

config.MessageHandlers.Add(new Handler.AuthHandler());
}
}

Next add the following to your ApplicationOAuthProvider.GrantResourceOwnerCredentials function:

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
context.OwinContext.Response.Headers.Add(“Access-Control-Allow-Origin”, new[] { “*” });
var userManager = context.OwinContext.GetUserManager<ApplicationUserManager>();

ApplicationUser user = await userManager.FindAsync(context.UserName, context.Password);
//SessionHelper.UserSessionID = user.Id;
AspNetUsersController aspUserCon = new AspNetUsersController();
var sessionUser = aspUserCon.GetUser(user.Id);
//SessionHelper.UserSessionID = user.UserName;
SessionHelper.LoggedInUser<AspNetUser>(sessionUser, user.UserName);
if (user == null)
{
context.SetError(“invalid_grant”, “The user name or password is incorrect.”);
return;
}

ClaimsIdentity oAuthIdentity = await user.GenerateUserIdentityAsync(userManager,
OAuthDefaults.AuthenticationType);
ClaimsIdentity cookiesIdentity = await user.GenerateUserIdentityAsync(userManager,
CookieAuthenticationDefaults.AuthenticationType);

AuthenticationProperties properties = CreateProperties(user.UserName);
AuthenticationTicket ticket = new AuthenticationTicket(oAuthIdentity, properties);
context.Validated(ticket);
context.Request.Context.Authentication.SignIn(cookiesIdentity);

}

Notice that these changes may have undesired effects. Find out if these are suitable to your needs.