Tag Archives: MVC

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 , , , , , , , , , , , ,

MVC3 and Telerik Grids

The Background (feel free to skip it)

As we all know in MS change is a slow process. However something is definitely wrong (in a good sense) with the ASP.NET team. They seem to be innovating at the speed of thought!

MVC is already into revision 3 and the PDC demos by Scott Hanselman are already outdated (they phased out MvcScaffold replaced it with MvcScaffolding package).

Either-ways MVC + Scaffolding + EF seemed like a very nice way to re-do the archaic 4 year old system I am currently maintaining. Whether someone needs it at work or not it is a good ‘real-world’ (as opposed to ‘hello, World’) project to take up, while learning ASP.NET MVC.

But the grid implementations out of the box is pathetic and I stumbled upon Telerik’s feature packed MVC Extensions and guess what, they have a GNU license version for you to play around with. It was even available for download through Nuget package manager. Wow!

Anything that’s too good to be true usually is…

My joy was short lived. Off the bat the new scaffolding generator refused to use the custom t4 templates (like Scott had shown). I fiddled around a little but couldn’t figure it out so left it and changed the view by hand to convert the Index page such that it uses the Telerik Grid.

Examples seemed helpful enough and slowly but surely things were falling into place when I noticed the filtering functionality was not working! Then I noticed the Popup for New/Edit was not centered and did not have correct styling (background wasn’t disabled and popup-header’s drag wasn’t working). Started digging around. View Source indicated some javascript files were missing. Added them, and BAM! Hell broke loose, jScript errors all over the place. Everything stopped working.

Retrace Steps (abandon brute force)

Registered and downloaded the latest samples from Telerik (the project had the package installed through Nuget package manager). The sample ran like a champ in local environment. Confused again!

  • Added all the latest javascripts from sample to my project
  • Added the Telerik.Web.Mvc from sample to my project (essentially replaced the reference added by Nuget)
  • Then I noticed the following little piece missing in the _Layout.cshtml

image

Even after adding it the errors continued.

Back to sample.

  • Then I noticed in the sample _Layout.chtml there were no direct references to the individual js files (from telerik). All it had was the above registration code. Light bulb moment!!!
  • Removed the direct references to the other js files and kept the registration code only. Still no luck! But this time I got an exception in the above line saying one of the js files not found under “~/Scripts/” folder. Oh Boy! All the telerik js files need to be under “~/Scripts/”. Moved them out to the  ‘Scripts’ root and changed the code to look like

image

  • Eureka moment! Finally things look the way they should.

In Conclusion

  • Telerik extensions available through Nuget (today) are not the latest (they use jquery 1.4.3 as opposed to MVC 3 using 1.4.4)
  • Download latest from Telerik.
  • You only need to register the above javascript and the rest of the scripts are registered automatically
  • All the Telerik javascripts need to be in the “~/Scripts/” folder. Don’t be fooled by the cryptic folder (like 2010.3.1110) created by Nuget. You will need them to be in the root folder.
  • Don’t rely on ‘View Source’ completely. There is still some amount of backend munging going on.
  • Unlike me start with the sample and move it to your project, not the other way round.
  • Stay tuned for T4 templates to generate views and controllers taking advantage of Telerik extensions.
  • Last but not least Telerik MVC extensions at-least for the Grid are pretty powerful and I thank Telerik for making the entire suite available under GNU license.
Tagged , , , , , , ,
%d bloggers like this: