Application Development

30 Steps to Master ASP.NET MVC Application development

Rajesh Pillai — Thu, 10 Jun 2010 11:19:11 GMT

Welcome Readers!,

I am starting out a new series on ASP.NET MVC skill building which will be posted over the next couple of weeks. Let me know your thoughts on the content, which I have planned and a couple of them has been taken from ASP.NET MVC2 Cookbook. (NOTE: Only the heading has been taken, the content will be not :)). Do let me know what you would like to see, or any additional inputs or ideas to cover in this topics. The 30 steps are oultined below for quick reference. Will start filling this out quickly.

Outlined is the ‘30’ step to master ASP.NET MVC.

A Peek Into Model
1. What is a model?
2. Different types of model
3. Presentation/ViewModel
4. Model Mapping (AutoMapper)

A Peak into View
1. How view works in ASP.NET MVC?
2. View Engine Design
3. Custom View Engine
4. View Best Practices
5. Templated Helpers
6. Partial Views

A Peak into Controller
1. Introduction
2. Controller Design
3. Controller Best Practices
4. Asynchronous Controller
5. Custom Action Result
6. Action Filters
7. Controller Factory to use with IOC

Routes
1. Explanation
2. Routes from the database
3. Routes from XML
4. More complex routing

Master Pages
1. Basics
2. Setting Master Page Dynamically

Working with data in the view
1. Repeating Views
2. Array of check boxes
3. Array of radio buttons
4. Paged data
5. CRUD
6. Client side action
7. Confirmation Dialog (modal window)
8. jqGrid

Working with Forms

Validation
1. Model Validation with DataAnnotations
2. Using the xVal validation framework
3. Client side validation with jQuery Validation
4. Fluent Validation
5. Model Binders

Templating
1. Create strongly typed helper using T4
2. Custom View Templates with T4
3. Create custom MVC project template using T4

IOC
1. AutoFac
2. Ninject
3. Unity Application

Areas

jQuery, Ajax and jQuery Plugins

State Maintenance
1. Application State
2. User state
3. Cookies
4. Webfarm

Error Handling
1. View error handling
2. Controller error handling
3. ELMAH (Error Logging Modules and Handlers)

Authentication and Authorization
1. User Registration form
2. SignOn Process
3. Password Reminder
4. Membership and Roles
5. Windows authentication
6. Restricting access to all pages
7. Restricting access to selected pages
8. Restricting access to pages by role
9. Restricting access to a controller
10. Restricting access to selected area

Profiles and Themes
1. Using Profiles
2. Inheriting a Profile
3. Migrating an anonymous profile
4. Creating custom themes
5. Using themes
6. User personalized themes

Configuration
1. Adding custom application settings in web.config
2. Displaying custom error messages
3. Accessing other web.config configuration elements
4. Adding custom configuration elements to web.config
5. Encrypting web.config sections

Tracing, Debugging and Logging

Caching
1. Caching a whole page
2. Caching pages based on route details
3. Caching pages based on browser type and version
4. Caching pages based custom strings
5. Caching partial pages
6. Caching application data
7. Object Caching
8. Using Microsoft Velocity
9. Using MemCache
10. Using AppFabric cache

Localization

HTTP Handlers and Modules

Security
1. XSS/CSRF
2. AnitForgery
3. Encoding

HtmlHelpers
1. Strongly typed helpers
2. Writing custom helpers

Repository Pattern (Data access)

WF/WCF

Unit Testing

Mocking Framework

Integration Testing

Load / Performance Testing

Deployment

Once again let me know your thoughts on this.

Till then, Enjoy MVC'ing!!!

ASP.NET MVC Application In Action - I (DailyJournal)

Rajesh Pillai — Fri, 21 May 2010 02:27:44 GMT

Its been long due I was planning to write an article on creating some useful ASP.NET MVC application. I have code named it "DailyJournal". Its a simple application which allows creation of multiple activities and assign tasks to these activities. Its' kind of "Yet another Task/Todo application".

The credentials which you can use with the attached demo application is shown below.

Collapse Copy Code

User Name : admin 
Password   : admin123

Framework/Libraries Used

ASP.NET MVC
jQuery + jQuery UI (for ajax and UI)
ELMAH for Error logging

Warning Ahead

This is just a rough draft and so I am putting down some of the known limitation.
Some points of warning before we move further with this application. This is just an early prototype. As such many of the design principles have been ignored. But, I try to cover that up in the next update once I get my head around this.

The application in its current state supports the following features

Create users
Assign Activities to users
Assign tasks to activities
Assign a status to a task

The user creation/authentication is being done by the default Membership provider. Most of the activities are highly visual i.e. you can drag-drop task to different areas, in-place edition of task details and so on.

The following are the current issues with the design which I promise to refactor in the second version.

No Validations
Fat Controller
XSS/CSS vulnerable
No Service model/abstraction yet. For the demo LINQ to SQL is implemented.
No separation of layers
UI Design
et el...

This is just an extract. For source code and more information proceed to

http://www.codeproject.com/KB/aspnet/mvcinaction.aspx

Hope you like this!

Lets build a simple blog engine - Prototype for Public Site [eboard] - 3

Rajesh Pillai — Fri, 27 Nov 2009 18:55:24 GMT

Prototype

