There are many folks who simply believe that one can’t develop a Test Driven MVC site using CSLA.NET. Two just simply won’t work together! CSLA.NET is just too tightly coupled! MVC and TDD require a specific DI architecture that simply cannot work with CSLA’a mobile objects. Well we are here to disprove those assumptions. In addition this will be the first step towards creating a CSLA standard bearer demo site in MVC – Project Tracker.
This is going to be a multi-part post where each post will describe different parts of this MVC application, and different Csla integration points – Introduction – MVC part, Json UI, Unit Testing, and the choice of Repository Pattern for this demo.
History
You can download the source
here. But before we go through the example what was my motivation behind this. ASP.NET forms few years back represented one of the largest productivity increases in web development. But soon we discovered that complex layouts require complex web controls and pages. In addition to that none of the complex controls are easily extended, beyond simple tasks that are built into the control itself (style, and similar changes on a grid control, for example). Awkward event model that was supposed to make it easier for Windows developer’s to migrate to web became another bottleneck. The largest problem was that although we were coding ASP.NET web apps in .Net languages, our deployment target was still a combination of JavaScript/Html, the part that was almost completely abstracted away and hard to get to.
That abstraction was a reason for making any extensions to existing ASP.NET web controls and libraries harder. For some controls like grid control for example, we did not even know what html is going to be rendered at run time. It depended on browser type, version, time of the day,… Worst of all when Ajax came out, technology that heavily depended on JavaScript/Html ASP.NET started falling behind some of the competitors. For sure we got few little things like “Update Panels”, and little auto-completion fields (that somebody else built for us), but building anything yourself required JavaScript. Not just that but integrating that JavaScript to run with the ASP.NET Server components was not the easiest thing in the world.
Concepts
That is where the idea of MVC came to life (actually few other competitors have had successful implementations before .Net, and even on .Net platform there was a Monorail platform that was available years before ASP.NET MVC). Instead of having a web page/form respond to URL requests and Html form posts, they introduced a controller object. And they came up with a
simple mapping that allowed us to build rather simple public methods on the controller and map Html form values or URL query parameters to that method as parameters or directly onto a DTO object inside that method. That separation resulted in easier program control flow from server to the web page, and breaking away from server side control model. Pages became views, in charge of nothing but rendering a content and presenting it to the user, as well us posting changed data to the controller. There was no more any complex business logic on the page itself, or complex "server event flow".
So if you would see a URL like:
http://server.com/Products/Edit/5,
Demo App
So this example (screen below) utilizes MVC Framework for ASP.NET and is built on top of CTP 5.
ExtJsDemo.zip (2.66 mb)
At the back end of this demo is a copy of the Northwind database (found in App_Data folder). It is a simple screen with 3 ReadOnlyList object. On the left you will see a Drop Down with a list of customers. Once a Customer is selected, we load a list of Orders for that Customer. When selected, order displays its order details in the drop down below.
All of the actions on this screen utilize Ajax calls. Now for the choice of Ajax framework used here. MS Ajax as it is built is out of questions. It was built to support web form post back/callback model, which really cannot take advantage of the MVC model. And simply put it is not very easy to use outside web forms. AS far as MS MVC Ajax – MS folks have just started working on it for the latest CTP 5 release, and they are years behind ExtJs, Jquery, and other libraries.
That leaves us with JQuery and ExtJs (at least fro now). However, one good thing about MVC framework, is that is built from scratch to be easily extensible, and to play well with any of the third part tools. You will see in some of my future posts on this demo that I utlize xUnit.net and excellent unit test framework that drives the innovations in .Net unit testing world. Not nUnit, or MSTest. Or for the same reason choice of RhinoMocks as the Dynamic Mocking framework. For the same purpose in the future versios of this demo we will utilize StructureMap as a Dependency Injection framework instead of MS Unity. All of these play very well with MVC and prove how extensible it is. But enough about that - lets mov on with our demo solution.
There are conceptual differences with the JQuery and ExtJs. JQuery is more focused on building dynamic html with its Ajax calls to the server, and dynamically inserting modifying parts of the page in response to Ajax action. If for example you want to render a custom modal pop-up dialog inside the page, as a result of action on the page JQuery will submit action to the server – controller, that will then render the content of the dialog back to the page. JQuery will then insert the dialog inside the modal frame control and display it. That is more in line with traditional Ajax development.
My choice of the ExtJs had something to do with a lot of CSLA developers coming from the Windows world. ExtJs actually provides us with the visual components/controls, like grids, drop downs, tabs, windows, etc… This controls utilize JSon to submit modified data to the server, and receive the content they need to render from the server. So instead of receiving a content of the grid control, for example, as a partial html page (table element), from the controller action, ExtJs grid actually receives what is called a JSon reader, and binds it to a sortable/ customizable grid control.
That way our server MVC model; actually utilizes more of a familiar control/event model on the client and I would actually say that for Windows developers this might be even easier migration path than the web forms.
In the next post I will be talking about UI portion of this demo, provide details of how we convert Csla objects into Json stream, send it from the Controller action and then utilize it within ExtJs Drop Down and Grid controls. This post will mostly be about server side unit testing for controller and routes. The fourth and final post should focus on the choice of Data Access Layer pattern – repository, and its integration into Csla code.
ExtJsDemo.zip (2.66 mb)