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

ASP.NET Team Blog
11 October 2012

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

DevExpress 'Clinical Trial' Demo - ASP.NET MVC

 

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:

Mehul Harry presents the 'DevExpress Clinical Study Demo'

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.

CS_Dependices

 

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:

HelpResource.ashx

Here what each project is meant for:

DevExpress Help Documentation: Clinical Study Specifics

DevExpress Help Documentation: Clinica 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.

 

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions: http://dxpr.es/ov1tQa

Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

4 comment(s)
Rented Dreams
Rented Dreams

"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."

I'm looking forward to that blog. I like the look and feel of this theme and would like to know how to use it in a regular asp.net web application project.

17 October, 2012
divyesh makwana
divyesh makwana

In reference to above article (and related code), i am interested to know how it can handle performance.

To be specific, within 'accountcontroller.cs' it binds grid with usersQuery, which in turn is communicating with repository. Here, i belive even if grid is just showing 10 records, it is still querying database for all records. right?

Is there way to query only required records only? I know there is a method GridViewExtension.BindToLINQ / GridViewExtension.BindToEF methods, but it also require expose Context class to Site project.

I do not want Site project to be aware of any context class. Is it possible?

Thanks.

29 October, 2014
Patrick Shaffer 3
Patrick Shaffer 3

This is a beautiful application as are all of the live demo's on your site. How can I get the source for this demo? I think it would be extremely helpful if your customers could see quality end to end real world applications implement with all or some of the controls offered. I really want to see how the styling is applied to achieve the look of this application. The demos that are provided do show how to use your controls and are very helpful but the demos don't cover styling examples of the controls.

5 July, 2015
Patrick Shaffer 3
Patrick Shaffer 3

Please disregard my last comment, I should have read your entire post before commenting. I found the demo, thanks!

5 July, 2015

Please login or register to post comments.