This post is a quick tip, just some notes on an issue I encountered and the work around I found…

To integrate Mixpanel server-side you need to call their REST API. For integrating Mixpanel in .NET there is a library here (currently it isn’t listed on the main Mixpanel page). Once you get that, calls to the REST API are fairly straight-forward and I won’t go into detail.

The issue I ran into was that if I tracked on JavaScript, I’d lose the identifying information when I went to start tracking events back through the REST API on the server-side. Since most of our users are anonymous I have no real identifying information.  The way to attribute tracking is through the Mixpanel distinct_id. The Mixpanel Funnel FAQ gives a quick example of assigning a distinct_id yourself, which is another approach. But since they are already assigning one automatically, I decided just to grab the cookie they are putting on the site. This may not be a best practice, but seems to work.

Here’s basically how it works…

First track the page view, below is using jQuery and the standard Mixpanel JavaScript call.

        $(function () { mixpanel.track(‘Site Pageview’); //Track page view   });

Then on the server side we’ll grab the data from the cookie (note this function is just a simple wrapper I created to get cookie information and parse to JSON)

string cookie = CookieHelper.GetValue("mp_<YOURACCESSTOKEN>_mixpanel");
 
 

This will return JSON with distinct_id and a few other details. Now in the C# code we can just send across a click:

//Record to mixpanel API
var tracker = new MixpanelTracker("<YOURACCESSTOKEN");
var properties = new Dictionary<string, object>();
properties["distinct_id"] = cookie["distinctId"];tracker.Track("Server-side Process", properties);

Now you should be able to track your anonymous users on the client-side and the server-side in ASP.NET MVC.

While there are a number of charting options out there that utilize jQuery or other technologies, I’m currently looking into look at those offered from two companies: Highcharts and Telerik – including extensions and open source projects available to complement them and ease usage in ASP.NET MVC.  I figured I’d share my research so far…

Highcharts

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts cost $80 for a single website license and $360 for a single developer / web application license.

For .NET developers who don’t want to dive into client-side JavaScript and jQuery to create their charts, options do exist.  While Highcharts doesn’t offer an ASP.NET library directly, however there are a few open source options available.

clip_image002[4]

DotNet.Highcharts

DotNet.Highcharts is "the .NET way to display Highcharts into your ASP.NET application." The library proclaims easy integration with ASP.NET applications and that you’ll only need to write in C# (no JavaScript coding needed — however the output code is pure JavaScript). Of course, you will actually need to use JS coding if you want to do more advanced functions like AJAX loading.

The most recent release comes with over 35 example charts including Multiple X-Axes, Chart inside JavaScript function, Multiple charts in one page, Disable Animation, Bind Decimal Values, and more. It is available as a NuGet package as well.  Developed by Vangel Kolarov.

Highcharts MVC

Highcharts MVC is "an Open-source Highcharts wrapper for ASP.NET MVC which aims to provide a better, easier and cleaner API." Currenty the source is hosted on GitHub. This has also been made available as a NuGet package. Three examples showcase the ability to use the library in simple, advance, and AJAX scenarios. More information is available at the developer’s website.  Developed by Guilherme Oenning.

Highcharts .Net (WebForms)

Highcharts .Net encapsulates the Highcharts API on ASP.net controls making it easier to use. It is free for non-commerical use. At this time it doesn’t seem to formally support ASP.NET MVC at this time (only WebForms), however there is a discussion of usage with MVC 3. Note: It looks like a hack / workaround to me. Examples and more information at the developer’s website.  Developed by André Paulovich and André Castro.

 

Telerik Extensions for MVC

clip_image004[4]Telerik Extensions for ASP.NET MVC is "a comprehensive set of native MVC, jQuery-powered UI components that help you deliver richer apps to market faster." Charting is offered out of box, and examples exist. The examples range from simple to complex and all come with the source code.

The extension is HTML5-based, and chart rendering utilizes lightweight SVG-powered engine for modern browsers with a fallback to VML for legacy browsers.

Aside from open source projects, Telerik Extensions for ASP.NET MVC comes in at a hefty price tag of $999, and is really only suitable for businesses that can afford it. The Telerik code is hosted on CodePlex.

Telerik KendoUI

KendoUI is the new kid on the block, and allows developers to build modern web apps with HTML5 / JavaScript. Charting is only one small feature amongst over fifteen included in this Framework. KendoUI current costs $399 for a developer license, and offers charting through its DataViz package (currently free with Web for a limited time). KendoUI is not tied to any server-side library as is the case with Telerik’s ASP.NET MVC Extensions. Currently there is minimal support in the ASP.NET realm.

Kendo MVC Extensions for ASP.NET

The Kendo MVC Extensions for ASP.NET library aims to "makes it easier for ASP.NET MVC developers to implement the Kendo UI JavaScript framework." A sample exists of how to use the Chart function.

Other Options?

Again, many other controls exist, but several that I came across were geared towards WebForms, build for Silverlight or were a bit older (eg. NPlot and Microsoft Chart Controls). There is a post about usage of Microsoft’s Chart Controls of .NET with MVC and more information in this Stackoverflow post. You also always have the option to work with JavaScript more directly, or create your own API wrapper for other top jQuery charting libraries.

Conclusion

Dotnet.Highcharts definitely has the most examples, so that is a win in my book. It makes getting started and understanding the code that much easier.  KedoUI is still quite new, but it looks slick and so I’ll be giving the DataViz a try as well with their free thirty-day trial.  While Telerik Extensions provides a stable, robust product, paying a thousand bucks for MVC extensions seems too heavy for me, especially since I mainly require charting.

What social authentication solutions are available for .NET developers? What are their features? These are questions I was looking to get answered. I’ve provided my findings in this article, which focuses primarily on active solutions, that have compatibility with ASP.NET MVC. I’ve listed four solutions: a direct DotNetOpenAuth implementation example (several exist), SimpleSocialAuth, SocialAuth.NET, and a third-party, API-based solution called Janrain Engage.

DotNetOpenAuth + OpenID-Selector

DotNetOpenAuth can be used to build custom authentication solutions from the ground up. This is a general implementation of the DotNetOpenAuth library which uses a simple JavaScript OpenID selector. Haitham Khedre provides a full tutorial on how to accomplish establishing social authentication with OpenId using the jQuery OpenID selector in MVC3 and has published the full source codeNote that other tutorials exist for using DotNetOpenAuth directly, so Google around to find one more akin to your liking.

Pros

  • Simple – Very simple implementation and the tutorial is fairly straight-forward.  Could be a good starting point for building your own.

Cons

  • Support – Only OpenId is supported, and the code itself looks to be unmaintained.  Likely will take some tweaking to actually using a in a production environment.

SimpleSocialAuth.MVC3

SimpleSocialAuth is a new solution, and it utilizes the DotNetOpenAuth library. It aims to fill the void of a simple, lightweight social authentication NuGet package for MVC. From the NuGet page: “Super simple and easy to install package that allows web sites creators to seamlessly add OAuth support to their ASP.NET MVC 3 sites. Supporting Twitter, Google and Facebook.”  Integration with ASP.NET Membership is beyond the scope of the library, and is left to the developer to implement.

Pros

  • Lightweight – You can easily get Authentication up and running for Facebook, Twitter or Google within minutes by adding in this NuGet package.
  • Extensible – Seems like a good starting point to build a custom solution off of.

Cons

  • Authentication Only – To do anything beyond authentication you’ll need to utilize other 3rd party libraries to communicate with the APIs (eg. Facebook SDK, Twitterizer, etc.), however this isn’t much of a con as it is by design and keeps it lightweight.

SocialAuth.NET

SocialAuth-NET is an extensible .NET Library for authentication/authorization through Google, Yahoo, Facebook and other providers supporting OAuth. It provides social authentication, profile data, social sharing (consume REST API feeds of supported providers), and more. It is a port from the Java-based SocialAuth library.  They have only recently added support for MVC with the 2.x release of the library, and ASP.NET Membership integration is not currently supported.

Pros

  • Features – It goes beyond authentication to offer social sharing, contact import and other features by communicating directly with the APIs to offer a bundled solution.
  • Coverage – It supports Facebook, Twitter, Google, Yahoo!, LinkedIn, MySpace and Hotmail / MSN out of the box, plus new providers are easily creatable.

Cons

  • Support – There are a number of reported issues with no timeline in sight.  You won’t get the same support level as you would with a paid solution. 
  • Membership – They have not provided support for ASP.NET Membership, and the issue remains open, as well as a general issue with supporting both traditional logins and social logins simultaneously.

Janrain Engage

Janrain provides a third party solution for handling Social Login, Social Sharing, Social Analytics and more with their Janrain Engage product. Troy Goode has provided a NuGet package called EngageNet that adds a wrapper library for the Janrain Engage service on ASP.NET MVC sites, though it was last updated a year ago. Janrain also provides a very basic wrapper (C#), but it definitely isn’t complete either. Other than that I struggled to find much in the way of .NET libraries for Janrain Engage. From what I remember (used it about 18 months ago), I had to write my own implementation for Pro/Enterprise features of the API like Account Mapping.

Pros

  • Managed – A totally hands off approach. You setup to work with one API system and they handle the rest.
  • Coverage – Pretty much covers any authentication provider you would need, plus more.
  • Features – It goes beyond authentication to offer social sharing, contact import and other features by communicating directly with the APIs.
  • Support – You can expect more support than you would get with an open-source solution.

Cons

  • Third-party – You and your data are dependent on an intermediary party. If their solution is down, so is your login. And the lower levels of the service aren’t completely white-label so people could see you are using a third-party service, which they might not appreciate when considering their authentication details.
  • User Caps & Cost – It gets costly for full features, with price caps at 10K / 25K users and beyond. Up to 10K users you are paying a $1000 / mo, which equates to a minimum of .10 per user or more. If you are planning to have a large user community, it could become very costly.
  • .NET Support – There isn’t much of a .NET community utilizing Janrain Engage, at least not those that are sharing their code publicly.  You’ll have to dig and ask around for coding help using Pro/Enterprise plans.

Conclusion

I should mention that the OAuth.net website provides a list of extensions / libraries itself, but, with the exception of DotNetOpenAuth, the others for .NET are old fairly old and seem unmaintained.  This was one reason for putting this article together.

I’ve tried Janrain Engage myself, and after the initial implementation it does make things easier, even though I had to write my own integration code. While they offer the most robust out-of-box solution at this point in time, in the end I really disliked having to rely on a third-party solution and eventually dropped it.

I think the SocialAuth solution is positioned very well, and if BrickRed would put more focus, resources and priority on the library, I think they’d have a solution developers would embrace, and likely pay for.

In the end I still struggle to determine what is the best method of authentication and interacting with social websites using .NET, specifically within MVC. Should I use a full-blown solution like Janrain Engage or SocialAuth.NET, or use barebones Authentication provider in conjunction with the Facebook/Twitter libraries directly? 

For now I’ll likely stick with a lightweight solution like SimpleSocialAuth.MVC3, and use the most stable SDKs directly.

Listed below are some of my recent findings for the best JavaScript Clipboard and Flash Detection scripts for web developers.

Clipboard Plugins

Developers can provide end-users the ability to copy text to their clipboard (eg. mimic Ctrl+C action).

ZeroClipboard
This is the most active clipboard project available.  Most robust, lots of options and active community.
http://code.google.com/p/zeroclipboard

Example of ZeroClipboard with multiple per page
http://www.webmasterworld.com/javascript/3901742.htm

zClip jQuery Plugin
zClip Wraps the ZeroClipboard functionality into jQuery and is worth checking out for those using jQuery and seeking a quick clipboard implementation:
http://www.steamdev.com/zclip/

jQuery Clipboard
Another (older) clipboard plugins for jQuery.  These only work prior to the "actionable-effect requirement" in Adobe 10 and works completely differently. *This won’t work with the latest Flash versions*
http://plugins.jquery.com/project/copy
http://plugins.jquery.com/project/clipboard

Detecting Flash

Easily identify if the end-user has Flash capabilities installed on their web browser.

Flash Detect (JavaScript Flash Detection Library)
Doesn’t seem to require a separate SWF file.  Small and easy to implement.
http://www.featureblend.com/javascript-flash-detection-library.html

SWFObject
Another good options for Flash Detection that is very reliable.
http://code.google.com/p/swfobject/wiki/whats_new

Some example code can be found here:
http://stackoverflow.com/questions/159261/cross-browser-flash-detection-in-javascript

jQuery Flash Plugin
Used for embedding Flash movies but also has detection.
http://jquery.lukelutman.com/plugins/flash/

Using ShareThis and want to have a customized version of multiple share buttons on one page?  The ShareThis API developer docs section would have you include a hefty piece of JavaScript wherever you wanted the ShareThis object to occur.  That is not only messy, but not very practical.  I was shocked I couldn’t find anyone that had posted a jQuery tidbit to fix this.  I found one attempt posted in their forums, but no final solution.  The solution below is based on the previous finding and this forum thread.

Be sure to read the developer docs and include the correct ShareThis widget JS file with your publisher Id prior to this code [ something like http://w.sharethis.com/widget/?tabs=web%2Cpost%2Cemail&charset=utf-8&style=default&publisher=(pub-id) ]

What I’ve done is loop through any cases where the sharethis class is present.  Inside the link include all the necessary information in data-* attributes that we pull out using jQuery.

<script type="text/javascript">
$(document).ready(function () {
  SHARETHIS.onReady();
  $("a.sharethis").each(function (index) {
    var id = $(this).attr('data-id');
    var purl = 'http://mydomain.com/posts/' + id
    var ptitle = $(this).attr('data-title');
    var thisobj = SHARETHIS.addEntry({ title: ptitle, url: purl }, { button: false });
    thisobj.attachButton(document.getElementById("sharethis-" + id));
  });
});
</script>

Example customized ShareThis Link

<a class="sharethis" data-id="(uniqueid)" data-title="The Title of This Post" id="sharethis-(uniqueid)">Share</a>

I searched around "Googled around" for a nice jQuery Tag editor, and it took me going through quite a few plugins before I found one that had everything I wanted… which included Autocomplete functionality using jQuery UI core. It looks nice, uses built-in Autocomplete, and has all the tag editor features.  I must note that it works a little different then almost all other tag editor plugins I’ve seen in terms of work flow.  It considers “remove from list” and “delete from list” two separate functions (read this).  This can be very useful, or merely extra work, depending on your implementation on the back-end. Currently it is being actively developed by Oliver Albrecht (aka @webworka) and hopefully it stays in active development! 

jQuery Tagedit
Demo: http://tagedit.webwork-albrecht.de
Code: https://github.com/webworka/Tagedit

image

I’m using it in the revamp for the CouponFollow website which I hope to push into private beta before the end of the month, and roll live shortly after.  I’ll likely use this plugin in future projects as well.

Here are some others that I liked but didn’t make the final cut for this project.

jQuery Tag It!
Link: http://levycarneiro.com/projects/tag-it/example.html
Code: http://github.com/levycarneiro/tag-it
My Notes: Very simple, autocomplete using jQuery UI.  Tagedit is based on this one.

jQuery Tag Editor
Link: http://blog.crazybeavers.se/wp-content/Demos/jquery.tag.editor/
My Notes: Good but no autoComplete. Some CSS overflow issues with large amount of tags.

jQuery Tag Suggestion
Link: http://remysharp.com/2007/12/28/jquery-tag-suggestion/
My Notes:  Good, simple.  Slick auto-complete, but no spacing support.  Older, not actively developed?

I recently had issues where Google was seeing misspellings of a domain names as different websites themselves, and possibly as duplicate content.  The domains were bound to the same web application in IIS and I wanted to fix this without editing the source of the web application itself.

I had a few options, one of which is to use Cantonal URLs, but that would involve editing the web app to some degree.  So before going that way, I wanted to start making permanent redirects to the correct website URL.  The quickest approach I could think of was to create a global redirect as a new web application and reassign all the domain name bindings needed.  So I created a simple MVC 3 Web Application called GlobalPermanentRedirect which effectively takes any page and redirects the path / query to domain specified in the appSettings.

The code is very simple, however I got stumped for a few minutes with Routing, as I forgot about the catch-all parameter using *.  Here’s the code, it’s really only about three lines.

In the routing area (Global.ascx) register the route:

routes.MapRoute(
   "Default", // Route name
   "{*path}", // catch all urls
   new { controller = "Redirect", action = "Index" } // Parameter defaults
);

Create a controller called RedirectController.cs with the following line of code:

public ActionResult Index()
{
	return RedirectPermanent(ConfigurationManager.AppSettings["BaseUrl"] + Request.Url.PathAndQuery.ToString());
}

In web.Config under appSettings:

<add value="http://www.yourmainsite.com" key="BaseUrl" />

I came across the need to upgrade from MVC 1 to MVC 3, skipping MVC 2 altogether.  Currently, it doesn’t seem like there are any formal directions coming from Microsoft.  However, I found instructions mentioned in this StackOverflow question.

It appears, as of now, there is a two step process to migrate from MVC 1 to MVC 3:
1) Migrate from ASP.NET MVC 1 to MVC 2 (using this tool)
2) Migrate from ASP.NET MVC 2 to MVC 3 (using this tool)

Things to be wary of…

  • ASP.NET MVC 3 Application Upgrade tool is not compatible with VS 2008
  • It may compile, but jQuery version changes could still break your app on the client-side

I haven’t tried it myself just yet.  Based on what I’ve read, in theory, it should work, but there will likely be minor annoyances and issues to clean up.  If it seems to work the first time, something is really wrong! :)

I’ll post a follow-up once I give it a go.

I was just about to search for a good Url regular expression to check input validation, when I remembered a recent blog post by @srkirkland mentioning Data Annotation Extensions (github).  This extension package allows for additional common use data annotations, such as URL, Email, Credit Card, etc in any .NET 4.0 project. It has been released as a NuGet package so you can easily implement it in your solution in just a click.

The catch was that I’m using SubSonic 3.0.  I love SubSonic, but I couldn’t think of an easy way to implement Data Annotations in conjunction with it.   So… I searched Stackoverflow like usual, and found a couple good posts.  The short of it is to create an additional TT file that creates buddy classes.

Here is the walkthrough: http://subsonicproject.com/docs/User_talk:Minus4

Note that the MetaGenerator TT file referred to in the above post must be created manually by you and is not included with SubSonic by default.  Actually you could call it whatever you like.  The code is included in the posted link above.

In my MetaGenerator.TT (download) I added an extra line to the includes:

using DataAnnotationsExtensions;

Once saved, right click the file and select “Run Custom Tool” to generate the .cs (MetaGenerator.cs) file.  Open that up and start adding your Data Annotations, and if you’ve so chosen, the Data Annotations Extensions as well.

3981c3cea7f7d772348901dc4b8d9ec0

I guess the only “gotcha” here is that if change your DB schema and you re-run the custom tool (TT file), it will wipe any custom input you’ve created.  Perhaps there is a work around for that?

Some have recently posted that a pitfall of the Amazon Simple Email Service is that you can’t setup it up to work through a traditional SMTP as you can with other services such as SendGrid.  While Amazon SES doesn’t provide a SMTP wrapper, Amazon points out that it can be used with some modifications to your existing MTA.  From the Amazon Developer Docs:

Q: Can my existing SMTP applications deliver email via Amazon SES?
Yes. The Amazon SES Developer Guide provides instructions for configuring common mail transfer agents (MTAs) to use Amazon SES as their email transport. By following these instructions, you can create a private SMTP relay for use with any existing SMTP client software.

In looking at the Amazon SES Developer Guide, they currently have examples of how to setup either Postfix or Sendmail software to use Amazon SES, and suggest adapting the examples to work with other agents.

If you want to test sending Amazon email in your own mock environment (or have an extreme situation that I don’t want to know about) below is how to setup a Mock SMTP Server and use it to test sending mail via local SMTP using the Amazon SES SendRawEmail API call.

There are a number of open source Mock SMTP servers available.  For this demo I chose the Antix Mail SMTP Impostor.  It seemed to have a good bit accomplished, while not being overly complex (brief writeup here by @LeeDumond).   You can download the source code from here:  http://ssfd.codeplex.com/

Once you’ve got the source code loaded up, Open FileMessageStorage.cs (in the Antix.Mail.Smtp.Impostor project).  Add a reference to the Amazon .NET SDK.

Next find the Store() function.  This function is used to store Mock emails locally on the hard drive.  Insert the following code to actually send the email out via Amazon SES.

//Send msg via Amazon SES
AmazonSimpleEmailServiceClient client = new AmazonSimpleEmailServiceClient("accessKey", "secretKey");
SendRawEmailRequest rawObj = new SendRawEmailRequest();
rawObj.RawMessage = GetRawMessageFromString(message.Data);
rawObj.Source = message.From.Address;
foreach (MailAddress addressTo in message.To)
{
	rawObj.Destinations.Add(addressTo.Address);
}
client.SendRawEmail(rawObj); 

Remember to include the namespaces

using Amazon.SimpleEmail.Model;
using Amazon.SimpleEmail;

That’s it!  Now you can create a sample Console App or even Outlook to use your localhost to test sending emails via local SMTP.  I’m not sure if anyone would ever want to do this, but it was a fun exercise for me.