Blog Code Syntax Highlighting

I recently had a problem with my code samples syntax highlighting.

I use the SyntaxHighlighter Evolved WordPress plugin, but noticed that this started to just display a box around the code – without applying any of the special formatting.

I have been using PreCode to copy/paste my source code into a Pre tag.

Anyway, long story short, I found a setting for the plugin that, once enabled, fixed the problem.

In my WordPress admin page, under Settings > SyntaxHighlighter, I had to enable the “Load All Brushes”  option:

image

It even tells you right there in the description that you need this when using <pre> tags!

Real Time Map with D3.js and ASP.NET SignalR


Introduction

I’ve been using D3.JS a lot recently at work to create some economic data visualizations.

I also got the chance to play with ASP.NET SignalR to update a web page showing progress on long running workflow type process (using a SQL Dependency, which was cool!)

For the last few months I kept thinking to myself “wow wouldn’t it be cool to hook up D3.js and SignalR to have a real time updated data visualization?”  I mentioned this to a couple of developer friends (at a bar where all the best ideas originate!) and they said “hey what about one of those D3 maps you keep talking about?!”.  And thus this experiment was born.

It turned out to be really simple to get this working, although I’m sure it helped that I’ve recently been working with both of these technologies.  This post will intentionally gloss over some of the extra details – like how exactly the map gets drawn initially and how the SignalR hubs work – and concentrate on the real time update.  I’ll include a couple of links at the end of the post to give you a head start on both D3 mapping and SignalR.

Continue reading

MVC 5 Unobtrusive client side validation with jQuery 1.10.2

I’m working on a new ASP.NET MVC 5 (5.1.2) application within Visual Studio 2013 Update 2.

I tried to add client side validation using Model Data Annotations and the Html Helper:

[Required(ErrorMessage = "Please enter the required value")]
public int ARequiredValue { get; set; }

@Html.ValidationMessageFor(model => model.ARequiredValue, "", new { @class = "text-danger" })

This didn’t work.  Instead of the validation kicking in, the submit button just posted to the controller.

Initially I saw an error in my browser console, saying that jqueryval couldn’t be found (http 404).  This was coming from my attempt to output the jqueryval bundle.  Investigating this lead me to find that this bundle was not configured.  Worse, the JavaScript (jquery.validate and jquery.validate.unobtrusive) files that it needed were not even included in the project.  These used to (in my MVC4 projects) be included by default within a new MVC project.

So I tried to use Nuget to install the Microsoft jQuery Unobtrusive Validation package:

image

But got an error saying Operation Failed – Updating ‘jQuery 1.10.2′ to ‘jQuery 1.4.1′ failed. Unable to find a version of ‘Microsoft.jQuery.Unobtrusive.Validation’ that is compatible with ‘jQuery 1.4.1′:

image

I checked the version of jQuery included (by default) in my project was jquery-1.10.2.min.js.

I need to investigate into this some more to see if there is a better solution, but I really needed to get this working in a hurry, so here is my temporary workaround.

I copied the following unobtrusive validation JavaScript files from an existing working MVC solution into my Scripts folder

  • jquery.unobtrusive-ajax.min.js
  • jquery.validate.min.js
  • jquery.validate.unobtrusive.min.js

Then I added reference links to these files within my main _Layout.cshtml file:

  

  
  
  
  @Styles.Render("~/Content/css")
  @Scripts.Render("~/bundles/modernizr")
  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
  

  
  
  

So far this seems to be working, but I’d be interested to hear if anyone has hit this problem and has any more information.

Update

A helpful reader (Eldi) commented with a simpler solution.  I just tried it in a newly created MVC project and it works.  Thanks Eldi!

Using NuGet, install the following packages in this order:

  • jQuery.Validation
  • Microsoft.jQuery.Unobtrusive.Validation

Installing jQuery.Validation first fixes the problem.

Creating a Simple Bar Chart with D3.js

This post will step through creating a bar chart with D3.js.

To keep things simple we will be using some hard coded data.  I grabbed the top five goal scorers for Manchester United last season (from ESPN FC) and put them into JSON format.  So we have an array of the player’s name and the number of goals they scored.  I’m populating this in the document ready event (using jQuery):

$(document).ready(function () {
    var jsonData = [
        { "PlayerName": "Robin Van Persie", "GoalsScored": 26 },
        { "PlayerName": "Wayne Rooney", "GoalsScored": 12 },
        { "PlayerName": "Javier Hernández", "GoalsScored": 10 },
        { "PlayerName": "Shinji Kagawa", "GoalsScored": 6 },
        { "PlayerName": "Patrice Evra", "GoalsScored": 4 }
    ];
});

