|Part 1 (this)||Basics (mostly server side)|
|Part 2||ExtJS Client Side Details|
*For those who are intersted in this, I just posted a 3 part series on using ExtJS 4.2 with Microsoft’s new WebAPI Restful Interface. The new WebAPI is more efficient on the server side and the coding to REST makes the ExtJS side simpler. (March 13, 2013) Part 1
In this series of articles, we will take the reference application build by the Sencha product team for using Sencha’s MVC pattern running with an ASP.NET 4.0 project (IIS in production). The first article takes the reference Sencha MVC app and with almost no changes, makes it work with the ASP.NET Visual Studio 2010 project. By default, the application works with JSON static files. We change that to work with an ASP.NET MVC3 project. The second article in the series embellishes the application to include a more real user experience by adding additional functionality and data. The improved functionality includes both date and number columns as well as paging. It also adds functionality for inserts and deletes which are left out of the base app from Sencha.
Visual Studio Project SenchaMVCASPNetSolution
The Final Project when running:
What Is Sencha’s MVC Application
I don’t want to spend a lot of time here explaining what Sencha does really well in there article but I feel a short explanation is helpful (http://www.sencha.com/learn/the-mvc-application-architecture/).
Below is what Sencha’s app in Visual Studio looks like:
The major change to the stock MVC app from Sencha is to change there Store class. Here is the new Store Class.
The primary change is to the reader. Notice that the API’s are defined now to point the ASP.NET controller UserInfo. Also, the column names have been changed to start with uppercase to be consistent with public properties in ASP.NET. That is, id,name and email are now Id,Name and Email.
Now, we need to implement the controller on the ASP.NET. Basically, we implement GET on the read and POST on the write. The controller class in c# is as follows: (Visual Studio Solution Explorer first, then the controller code itself)
Notice that the Get method returns a JsonResult. This conveniently returns the data in JSON format. Part of the secret sauce here is in the Db(). This app used Microsoft’s new EntityFamework CodeFirst. Following the standard CodeFirst model, we implement the simple c# code and it automagically creates the data tables (and data) in the database (my example uses SqlServer CE because it can be run without installing any database on your windows computer, the code is all in-memory).
If we look at the Model on the ASP.NET MVC3 side, you’ll notice the c# attributes and the DbContext that do the magic for you. There are some excellent getting started guides on the web including one from Julie Lerman (walk through video: http://msdn.microsoft.com/en-us/data/gg715119 and http://msdn.microsoft.com/en-us/data/gg685467 ).
Here is the Visual Studio Solution Explorer for the model:
and here is the model code in c#:
and the actual repository which is in the file DbContext.cs (screen shot for brevity below, the code is attached in the example.