Fun Illustration of ASP.NET MVC’s Pluggable Architecture

The more I work with ASP.NET MVC the more I enjoy it. What is it that makes ASP.NET MVC fun to work with?  The modular architecture is really powerful and once you get used to it you will be able to come up with all kinds of creative solutions.

The bedrock of software engineering is to minimize coupling and maximize cohesion. This is one of those truisms that every geek is supposed to have tattooed on his arm or something.

…excerpt taken from Pluggable Architecture in ASP.NET MVC 4 over at SquareWidget.com

Real World Samples Of ASP.NET MVC’s Pluggable Architecture

I created a graphic that illustrates how MVC partial views were utilized along with the Model to break each part of the webpage into small and manageable pieces. Unfortunately the graphic did not turn out at all like I wanted it to because I am not a graphic artist and there was too much information.

I hope that the point that I was trying to make is clear.  One example below is the breadcrumbs section. That section is rendered using a partial view and can be plugged into any page or section of the website. If you are creative and do some planning you could easily create components that are re-usable across many applications.

These smaller components make creation and maintenance of a website easier and more enjoyable.  The sections are color coded with their respective partial view section of code.

ASP.NET MVC4 Modular Architecture

 

The next graphic shows some of the partial views that made up webpage in the first image.  There are so many partial views used in my page that it is nearly impossible to show all of that information in one place.

The difficulty in creating a graphic reminds me of how much more difficult it would have been to put all the code in one place.

Other sections where partial views were utilized are the address section of the link, the thumbnail rendering, the menu and menu security is handled via a partial view and breadcrumbs were created using a partial view.

ASP.NET MVC4 Partial Views & HTML Helpers Make Complex Pages Easy

ASP.NET MVC4 Modular Architecture

 

 

 

 

 

 

 

 

 

 

 

 

 The Reddit Alien

I was researching different website layouts and was going to use partial views to make the website layout dynamic.  While searching for layout ideas I came across the Reddit Alien code and decided to put it into a partial view just for the fun of it.  The CSS has one attribute for alien size, and the alien adjusts it’s size based on the page size as well.

The alien wasn’t the most practical use for a partial view but it was fun to play with.

Creating the Reddit Alien using HTML & CSS (no javascript or images)

If you are interested in the code for rendering the Reddit Alien you can find it here from MatthewJamesTaylor.com.

As you can see I made four calls to the partial view using four different sizes. Hovering over the alien causes the red lines to show up around the alien.  The behavior is accomplished without Javascript.

Reddit Alien in ASP.NET MVC4

Reddit Alien in ASP.NET MVC4

 

 

 

 

 

 

 

 

 

 

 

 

 

I hope you were able to overlook the horrendously ugly images and get a feeling for how easy it is to break down a complex website into small and manageable pieces using ASP.NET MVC4.

 

Tags:

No responses yet

Leave a Reply

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