asp.net mvc

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!!!

BDD using SpecFlow on ASP.NET MVC Application

Rajesh Pillai — Sat, 22 May 2010 14:19:35 GMT

I usually love doing TDD and am moving towards understanding BDD (Behaviour Driven Development). My learnings are documented in the form of an article at CodeProject.

The URL is http://www.codeproject.com/KB/architecture/BddWithSpecFlow.aspx

I will keep this updated as and when I learn a couple of more things.

Hope you like it.

Cheers !!!

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!

ASP.NET MVC Asynchronous controller

Rajesh Pillai — Tue, 01 Dec 2009 17:30:55 GMT

This post touches the ASP.NET MVC async controller. Its included in the futures library and is available on codeplex.
This may become part of ASP.NET MVC 2. Download and add reference to the "Microsoft.Web.Mvc" dll. Make the
following changes in the Global.asax to set the rounte to handle async request.

  public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapAsyncRoute("Default.aspx", "{controller}/{action}/{id}",
                new { controller = "Home", action = "Index", id = "" }
            );
        }

In the above route the "Index" action on the "Home" controller is mapped to async route. Note the "MapAsyncRoute" for
sync calls you use MapRoute(..).

Let's quickly have a look at the controller.

namespace AsynPortal.Controllers
{
    public class HomeController : AsyncController
    {
        // The async framework will call this first when it matches the route
        public void Index()
        {
            // Set a default value for our result param
            // (will be passed to the MyActionCompleted method below)            

            // Indicate that we're performing an operation we want to offload

            AsyncManager.OutstandingOperations.Increment(2);

            var client = new WebClient();

            client.DownloadStringCompleted += (s, e) =>
            {
                if (!e.Cancelled && e.Error == null)
                {
                    // We were successful, set the result
                    AsyncManager.Parameters["site1"] = e.Result;
                }
                // Indicate that we've completed the offloaded operation
                AsyncManager.OutstandingOperations.Decrement();
            };

            // Actually start the download
            client.DownloadStringAsync(new Uri("http://geekswithblogs.net/rajeshpillai"));

            var client1 = new WebClient();

            client1.DownloadStringCompleted += (s, e) =>
            {
                if (!e.Cancelled && e.Error == null)
                {
                    // We were successful, set the result
                    AsyncManager.Parameters["site2"] = e.Result;
                }

                // Indicate that we've completed the offloaded operation
                AsyncManager.OutstandingOperations.Decrement();
            };

            // Actually start the download
            client1.DownloadStringAsync(new Uri("http://www.google.com"));
        }

        // This will be called when the outstanding operation(s) have completed

        public ActionResult IndexCompleted(string site1, string site2)
        {
            return View("Index", new PortalViewModel
            {
                Site1 = site1,
                Site2 = site2
            });
        }
    }
}

The above Index() method sets up two asynchronous request. Evern async method has its "actioncompleted" method
also. In the above case it is "IndexCompleted" method.

The line AsyncManager.OutstandingOperations.Increment(2) sets that two operations will be running in async mode. The
IndexCompleted action method is invoked once all the async method is completed execution. The parameters are passed
to the IndexCompleted method by

AsyncManager.Parameters["site2"] = e.Result;

To indicate that the method completed execution call the

AsyncManager.OutstandingOperations.Decrement() method.

The model is declared below.

namespace Demo.Model
{
    public class PortalViewModel
    {
        public string Site1 { get; set; }
        public string Site2 { get; set; }
    }
}

You can use this model to render the "Index" view as desired.

I have used a simple demonstration of fetching website html's asynchronously. In real application problems this could be a call to a service or a database or any IO intensive operation that you need to optimize. IO intensive operations gain more benefits than CPU intensive operation.

Hope you enjoyed this post.

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

Quick and dirty ASP.NET MVC Tag Cloud

Rajesh Pillai — Fri, 27 Nov 2009 15:53:02 GMT

jQuery Receipe : Build a simple pager plugin to use with asp.net mvc

Rajesh Pillai — Fri, 27 Nov 2009 07:11:05 GMT

Welcome back. This time we will look at creating a simple jquery pager plugin to use with asp.net mvc project. Please note the intent is to learn
the basics of jquery plugin development. The control as such is not recommended for use in production environment.

I recommend having a look at the jQuery Authoring Guideline at
docs.jquery.com/Plugins/Authoring

Let's begin our journey into the mystery of jquery plugin. The first step is to create a self executing anonymous function. Anonymous functions play
a very important role in plugin development. Lets dissect it.

Let's have a look at the application in action.

First let's understand the different way in which a function can be declared.



Pattern 1

function hi() { 

    alert('say hi'); 

}


