Customizing DateTime view templates in MVC3 to display jQuery datepicker utility

By default MVC generates a textbox for a model property with a datetime value.  But most of the time you would rather have it generate some sort of a datepicker utility instead, here I’ll modify my project to do exactly just that. 

So here I have an Address class with two DateTime properties that I want to be displayed with the jQuery datepicker utility.  Currently with the Html.EditorFor( ) helper method it simply displays a textbox:

AddressClass

 

EditorFor

 

Textbox

 

Step 1:  Add a new folder in you Shared View and name it “EditorTemplates”,  then in this new folder add a new Partial View “DateTime.cshtml” and have it strongly typed to a DateTime.  The reason for creating the EditorTemplates folder is because when using Html.EditorFor( ) in a view, the MVC framework checks for a template with the same name as the model and in our case it checks for a DateTime model in the EditorTemplates folder.  If it finds one then it uses this custom template otherwise it simply generates a default template for what ever model you are using.  Here we’re creating a template for a DateTime property but you can also create templates for your entire model and then when displaying a view for your model you can simply type Html.EditorForModel( ) and this will generate your custom template.

EditorTemplates

 

AddView

 

Step 2:  Now in this new View add the following content.

DateTime

So here we’re simply displaying the Date part of the DateTime value along with changing the input type  from a ‘text’  to the new  HTML5 ‘datetime’  field.  Once this is done the MVC runtime will generate an input with a type of datetime for all of our DateTime properties from here on out.

<input  id=”ArrivalDate”  type=”datetime”  value=”1/1/001” />

 

Step 3:  Even though we changed the input type to a datetime field it still displays a regular textbox in the browser.  To make it implement the jQuery datepicker add the links to the jQuery UI library and assign the datepicker utility to all the datetime fields in the default layout (_Layout.cshtml).

 

scripts

Now when you run your program all of the datetime fields will utilize the jQuery datepicker utility

jquery-datepicker

This is quite a few steps to set this up but once it’s done all of our DateTime properties will automatically be generated as a datepicker utility with no additional work, which is pretty cool.

Using Entity Framework code-first on pre-built database

First of all I am a true believer in SQL scripts and stored procedures and have spent countless hours honing my skills in those areas.  However, every time I start to work on a project I have to put on my DBA hat and think in terms of database schemas, relationships and normalizations.  Then if I miss something or need to add a few more columns I have to change the database schema first, before being able to do anything else in my code..Devil

The Entity Framework code-first approach is excellent if like me, you’re also getting tired of that same old routine and simply want to think and modify everything in terms of code and not have to worry about database part, to an extent.  If you are simply building the database from scratch it is an easy process to utilize code-first and there are numerous tutorials on the Microsoft website.  Here I’ll simply use code first to demonstrate how to use it on an existing database and not have to stick with those ugly database table and column names that some company like to use….

So lets use this following database schema for the demo.

Database

Now lets create our model to match this schema.

InitialClasses

As you’ll notice that the class and property names does not match the ugly database table and column names, entity framework will still be able to communicate with the database and I’ll show you how shortly.

And of course you can still add all the Data Annotation filters to your hearts content…

ClassFilters

Now lets get to the main content of the blog and that is – Make my classes work with the database tables, and to do that you simply override “onModelCreating” in your DataContext class like so…

EmployeeContext

So basically you’re telling modelBuilder that you have a class name Employee – match it to the table name abc_Employee, and same goes for the column names as well.

So here you have it, Entity Framework code-first approach communicating with a database table that has different names than your classes.  It is really a simple process using this approach.  Have fun! Ninja

SQL Server–Creating a new database from a .bak file

Backing up a database and restoring a database from a backup copy is something we do on a regular basis without much attention.  However, today I was trying to create a new database from the one that I already had for testing purposes.  So I backed-up the original database lets call it ‘xyz.mdf’, created a new fresh database ‘abc.mdf’ and preceded to restore it from xyz.bak file.  SQL Server Management Studio throws a nasty error (‘good luck reading those error’) and now I am stuck.  So, after much research and a bottle of Mountain Dew I finally succeeded in my mission to beat that error.  Here are the precise steps that I took:

  1. Create a new database (abc.mdf)
  2. Right click abc.mdf and select Task > Restore > Database.
  3. Under (Specify the source and location of backup sets to restore) select ‘From device’ and from the pop-up window click ‘Add’ then locate and select the xyz.bak file – click OK.
  4. Select the checkbox for the database source, then click ‘Options’ from the left Menu.
  5. Check (Overwrite the existing database), then under (Restore the database files as) click the right Ellipses buttons and select ‘abc.mdf’ for the database and abc.ldf for the log file.  Now click OK and wait for the sweet sound of success.

Good Luck Smile

Converting tinyint to regular good’ol int.

So today I was working on a project and came across the issue of extracting a tinyint value from the database using ADO.NET.  I also had to ensure that the returned value wasn’t NULL or else the conversion would throw a System.InvalidCastException simply because it can’t cast NULL to an int.  So the two things that I had to deal with was:

  1. Check for NULL values
  2. Cast tinyint to regular int

So, here is the implementation that I came up with.  Now there may be an easier way to check for NULL values returned from database, in fact I am pretty sure there is.

But basically to convert tinyint to int you just have to extract it as a BYTE and assign it to an int value and the conversion happens automatically.

 

 

 

Local Class

 

 

 

Why jQuery from CDN is preffered?

These days if your website doesn’t contain jQuery then people might start disliking you for no reason. You better believe it and get on board, yes jQuery is the next big thing and it has been for quite a while, I might add. So, if you’re wondering how can I get started, then you should probably head over to jQuery site and go through the documentation and familiarize yourself with the API.

 

What I want to go over here is the two different approaches you could take in referencing jQuery libraries in your project. The first approach and the one that I used to take was downloading the jQuery package that I need, insert it in my project and then refer to it from my pages like so:

 

This one is simple and we all should be familiar with it as a web developer, but keep in mind that this requires your server hosting all the required files and if you want to switch over to another theme or to a newer version down the road, then you will have to delete all of your old files, download the new files, unpack the files and put them in your project, basically a lot of steps to follow.

 

Now lets talk about the other method of using jQuery and that is by using CDN (Content Delivery Network) which are hosted on a bunch of servers around the globe just for you to use.

 

You can choose from either using Google CDN or Microsoft CDN, they both host pretty much all of the jQuery libraries including the UI Themes.  Some of the benefits of choosing CDN is that your project will be leaner and meaner (faster), your pages no longer has to load all the scripts and css file in the cache every time someone visits it, and you can rest assured that your site will always have access to those libraries.

So, if you’re still not convinced then I suggest you do some more research and choose the path that makes the most sense and stop following the old programmer saying “as long as it works”, rather think of the science that goes behind it.