We are going to be creating a SVG element containing the various rectangles, lines and text that we need to build up a chart.  The end result will look like this (which you can see running at http://darrenblogsamples.azurewebsites.net/D3/BarChart):

image

Continue reading

D3.js Introduction

Recently I have been using the D3.js library to create some data visualizations.  I thought it would be fun to start creating blog posts as I learn new techniques.  I have been learning how to use the library through these brilliant resources:

D3.js is a library which allows us to create and interact with charts (and other visualizations) based on data.  These visualizations are all web based and can be created using HTML and SVG elements.

It provides easy ways to work with data, shapes, scales, axis and transition animations.

I’m going to start a series of posts on using D3 in the hope that maybe they can help someone starting out on their D3 journey.

I’m a .NET developer, primarily ASP.NET MVC, so I will build up to include some examples of how I have been able to combine D3.js into ASP.NET MVC solutions and combine it with other technologies.

I have created a new web site that I can host samples on.  I’ll link to this throughout my posts so that you can see working examples:

Darren Blog Samples Website

I’m also keeping the code in GitHub – although bear with me as it’s my first repository!  This might not be particularly useful for the simple static examples, but I think it will help when we start integrating with MVC.

Darren Blog Samples GitHub Repository

Error after changing Namespace of MVC project

I’ve hit this problem using ASP.NET MVC a couple of times now.  So I figured it was worth a quick blog post so that I don’t waste more time when I undoubtedly get it again in the future.

When I create a new project in Visual Studio, I always try to give it a nice and simple name (e.g. in this case, “UI” being as it was the main UI part of the solution).  I then change the namespace of the project to match my overall solution structure (which I use for every solution – e.g. <CompanyName>.Solutions.<SolutionName>).

At this point things usually work and all is good… until I notice that in some of the code files Visual Studio is still using the old namespace (e.g. “UI” instead of “<CompanyName>.Solutions.<SolutionName>.UI”) – so I let ReSharper do it’s thing and re-namespace it accordingly.

And now I sometimes start to get an error saying that the temporary App_Web_index.cshtml file cannot find the namespace “UI”:

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS0246: The type or namespace name ‘UI’ could not be found (are you missing a using directive or an assembly reference?)
Source Error:

Line 26:     using System.Web.Optimization;
Line 27:     using System.Web.Routing;
Line 28:     using UI;
Line 29:     
Line 30:

Source File: c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\SolutionName\24f781d0\545bfc2c\App_Web_index.cshtml.a8d08dba.rxqnpm6k.0.cs    Line: 28

I went through and searched the solution for “using UI” and didn’t find anything.

I thought maybe it was just the temporary files getting out of sync, so I shut  down Visual Studio, restarted IIS, deleted the temporary files (in the location in the exception message) and restarted Visual Studio.

Same problem,

Eventually I found the problem lies in the web.config file that is living within the Views folder.  Take a look in here and you will see the old project namespace being added within the system.web.webPages.razor section:

    <system.web.webpages.razor>
        <host factorytype="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pagebasetype="System.Web.Mvc.WebViewPage">
          <namespaces>
            <add namespace="System.Web.Mvc" />
            <add namespace="System.Web.Mvc.Ajax" />
            <add namespace="System.Web.Mvc.Html" />
            <add namespace="System.Web.Optimization" />
            <add namespace="System.Web.Routing" />
            <add namespace="UI" />
         </namespaces>
       </pages>
    </system.web.webpages.razor>

I removed the UI entry from there and everything starts working again.

I stumbled upon this solution a couple of times through trial, error and brute force, but this latest time I found the same solution posted here: Changing namespace for an mvc project in visual studio.

Excel VBA Pivot Table

I work for a company that provides economic modeling data, software tools and services.  Last week I was asked to help the economists by fixing an Excel spreadsheet which uses VBA code to populate an economic Social Accounting Matrix (SAM) and then perform some calculations and processing.  The spreadsheet can be used to import source data from my company’s software.

The problem was that the spreadsheet tool was designed to work with a limited dataset (an aggregated set of industries), whereas our economists wanted to use it with our full set of data (around twenty times the number of data items).  This larger data set caused the spreadsheet tool to fail.

Continue reading

jQuery Collapsible Panel Plugin


Introduction

I just moved my website over to a Windows Azure hosted WordPress blog.  My Google Analytics statistics showed me that by far the most popular content from my old website (which was a ASP.NET site rather than just a blog) was this information about a jQuery Collapsible Panel Plugin that I created a long long time ago while learning jQuery.

So here is the post in case anybody wants to refer back to it.  If you accessed this page from it’s original URL, then hopefully you just got redirected to here.

Thanks!

Continue reading

Entity Framework – missing entity source files

Today I created an Entity Framework model from an existing database.  I generated the POCO entities and used the EF 5.x DbContext Generator to create a DataContext class.  That was all good!

These source code files were alll generated in my data repository project, so I then moved the entity POCO classes into their own project and updated the context to look for the entities in their new namespace.  This is what I usually do. Continue reading

Software Developer