Sunday, January 5, 2014

MVC 4 API controllers

If you've read my previous posts you'll know that I'm in the research phase of deciding which framework to use with my company's new project.  At this point I'm leaning toward MVC 4 with a few add ons: AngularJS, Bootstrap, Less, EF-6 and some others.  MVC is starting to grow on me and I wanted to show how to pass data back and forth between jquery (using AJAX) and an API controller (just to get warmed up).

Let's Get Started
To get this started I created a blank MVC 4 application and a controller called "HomeController.cs" in the "Controllers" directory.  Once this file was created, I opened the file and it already contained this code (automagically):

I apologize for using images for the code in this post, I'll include a link to the whole project at the end so you can download the source code.  Or you can just follow along with my descriptions and create this project on your own (giving you the chance to learn the tricks as you do it).

If you right click on the "View" method, you'll see an option called "Add View...".  Select that and a new dialog box will appear to create a view.  Leave the view name "Index" and just click the "Add" button.  A new cshtml file will be created in the "Views" directory.  This is where you'll put some html code for the startup page.  Before modifying that file, let's create a script directory and a javascript file.

Right-click on the project and click "Add -> Add New Folder".  Name the folder "scripts".  Then right-click on the scripts folder and select "Add -> New Item".  Then navigate to create a js file:

You can name the file anything you like.  I named mine "javastuff.js".

Next, you'll need JQuery.  I would recommend going to the JQuery website and downloading the latest version available.  The reason I like to do it this way is because it only needs one file.  If you use the NuGet facility, you'll probably get a bunch of stuff you don't need.  

Go to "" and click on the download button.  I chose version 2.0.3 for this example.  Once you have downloaded the js file that is needed for jquery, drag it into the scripts folder.

Now it's time to include the javascript into the html index.cshtml file created earlier.  First double-click on the index.cshtml file to edit the contents.  Then drag each js file into the code just above the <h2> tags.  Like this:

Of course, you can also hand type the script tags in if you like.  Make sure the jquery reference is on top.  You should be able to run your application and it will do pretty much nothing at this time (except print the text "Index" at the top of the browser).

All right, back to the C# stuff.  Create another controller in the "Controllers" directory, but this time make sure it is an empty API Controller (Right-click on the "Controllers" directory and select "Add -> Controller...").  Name it "PersonnelController":

One more file to create.  Right-click on the "Models" directory and create a C# file.  Name it "PersonnelModel.cs".  Your models should contain the code that queries your database, but I'm going to skip using a database in this sample to keep it as simple as possible.  What I'm going to do is create a class that will represent one database record.  Then I'll use lists of this class to represent data queried from the database.  The "PersonnelModel.cs" file should look like this:

Now we can use a list of this class inside of the api controller file (open your "PersonnelController.cs" file and enter this code):

I had to add a using statement to bring in the model for this example.  This "Get()" API controller will communicate with the JQuery that we are about to create.  Edit the "javastuff.js" file and make an ajax call like this:

Now you can put a breakpoint on the line where the variable temp is assigned to data.  When you run your application you'll break at that point and you can see that data contains a list of records that match what was added to result in the C# controller above:

Here's the source code for the entire project:
MVC Blog Post Controller Demo Project (Zip File)

In my next post I'm going to show how to add AngularJS to the project and connect a grid control to the API Controller and automatically display rows of data in the index.cshtml file.