A Powerful ASP.NET MVC Web Application - DevExpress Clinical Study Demo

The new DevExpress "Clinical Trial" demo app is simply loaded with functionality. And it's beautiful too, take a look at this screenshot:

What is it?

The new DevExpress Clinical Study Demo is a role-based web application that is designed to manage clinical trials. It demonstrates how the DevExpress ASP.NET MVC extensions can be used efficiently to build easy-to-use solutions.

Why I love this demo

The DevExpress Clinical Study Demo provides some great features and benefits and here's a few reasons why I love it:

- Great user interface (UI)
- Simple design
- Beautiful custom theme
- Powerful architecture
- Well thought out in its functionality
- Incorporates business logic into design

Watch the Video

I recommend watching the "How to Create a Powerful ASP.NET MVC Web Application" webinar video:

The video covers the demo's architecture, MVC extensions, theme, and much more.

Try online demo

Test drive the online demo here and then come back to read more about how this website was built:

http://demos.devexpress.com/RWA/ClinicalStudy/

Understanding Clinical Trials

We chose to do a demo on Clinical Trials because a couple of our developers had worked on a massive clinical trial website before and felt that it would be good example to show how to create a powerful and complex website with DevExpress MVC extensions. And they were right!

But what is a 'Clinical Trial'? Wikipedia has a great article on the history and definition of 'Clinical trials' and I recommend reading it.

Clinical trials are sets of tests in medical research and drug development that generate safety and efficacy data (or more specifically, information about adverse drug reactions and adverse effects of other treatments) for health interventions (e.g., drugs, diagnostics, devices, therapy protocols). - Wikipedia

Most 'Clinical trials' usually take a long time to conduct, with many variables and inputs determining the overall outcome. So, in our demo we decided to include a small set of functionality of a typical 'Clinical Trial' program. The basis of our demo revolves around two main roles:

1. Doctors (who collect and input the data for a clinical trial)
2. Supervisors (who view data to manage the clinical trial)

And you'll see these roles on the very first screen because you'll choose to login as one or the other. These roles also allowed us to design the website so that the doctors, would do all the data editing and the supervisors would do the analysis. This is a great way to show the different capabilities of the DevExpress MVC extensions.

Custom Theme

A new custom theme was developed just for this demo. We call it "Clinical Study Theme" and it has a beautiful style to it. The colors are soft and the overall look is professional, clean, and light.

We created the “Clinical Study Theme” to show that DevExpress MVC extensions can be successfully tuned to fit any custom design. We also used DevExpress Theme Builder tool to customize it.

However, this theme was designed only for the Clinical Study demo and therefore, it is not a full DevExpress theme that supports all DevExpress ASP.NET products.

In a separate blog post, I'll outline what controls this theme supports and how to use it with other web projects that use DevExpress ASP.NET.

Architecture

Here's how we built this demo.

MVC Areas:

Because this demo is divided by two major roles, we use the ASP.NET MVC features called 'Areas' to make it easier to organize the project. Therefore, you'll find that there are two main Areas that functionally divide and separate the two major roles of this demo. This helps keep the application design clean and easier to manage as it grows in complexity.

Learn more about ASP.NET MVC Areas here.

Dependencies:

- ASP.NET MVC 3 - When this demo was created, ASP.NET MVC 4 was not released but it is possible to upgrade and use ASP.NET MVC 4
- SQL Express - SQL Server Express is a free edition of SQL Server ideal for developing and powering desktop, web and small server applications
- Entity Framework - Microsoft's object-relational mapper (O/RM)
- Castle Windsor (Castle Project) - An Inversion of Control container for .NET
- Moq - A simple mocking library for .NET
- NUnit - An unit testing framework that is open source written in C#
- Modernizr - an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites

Don't worry if you haven't downloaded many of those libraries because Nuget in Visual Studio 2012 can download them for you. You'll still need to install ASP.NET MVC and SQL Express yourself though.

Project Structure:

The Visual Studio solution for the Clinical Study demo consists several projects that represent the different layers of a typical and well architected complex web project:

Here what each project is meant for:

DevExpress Help Documentation: Clinical Study Specifics

Data Access: Entity Framework

The developers decided to use the Repository pattern because of it's simplicity. And they also chose Entity Framework from Microsoft because of it's features and popularity. They decided to use a Code First approach with Entity Framework to show that you can take nearly any approach with DevExpress MVC extensions.

Dependency Injection / Inversion of Control (IoC)

We decided to use a Inversion of control container and a mocking framework because it provides:

1. Good Unit Testing coverage - We wanted the ability to test without touching the database
2. Better design - Because of the separation of concerns, we're able to keep most of the classes smaller. And it also follow the SOLID principles
3. Two sets of repositories - Because this demo runs locally and online, we needed two different repositories. The online version does not allow persistent editing so we created an "In Memory" version that allows changes only during the ASP.NET session. Then each new user gets to experience the demo with the default data.
The local version of the demo uses SQL Express because it can allow for persistent editing.

Why did we choose to use Castle Windsor? Simply to show you that you can use just about any 3rd party IoC Container with DevExpress MVC extensions.

NUnit

One of the most popular unit testing frameworks, NUnit was an easy choice because our developers had some experience with it. However, you can use just about any testing framework with DevExpress MVC extensions.

Overview

With the DevExpress Clinical Study Demo, our goal was to show that DevExpress MVC Extensions fit well with the MVC approach and that real world applications can be made easily with DevExpress MVC extensions.

The demo shows that DevExpress MVC extensions can be used with Test-Driven Development (TDD) approach and are not a roadblock in any way.

The roles in the demo show you:

- Supervisor Role: Analytics dashboard (with Pivots, Reports, Charts)
- Doctor Role: Data entry (GridView, Editors, HTML Editor, etc.)

The custom theme shows the DevExpress MVC extensions themes and styling capabilities.

The architecture shows you that DevExpress MVC extensions are compatible with any of the major patterns and frameworks available today. And they also show you how use them in your own projects.

The data access shows you how to work with Entity Framework using Code First and the repository pattern.

Overall, this demo packs a lot. It's powerful, well architected, created using TDD approaches, beautiful, and provides a great user experience too.

Free DevExpress Products - Get Your Copy Today