MVC

JQuery.Migrate saves the day with Telerik UI for ASP.NET MVC

Matt Simner ASP.NET, JQuery, MVC

The relentless pace with which libraries, and dependent javascript resources now change,  is quite difficult to keep up with – particularly when you’re attempting to be frugal and use open source projects like Telerik UI for ASP.NET MVC – which basically got dropped in 2013, and replaced by Kendo UI.

The basic problem is that when you’re using libraries like these, that depend quite a bit on things like JQuery, and get subsequently dropped – you can be left in a bit of an upgrade quandary.

It’s tempting to go to NuGet, and just ‘update all’ libraries you’re using, but all sorts of bad things can happen if you get a little trigger happy on that function.  The Telerik components for instance expect JQuery 1.7.1 (which is a 2012 version).  I now want to use Bootstrap to create a responsive theme, and that’s wanting JQuery 2.x.  I’d tried to update to a later JQuery version previously and basically the whole deal broke – almost all components were using deprecated JQuery features.  I was considering going through the code and patching where required, but I don’t have that kind of time.

Whilst looking for deprecated features on the JQuery API doco, I saw mention of JQuery.Migrate plugin – which basically fills in those gaps for you.  I then picked up the package in NuGet, added to my Bundle config (right under JQuery)

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 "~/Scripts/jquery-{version}.js",
 "~/Scripts/jquery-migrate-1.2.1.js",
 "~/Scripts/jquery.cookie.js",
 "~/Scripts/jquery.imagemapster.js",
 "~/Scripts/jquery.tooltipster.js"));

Stopped the site in IIS Express, restarted, and everything just magically started working again!

Now – I just have to get the responsive stuff singing and dancing with BootStrap 🙂

Integrating ASP.NET MVC into an existing ASP.NET Webforms application

Matt Simner ASP.NET, MVC , , ,

If, like me you’re not always blessed with the opportunity to build every application from scratch, you may find yourself wanting to introduce the wholesome goodness of ASP.NET MVC into an existing ‘classic’ ASP.NET Webforms application. Most tutorials out there concentrate on nice green field development.

What follows is largely a reference for me to remember how to do this.  It’s basically a matter of manually injecting what the project templates do for a new application.  I’m also not professing to have come up with all of these steps – I’m just bringing them together.

I’ll assume you’ve got all the necessary prerequisites (MVC 4.0) installed already, and if you have a web ‘site’ project, then I’d suggest you update it to a web application before doing all of this.

Getting the structure and configuration to look like MVC

There’s a number of standard folders, and bits of code you’ll find dotted around MVC applications – Models/Views/Controller for instance 🙂

The following article goes through the first steps of getting those folders into your project (assuming you don’t have a naming conflict).

Mixing ASP.NET WebForms and ASP.NET MVC

Updating to MVC4

This is all good, but that article’s a bit old, and you’ll find the next one brings you (mostly) up to date with MVC 4.0

Adding MVC 4.0 to WebForms Project

If you want to use any of the newer features such as bundling, or if you’ve copied some views from an MVC4 project into your new MVC project, you’ll need the ASP.NET Web Optimization Framework (get it from NuGet).

You may also want to take an MVC4 project and convert the global.asax code to call off to the classes in the App_Start folder…

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            AuthConfig.RegisterAuth();
        }
    }

Getting the Visual Studio MVC Template Goodness

This is great, but the icing on the cake is to make Visual Studio think this is an MVC project, so you get the nice right-click options, like add–>Controller if you’re in the controllers folder.  It turns out you just need to fool Visual Studio by adding a project type guid in your web projects csproj file…

With Visual Studio I just did a quick diff between a new MVC 4 project’s project file, and my ‘hybrid’ project’s file.

The following is what you’re looking for…


<SchemaVersion>2.0</SchemaVersion>
<ProjectGuid>{18BBC72C-702B-40CD-B347-D7FC66D276FA}</ProjectGuid>
<ProjectTypeGuids>{E3E379DF-F4C6-4180-9B81-6769533ABE47};{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>

If you just add the first ‘ProjectTypeGuids’ guid to the corresponding place in your project file, and reload, the magic happens, and Visual Studio thinks it’s now an MVC project.  You’ll probably find you already had the other 2 guids.