Pattern 2

var hi = function() { 

    alert('say hi'); 

}

The result of the above two function is the same.
hi(); // displays the alert

Steps to invoke anonymous function



    # original

    function hi() { alert('say hi'); }

    

    # step 1 

    # WRAP EVERYTHING IN () SO THAT WE HAVE A CONTEXT TO INVOKE THE FUNCTION

    > (function hi() { alert('say hi'); })

    

    # now call () to invoke this function

    > (function hi() { alert('say hi'); })();

The final code is a bit awkward look for the uninitiated eye. But, that is all anonymous function is all about. With this understanding the
below code now seems to make sense.


(function($) {

}) (jQuery);


In the above function we are passing "$" as the parameter to the anonymous function.  "$" in this case is 
jQuery object that is passed while invoking this function.


A note about self executing anonymous function

Self-invoking functions are anonymous functions declared at run time and then invoke it immediately. Since 
they are anonymous functions they can’t be invoked twice. They are a good candidate for initialization work 
which is exactly what is happening in the jQuery plugin pattern.

Now let's quickly have a look at how we can extend the jQuery object.

    (function($) {
        $.fn.pager = function(url, callback, loadData) {
        }
    }) (jQuery);

jQuery offers a mechanism for adding in methods and functionality to the existing jQuery object.

