Category Archives: MVC

QuickBytes: Visual Studio 2013 and JavaScript Debugging

Yesterday I found out something new about Visual Studio. Documentation indicates that it has been with us since VS 2012 (maybe earlier) but I encountered it yesterday.

I have a MVC4 project created in VS2010 and some CSHTML files have accrued some JavaScript crud in form of inline <script>…</script>. I usually refactor them out whenever I can but yesterday I was doing something else and wasn’t in a position to refactor the code at that point. So I tried to put in a breakpoint inside one of these script chunks and I couldn’t. So far, I’ve put breakpoints in the runtime page that comes up in Visual Studio’s Solution Explorer and they were are hit when executing in the browser, but yesterday I couldn’t even set a breakpoint.

After a little bit of ducking around I found that you could add the following line in the JavaScript to force the debugger where you want to start debugging and then continue with F10/F11 as usual

debugger;

I was initially indignant at Visual Studio that it ‘made’ me do this by default instead of allowing me to set the breakpoint. Looks a step backward, but then I realized that it was likely some setting in my Dev Setup is not right. I haven’t had a chance to investigate what’s not right, and I used the above hack to resolve my current issues. If you know of a way that kicks VS2013 into enabling breakpoints in inline JS code, do let me know.

Inline JS code is BAD and shouldn’t be used, period. But at times when you are prototyping you tend to take liberties, also not everyone in the team has 15 years of experience writing code, so cruft sometimes comes in. If VS is forcing my hand by making me write clean JavaScript code by default, that’s good, but I also want to know the ‘evil’ way to workaround Winking smile, Cheers!

Tagged , ,

A Minor Gotcha when using jquery.mobile in MVC4

Yesterday I was playing around with the jquery.mobile package from Nuget and found an interesting gotcha.

I had a project from the MVC4 WebAPI template (note: WebAPI doesn’t have anything to do with it). I wanted to add Mobile support to it, so I installed the jquery.Mobile.Mvc package through the package manager console. The idea was I would use the ViewSwitcher framework to create mobile views with appropriate extensions. But to my surprise my edit views started getting buttons that looked like Mobile buttons.

image

I also got exceptions in jquery.mobile js module like the following.

image

I started scratching my head wondering why was the mobile rendering kicking in when I didn’t have any mobile views created?

Turns out, that when you install jquery.Mobile.MVC or the standalone jquery.mobile nuget packages, the new MVC4 Bundling and minification functionality rolls up all the js files together in the _Layout.cshtml. As a result jquery.mobile kicks in and tries to convert everything into mobile layout.

image

Possible Solution

There is an easy way out.

After you have installed jQuery.mobile under the Scripts folder create a ‘Mobile’ folder and move jquery.mobile* files there.

Before                                    After   

image image

This will ensure the regular views don’t load jQuery Mobile scripts.

Now update the _layout.Mobile.cshtml to point to the updated location for jQuery.mobile scripts

image

You can do the same for the css to if you want to keep a clear separation.

Hope this helps you some head scratching. To me it seems the Nuget Package should be updated. But I’ll leave the solution to the biggies Smile.

Tagged , , , , ,

Entity Framework and MS Web Stack of Love – First Steps

Things they didn’t show you at MIX keynotes Winking smile

Okay, so you saw the MIX keynotes and were really really impressed with what MVC, EF 4.1 Code First and Scaffolding could do for you and excitedly sat down to try and get your old lumbering enterprise app transformed using the Web Stack of Love. Couple of steps in and you start stumbling around. Visual Studio throws errors, things stop working and you are scratching your head as to where you went wrong! Well happened to me and I got lucky in finding the solutions quickly with help from the community. Here are the details.

Model First or Database First with EF 4.1

As mentioned above the first thing I tried to do was get my old lumbering enterprise app moved to the new MVC platform. Now when you have an enterprise platform you can’t throw it away with the accumulated data of last 5 years. So the easiest way is to go Database first, reverse engineer the database to generate your data model. Below are the steps you would follow

  • Create an ASP.NET MVC Web Application using the new project template
  • Create a generic Class library project
  • Add ADO.NET Entity Data Model file (edmx) to the class library
  • Generate model from DB Connection by connecting to the database. So far so good, no issues.
  • Now you add reference to your database project to the web project, copy the connection string over from the class library’s app.config to web app’s web.config, and build it. Everything builds fine.
  • You right click on the Controller folder and select Add Controller and the MVC tooling wizard comes up. You select your root entity name and ask it to generate the controller, Visual Studio whirrs for a while and bam! Error!

    —————————
    Microsoft Visual Studio
    —————————
    Unable to retrieve metadata for ‘Your.Data.Entity’. The type ‘Your.Data.Entity’ was not mapped. Check that the type has not been explicitly excluded by using the Ignore method or NotMappedAttribute data annotation. Verify that the type was defined as a class, is not primitive, nested or generic, and does not inherit from EntityObject.
    —————————
    OK  
    —————————

  • So what did you miss. Well EF is all code first so the old style generation of Entities (EF < v4) fail to work. If you read the last line of the error ‘… and does not inherit from EntityObject’ it gives you a hint.
  • What now? Manually edit everything? That would defeat the whole purpose of O-R mapping right? Well solution was provided by Julie Lerman (MS MVP) in her blog here. I’ll summarize here.
  • Go back to EDMX file and open the EDMX designer.
  • Right click and select ‘Add Code Generation Item’.
  • From the ‘Add New Wizard’ select ADO.NET DBContext Generator. You’ll see it gives a Model1.tt (t4 template) name. Change the name if you want to and select Add.

image

  • You will see under in the class library a node gets added with the t4 template. When you expand the node you have the C# (or VB) classes for your entities.
  • Now build and re-try scaffolding the Controller and things will go through smoothly.

Taming the SQL Compact 4.0 for Model First Development

Here is another workaround for people who want to do Model First Development. Since SQL Compact 4.0 was released out of band from Visual Studio and .NET 4.0 releases, somewhere in the tooling chain something broke. As a result, when you try to add a new Connection using Generate Database Wizard you don’t see SQL Compact 4.0. You see up to 3.5 only. So how do you get 4.0 goodness?

Refer to the selected answer from this stackoverflow.com thread

The answer is pretty to the point so I won’t repeat it here.

Trouble with Modernizer.js  (ver 1.7.x only on VMs)

If you run your dev environment on a VM (like VM Ware on Mac), IE9 disables hardware rendering and the modernizer.js that ships by default keeps throwing exception ‘Microsoft JScript runtime error: Unexpected call to method or property access’. This happens for every page and become very irritating quickly.
Solution is to go to www.modernizer.com and download their latest library (2.0.6 at the time of writing this). Remove the 1.7.x reference from your web application and add 2.0.x version. Voila!

 

That’s about it for now. I’ll put down more of my experiences as I go forward with my EF adventures. When I started this article we had only 4.1 now we have 4.2 CTP out Smile. Fast! Very Fast!

Tagged , , , , , , , , , , , ,
%d bloggers like this: