Wrestling around with Web API and the first stumbles with the Repository Pattern : Bootstrap Theming.

Not too long ago I was writing WCF data services using entity framework and OData (and feeling weird about how easy it was to create a REST service when your model is set). I thought I would fool around a little with the Web API pattern – which is the way Microsoft is touting serving up JSON to applications using the following pattern:

Web API

 

I’m using the repository pattern, and following these steps:

  1. Create a Entity Framework model with the tables I want to display. Yawn.
  2. Add an interface in Models, call it IProductTypeRepository, with the behaviors I want to see.
  3. Add a model class (ProductModel.cs) that inherits from this interface
  4. Make sure Global.asax has either default api setup or there’s a App_StartRouteconfig and WebApiConfig class.
  5. Surgery on the ValuesController class.

… AND IT TURNS OUT, I found myself in a dead end pretty quickly. There are three ways to approach Entity Framework –

  • Database-first: You start with a database, and Entity Framework generates the code.
  • Model-first: You start with a visual model, and Entity Framework generates both the database and code.
  • Code-first: You start with code, and Entity Framework generates the database.

Fair warning here – using the repository pattern I mapped out above could end up in a cul-de-sac for you. The Web API seems to work best where you don’t know the shape of the database model – i.e. either model- or code-first. Most of the examples you see online follow either the model- or code-first pattern. There’s a reason for that… EF patterns for database-first are so simple, I’m not sure if the Web API is the right way to go – and I got a series of errors when I tried to auto-generate T4 classes of more than one table (“I’m missing a key”, VS will complain).

Anyway below is a writeup of my travails. The end result is, I’m abandoning this and going with EF with WCF data services. See the MSDN article in the footnote by Julie Lerman – she indicates to use Web API when you’re going code-first and aren’t sure what your final model/db layer will look like, and using WCF Data Services when your db is more established:

If most of what you want to expose is simple Create, Read, Update, Delete (CRUD) without the need for a lot of customization, then a data service will be your best choice. If you’ll need to customize a good deal of the behavior, a Web API makes more sense. I like the way Microsoft Integration MVP Matt Milner put it at a recent gathering: “WCF Data Services is for when you’re starting with the data and model and just want to expose it. Web API is better when you’re starting with the API and want to define what it should expose.”

 

Web API Project – From Scratch

I think the above MIGHT be because we’re using EF6, not EF5. I find it frustrating that WebAPI seems to like Code-first versus Model-first. So, let’s kick over and do this from scratch:

bootstrap theming

 

Create a new project. Empty, but add core references for MVC and Web API.

 

R click on your Models folder and Add a EF model with your tables. Look at the genereated code. See this? Use PCSEntities as your Entity, and PCSModel as your namespace.

 

R-click on Controllers, select Web API Controller with Actions, using Entity Framework.

 

Check out the shiny new generated code:

 

Now build that sucker. Look at our shiny XML:

 

Let’s turn off XML generation. Add the following:

 

 

 

Build again. Yay, we have liftoff:

 

 

 

Repeat the steps above for Location:

 

 

 

Shiny!

 

 

 

What happens when we query http://localhost:32237/api/Location/3?

 

 

 

Some Notes Here About Bootstrap

 

Bootstrap theming is terrific – and I love the ability to have responsive design that’s truly cross-browser compatible without having to muck around with CSS. To do bootstrap I did this:

  1. Go to http://Bootswatch.com, and download a theme.
  2. Copy the contents of the downloaded CSS file.
  3. In Visual Studio, create a new Style Sheet file named bootstrap-theme.css in the Content folder and paste the downloaded CSS code into it.
  4. Open App_Start/Bundle.config and change bootstrap.css to bootstrap-theme.css.

 

Notes and Links

I’m not done yet. I want to do some more research about the Repository pattern and how to do Web API the RIGHT way. I think I need to spend more time thinking about the design pattern and get out of the database-first box.

Next, for the frontend, I want to start thinking about KnockoutJS and the MVVM model:

f

I need to add user authentication and roles – this article contains some great info on hooking up users/roles.

Jason Zander’s blog post – has a nice walkthrough on the Web API:http://blogs.msdn.com/b/jasonz/archive/2012/07/23/my-favorite-features-entity-framework-code-first-and-asp-net-web-api.aspx

Best example I’ve seen yet on Web API – including the otherwise excellent MVC book by Apress – is this post: http://www.dotnetglobe.com/2012/03/crud-operation-using-aspnet-web-api-in.html

See the MSDN article here on Single Page Applications and MVC vs MVVM.

Another article on Web API and how it could be used vs WCF Data Services –http://msdn.microsoft.com/en-us/magazine/dn201742.aspx

Leave a Reply

Your email address will not be published. Required fields are marked *