$.fn.pager  (indicates we are extending the jQuery object witha pager function.

Let's move on.  Our function requires three parameter to function correclty.  The URL of the action method, 
the callback function to invoke and a boolean indicator whether to load data on first call or not.



Since jQuery should support muliple element we should wrap the call to our main function in an each() block.


(function($) {

    $.fn.pager = function(url, callback, loadData) {

        var cb = callback;

        var url = url;

        var element; // = $(this);

        this.each(function() {

            element = $(this);

            buildPager();

        });

        function buildPager() {

            var ht = '<table class="slickpager" style="margin-left:auto;margin-right:auto">';
            ht += '<tr >';
            ht += '<td  id="prev" class="previous previous-off" >«</td>';
            ht += '<td >';
            ht += 'Page <input type="text" style="width:30px" id="pageno" value="1"/> of <span id="totalpage">10</span>';
            ht += '</td>';
            ht += '<td id="next" class="next next-on"><a href="#">»</a></td>   ';
            ht += '</tr>';
            ht += '</table>';
            element.html(ht);

            $("table.slickpager td", element).css("background-color", "#DAEAF6");

            $(element).css("background-color", "#DAEAF6");

            if (loadData) {
                var parameter = "pageNo=1";
                post(url, parameter, callback, "json");
            }
            else {

                attachPageEvents(url, cb);
            }
        }

}) (jQuery);

The buildPager() function creates the necessary HTML to generate the pager widget.  Me being lazy "pageNo"parameter is 
hardcoded. You can make it as a parameter to the function.  This parameter is passed to the URL to fetch paginated records.

The attachPageEvent() function hooks up the events for the "next", "previous" events.

function attachPageEvents(url, callback) {

    $("table.slickpager td a", element).unbind("click");

    $("table.slickpager td a", element).click(function(event) {
        event.preventDefault();
        var qs = getQueryString(this.href)["page"];
        var parameter = "pageno=" + qs;
        post(url, parameter, callback, "json");
    });

    $("table.slickpager input#pageno", element).unbind("blur");

    $("table.slickpager input#pageno", element).blur(function(event) {
        var pageno = $(this).val();
        var parameter = "pageno=" + pageno;
        post(url, parameter, callback, "json");
    });
}

The post method is show below. This function is important as it is here that the callback function that the client passed is invoked on success of the post.



function post(url, parameter, callback, dataType) {

    $.ajax({

        type: "post",

        url: url,

        data: parameter,

        dataType: dataType,

        beforeSend: function(XMLHttpRequest) {

        },

        success: function(data) {

            updatePager(url, data);

            attachPageEvents(url, callback);



            if (typeof callback == 'function') {

                callback.call(this, data);

            }

        },

        error: function(msg) {

            alert("error : " + msg);

        },

        complete: function(XMLHttpRequest, textStatus) {

        }

    });

    }


The following block invokes the callback function.


if (typeof callback == 'function') {
    callback.call(this, data);
}


The updatePager() function updates the status of the pager control.

function updatePager(url, msg) {

    // set the prev text and link.
    $("table.slickpager td#prev", element).removeClass("previous-off").addClass("previous-on");

    var prevText = $("table.slickpager td#prev", element).text();

    var lnkPrev = "<a href='" + url + "?page=" + (msg.PageIndex - 1).toString() + "'>" + prevText + "</a>";

    $("table.slickpager td#prev", element).html(lnkPrev);



    // set the next text and link.

    var nextText = $("table.slickpager tbody tr td#next", element).text();

    var lnkNext = "<a href='" + url + "?page=" + (msg.PageIndex + 1).toString() + "'>" + nextText + "</a>";



    $("table.slickpager td#next", element).removeClass("next-off").addClass("next-on");

    $("table.slickpager td#next", element).html(lnkNext);



    $("table.slickpager input#pageno", element).val(msg.PageIndex);

    $("table.slickpager td span#totalpage", element).text(msg.TotalPages.toString());



    if (!msg.HasPreviousPage) {

        var prevText = $("table.slickpager td#prev", element).text();

        $("table.slickpager td#prev", element).html(prevText);

        $("table.slickpager td#prev").removeClass("previous").addClass("previous-off");

    }

    if (!msg.HasNextPage) {

        var nextText = $("table.slickpager td#next", element).text();

        $("table.slickpager td#next", element).html(nextText);

        $("table.slickpager td#next", element).removeClass("next").addClass("next-off");

    }

}



There are some optimizations which we could do.  I may possibly highlight that in another blog post.
Now comes the most important part.


    return this;


Invoke this statement at the end of all the function.  This will keep the jQuery design
of chainability of objects intact.



To use this pager component in your page

<script type="text/javascript">

    $(function() {

        $("#pager-demo").pager("/home/GetRandomData", callback, true);

    });



    function callback(msg) {

        if (msg == null)

            return false;

        

        if (msg.Items.length > 0) {

            var data = "<table border='0' width='100%'>"

            data += "<thead><tr>";

            data += "<th>Book Name</th>";

            data += "<th>Tag</th>";

            data += "</tr></thead>";

            $(msg.Items).each(function() {

                data += "<tr>";

                data += "<td><a href='#'>" + this.BookName + "</a></td><td>" + this.Tag + "</td>";

            });

            data += "</table>";

            //alert(data);

            $("div#content").html(data);

        }

        else {

            $("div#content").html("<i>There are no books to be displayed.</i>");

        }

    }

</script>

</pre>

Modify the callback method as per your requirement.  The HTML markup is shown below.



<div id="widget">

    <div id="content"></div>

    <div id="pager-demo">

    </div>

</div>

</pre 
For reference the css is given below
.slickpager a{

    border:solid 1px #9aafe5;

    margin-right:2px;

}



.slickpager .previous-off, .slickpager .next-off {

    border:solid 1px #DEDEDE;

    color:#888888;

    display:block;

    float:left;

    font-weight:bold;

    margin-right:2px;

    padding:3px 4px;

}

.slickpager .next a, .slickpager .previous a {

    font-weight:bold;

}

.slickpager .active{

    background:#2e6ab1;

    color:#FFFFFF;

    font-weight:bold;

    display:block;

    float:left;

    padding:4px 6px;

}



.slickpager a:link, .slickpager a:visited {

    color:#0e509e;

    display:block;

    float:left;

    padding:3px 6px;

    text-decoration:none;

}



.slickpager a:hover{

     border:solid 1px #0e509e

}
And here's the entire source code for jquery.slickpager.js
 
(function($) {
    $.fn.pager = function(url, callback, loadData) {
        var cb = callback;
        var url = url;
        var element; // = $(this);

        this.each(function() {
            element = $(this);
            buildPager();
        });

        function buildPager() {
            var ht = '<table class="slickpager" style="margin-left:auto;margin-right:auto">';
            ht += '<tr >';
            ht += '<td  id="prev" class="previous previous-off" >«</td>';
            ht += '<td >';
            ht += 'Page <input type="text" style="width:30px" id="pageno" value="1"/> of <span id="totalpage">10</span>';
            ht += '</td>';
            ht += '<td id="next" class="next next-on"><a href="#">»</a></td>   ';
            ht += '</tr>';
            ht += '</table>';

            element.html(ht);

            $("table.slickpager td", element).css("background-color", "#DAEAF6");

            $(element).css("background-color", "#DAEAF6");

            if (loadData) {
                var parameter = "pageNo=1";
                post(url, parameter, callback, "json");
            }
            else {
                attachPageEvents(url, cb);
            }
        }

        function attachPageEvents(url, callback) {
            $("table.slickpager td a", element).unbind("click");
            $("table.slickpager td a", element).click(function(event) {
                event.preventDefault();
                var qs = getQueryString(this.href)["page"];
                var parameter = "pageno=" + qs;
                post(url, parameter, callback, "json");
            });

            $("table.slickpager input#pageno", element).unbind("blur");

            $("table.slickpager input#pageno", element).blur(function(event) {
                var pageno = $(this).val();
                var parameter = "pageno=" + pageno;
                post(url, parameter, callback, "json");
            });
        }

        function post(url, parameter, callback, dataType) {
            $.ajax({
                type: "post",
                url: url,
                data: parameter,
                dataType: dataType,
                beforeSend: function(XMLHttpRequest) {
                    //$(element).html('<img id="loader-img" src="/Images/ajax-loader.gif" />');
                },
                success: function(data) {
                    updatePager(url, data);
                    attachPageEvents(url, callback);

                    if (typeof callback == 'function') {
                        callback.call(this, data);
                    }
                },
                error: function(msg) {
                    alert("error : " + msg);
                },
                complete: function(XMLHttpRequest, textStatus) {
                }
            });
        }

        function getQueryString(href) {
            var assoc = new Array();

            if (href != '') {
                var queryString = unescape(href.substring(1));
                queryString = unescape(href.substring(href.lastIndexOf("?") + 1));
            }
            else {
                var queryString = unescape(location.search.substring(1));
            }

            var keyValues = queryString.split('&');
            for (var i in keyValues) {
                var key = keyValues[i].split('=');
                assoc[key[0]] = key[1];
            }
            return assoc;
        }

        function updatePager(url, msg) {
            // set the prev text and link.

            $("table.slickpager td#prev", element).removeClass("previous-off").addClass("previous-on");

            var prevText = $("table.slickpager td#prev", element).text();

            var lnkPrev = "<a href='" + url + "?page=" + (msg.PageIndex - 1).toString() + "'>" + prevText + "</a>";
            $("table.slickpager td#prev", element).html(lnkPrev);


            // set the next text and link.
            var nextText = $("table.slickpager tbody tr td#next", element).text();
            var lnkNext = "<a href='" + url + "?page=" + (msg.PageIndex + 1).toString() + "'>" + nextText + "</a>";


            $("table.slickpager td#next", element).removeClass("next-off").addClass("next-on");
            $("table.slickpager td#next", element).html(lnkNext);

            $("table.slickpager input#pageno", element).val(msg.PageIndex);
            $("table.slickpager td span#totalpage", element).text(msg.TotalPages.toString());

            if (!msg.HasPreviousPage) {
                var prevText = $("table.slickpager td#prev", element).text();
                $("table.slickpager td#prev", element).html(prevText);
                $("table.slickpager td#prev").removeClass("previous").addClass("previous-off");
            }
            if (!msg.HasNextPage) {
                var nextText = $("table.slickpager td#next", element).text();
                $("table.slickpager td#next", element).html(nextText);
                $("table.slickpager td#next", element).removeClass("next").addClass("next-off");
            }
        }
        return this;
    }
})(jQuery);

Hope you enjoyed this blog post.  I'll soon post the source link to this blog.

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

In-Place-Edit with jQuery

Rajesh Pillai — Thu, 26 Nov 2009 07:24:42 GMT

Let's try a simple in-place edit with jquery. For demonstration purpose I am using the plain old HTML file. However,
if you, wish you could apply the same technique to asp.net, asp.net mvc or php or any other web application as well.

Here is the html that we will be using for the demo.

<body>
    <div style="line-height:3xm;background-color:skyblue">
        Double Click the below paragraph to edit.
    </div>
    </br></br>
    <div class="edit">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
        Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis
        sagittis ipsum. Praesent mauris.
        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.
    </div>
</body>

The element that needs to be made editable is given a class of "edit".

The following is the minimal CSS we will be using for this demo.

</style>

Let's add a reference to the jquery library

If you have a local copy then refer it as follows

<script src="scripts/jquery-1.3.2.min.js"></script>

The above assumes you have a copy of the jquery library in the scripts folder on your root directory.

Otherwise you can always grab the latest copy from google..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Now let's setup the event handler to make the div editable.

The $() function is jquery's way of telling the browser to execte the function when the DOM is ready.

Here' is the setEditable function.

function trim(stringToTrim) {
return stringToTrim.replace(/^\s+|\s+$/g, "");
}

The above function essentially does three things.

Hook up the click event handler on the element with class ".edit".
Inside the function the following are the sequence that happens
1. Build the html for inserting a <textarea> for editing.
2. Build the html for inserting a "save" and "cancel" button.
3. Save the current value of the element.
4. Removes the current div (with class .edit) and inserts the above html.
5. Hooks up the events for "save" and "cancel" button.

Note: the jquery function after() inserts content after each of the matched elements.

The below function is called when you click "save" or "cancel" button

That's it. You can actually make an ajax request and send this data to the server for persistence. We will see
that in an another post.