This time we will have a basic prototype ready for the public website. The design will be kept simple so that we
could concentrate on the main task at hand. Later on we will enable theming,so that the user could customize the
blog to their heart's content.

The landing page looks like in the figure below.

Create a "Blog" folder under the "Views" folder in the website. Add an aspx and copy the below markup and name it "List.aspx".

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Eboard.Model.Blog>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    List
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>You have <%= Model.Count() %> blogs created.</h2>
    <table>
        <tr>
            <th></th>
            <th>Title</th>
            <th>Created On</th>
        </tr>

    <% foreach (var item in Model) { %>
        <tr>
            <td>
                <%= Html.ActionLink("Edit", "Edit", new {  id=item.Id  }) %> |
                <%= Html.ActionLink("Show", "Show", new {  id=item.Id  })%>
            </td>
            <td>
                <%= Html.Encode(item.Title) %>
            </td>
            <td>
                <%= Html.Encode(String.Format("{0:g}", item.CreatedOn)) %>
            </td>
        </tr>
    <% } %>
    </table>
    <p>
        <%= Html.ActionLink("Create New", "Create") %>
    </p>
</asp:Content>

Create a "BlogController.cs" in the "Controller" folder and copy the following code.

public ActionResult List()
{
ViewData["Message"] = "Welcome to Ebaord. The minimalistic blogging engine!";
return View(); // by default this returns a view with the name "List"
}

The above is just the boiler plate code just for reference. The actual method will be implemented once we build our
repository and service layer.

When the user click on the "Show" link the user will be taken to the home page of that blog.

The final product may vary a bit as we go along. See you soon. Happy prototyping....

Lets build a simple blog engine [eboard] - 2

Rajesh Pillai — Thu, 26 Nov 2009 20:17:50 GMT

Welcome to the 2nd series of building a blog engine. In the first part we have laid out the foundation for this application and modeled the DB structure for quick mockup.

You can read the first part here lets-build-a-simple-blog-engine-eboard---1.aspx

One thing I missed to mentioned in the first part is the we will be using the excellent ELMAH for error logging. This is a pretty cool module which hooks up to the system
and logs all exceptions without writing a single line of code.

You can read more about ELMAH at code.google.com/p/elmah/

What we will be doing is creating the public facing website first rather than creating the administration screens. We will decide upon the themes to use and mockup a
quick prototype for the public view.

The following the is the project structure I came up with. This is just skeleton and the meat will be added incrementally over next couple of weeks.

Project Structure

I have divided the project according to the responsibility of each component. As you can see we will be using the LinqToSql along with the Repository pattern for
data access. This will provide us with the flexibility to switch data provider at will and also provides the principle of OCP (Open for Extension and Closed for Modification).

I prefer to keep the model in a separate project rather than keeping it along with the web project. For this project the controllers wil be lying in the default "Controllers" folder.

We will also change the layout of the "Content" folder. The content folder is where all your css are kept. We will take a different approach possibly to enable easy theming
of our blogs.

Watch for the next post, where we will be mocking up the public site for the blog.

Lets build a simple blog engine [eboard] - 1

Rajesh Pillai — Thu, 26 Nov 2009 18:47:59 GMT

Welcome to eBoard

Hello and welcome to this series of application development using asp.net mvc, jquery, automapper, ninject. Though the world doesn't need another blog engine, but sometimes reinventing the
wheel teaches you many unknown things and it's the learning experinece that counts more than anything else.

I have been using asp.net mvc + jquery for about a year now. So, it's time to put down something which will help the beginner with this technologies get a good graps of the fundamentals skill required
to do web development.

The side effect of this is we will also learn about some design principles, best practices and troubleshooting will add icing to the cake.

Without further ado, lets begin. Let's first lay down the basic business requirement for the blog engine. This may be simple in form, but will help us keep an eye on the actual requirement and prevent
us from deviating from the main goal.

The blog engine will be named as "eboard".

Requirements

Multi blog support : The user should be able to create multiple blogs.
Make posts
Assign a category to the post
Assing one or more tags to the post
Allow readers to post comment
Comment Moderation
Simple Blog Settings like theme selection.

Apart from creating a working blog engine the following are educational/learning benefit the reader may derive from this experience

Learn asp.net mvc and jquery
Learn to design/extend a validation framework
Learn about Repository pattern
Learn dependency injection using Ninject.
Service design
Design for testability (though we won't be writing test at this point in time).

With the above requirements in mind lets move ahead a take a shot at creating the database for our blog. Some of the reader may frown at this idea. Designing the database first or the model first is akin to
the chicken and the hen problem. But for this small application I think the database design will closely mimic the model as well. Please free to shout at me if you feel anything is terribly wrong here.

The initial DB model looks like the figure shown below.

DB Model

We are using the membership provider for users and roles. The above DB model gives us a good start in designing our blog. It has all the essential elements to support the business
requirement that we have laid out for "eboard".

The below table highlights the essential details about the above model.

BlogSettings	This stores the essential settings related to blog. Curently it has only the name of the theme and comment moderation flag. This can be extended as required.
Blog	This allows us to have multiple blog created.
Post	The posts that goes with the blog.
Comment	The comments that goes with the post.
Category	A post can belong to only one category.
Tags	A post can hve multiple tag. Tags are useful for search.

That's it for this episode. In the next episode we will layout the folder structure for the "eboard" application. Till then happy learning and enjoy blogging.

CodeProject