Advertise on Dev102 Advertise on Dev102 Advertise on Dev102 Advertise on Dev102
Write Article for Dev102

Write for Dev102!

We pay for user submitted tutorials and articles that we publish. Anyone can send in a contribution

Learn More

A Simple ASP.NET MVC Sample Application

By Shahar A

June 11, 2008

ASP.Net, Web Dev

11 Comments

This is a simple hello world example with ASP.NET MVC, to help you build your first application step by step. I will not explain the ASP.NET MVC here, you can find plenty of excellent resources on the web for that, you can try one of these: Kigg - Building a Digg Clone with ASP.NET MVC, ASP.NET MVC Framework, An Architectural View of the ASP.NET MVC Framework . We’ll create a web application with two additional views - the first will ask for your name, and when you submit it you’ll get a greeting message in the 2nd view. Lets start:

1. Download and install ASP.NET MVC Preview 3.

2. Create a new ASP.NET MVC Web Application, Call it MVCHelloWorld

MVCNewProj

Click “OK” and the project is created. Lets see what files are created with it: a default Controller - HomeController with two methods, a view for each of the methods, the Site.Master - similar to asp.net master page, Global.asax - this is where you configure routing and a few additional files (browse through to see…).

3. Add Methods in the Home Controller

public ActionResult SayHello()
{
    ViewData["Title"] = "Say Hello";

    return View();
}

public ActionResult Hello(string userName)
{
    ViewData["UserName"] = userName;
    return View();
}

The Hello method will store user name in the ViewData and redirect to the Hello view.

4. Add the SayHello and Hello views (MVC View Content Page) in Views/Home folder:

MVCAddContentPage

Add this code to SayHello.aspx

<asp:Content ID="sayHelloContent" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <h2>
            Say Hello</h2>
        <form id="frmSayHello" action="<%= Url.Action("Hello", "Home")%>"
              onsubmit="return SayHi()">
            <span>Your Name:</span>
            <input id="txtUserName" name="userName" type="text" />
            <input type="submit" value="Go" />
            <span id="errorMsg" style="display:none; color:Red">Invalid Name!</span>
        </form>
    </div>

    <script type="text/javascript">
    function SayHi()
    {
        var txt = document.getElementById('txtUserName');
        var userName = txt.value ;

        if (userName.length == 0)
        {
            document.getElementById('errorMsg').style.display = '';
            txt.focus();
            return false;
        }

        return true;
    }
    </script>

</asp:Content>

Lets define a form for the “Hello” action, and a javascript function to validate input on client side.

In the Hello.aspx file just use the ViewData prepared by the Controller:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Hello <%= Html.Encode(ViewData["UserName"]) %>!</h2>
</asp:Content>

5. Add another menu item in Site.Master:

<li>
    <%= Html.ActionLink("Say Hi", "SayHello", "Home")%>
</li>

6. In Global.asax add a route to the “Hello” method and change the default route to the “SayHello” method

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.Add(
        new Route("Home/Hello",
        new RouteValueDictionary(
            new { controller = "Home", action = "Hello" })
            , new MvcRouteHandler()));

    routes.MapRoute(
        "Default",                                              // Route name
        "{controller}/{action}/{id}",                           // URL with parameters
        new { controller = "Home", action = "SayHello", id = "" }  // Parameter defaults
    );

}

Thats it, you are all done.

Related Articles

  1. Working With ASP.Net MVC Part 5 - Views
  2. jQuery and the ASP.NET MVC Framework
  3. Working With ASP.Net MVC Part 3 - Url Routing
  4. Creating A Tabbed Menu Control For ASP.NET MVC
  5. Working With ASP.Net MVC Part 4 - Controllers, ControllerActions, and ActionResults

Tags :

11 Responses to “A Simple ASP.NET MVC Sample Application”


  1. website design

    Said on June 11, 2008 :

    Simple? Looks pretty complex for a hello world program.
    PHP >

  2. Joel Cochran

    Said on June 12, 2008 :

    Actually, it is simple, although it could be simpler than the above demonstration.

    And the point of this is not to compare to PHP, but rather to ASP.NET. The strength of MVC is the architecture. It is very flexible, well thought out, and easy to use. The IDE sets up most of the work for you when you create the project, and the rest is very straightforward. And of course, let’s not forget that there is no PostBack, reason enough to like it!

    If you are a die hard PHP developer, then MVC might not appeal to you. On the other hand, if you are a C# or VB.NET programmer who wants more freedom and control over a web site written in your native language, then ASP.NET MVC is just what the doctor ordered.

  3. excuse me, jerkoff

    Said on June 13, 2008 :

    “PHP >”

    because php sites are always so clean and maintainable

  4. php

    Said on June 25, 2008 :

    well you haven’t tested Codeigniter if you say that php sites aren’t clean and maintainable

  5. Search Engine Optimization Expert

    Said on January 17, 2009 :

    Thanks for the post, very useful as I sort out the differences of 2, 3.5, MVC (I was an ASP classic developer previously and trying to get caught up to speed!)

  6. Bill gates

    Said on January 22, 2009 :

    Joel Cochran: No postback? what is this then?

  7. Bill gates

    Said on January 22, 2009 :

    of course sites never support html in inputs, its possible people…

    Joel Cochran: No postback? what is this then?

    >form id=”frmSayHello” action=”/Home/Hello”
    onsubmit=”return SayHi()”&lt

  8. Thirster42

    Said on April 22, 2009 :

    Well i was led here saying that this is a good tutorial for beginners. I can follow the steps, but nothing is explained at all and I don’t understand what most of this is. I can sit here and try to/figure this out for myself, but it’d be nice with some explination.

    If I could give this a star rating, it’d be a 2/5

  9. Abe Miessler

    Said on March 2, 2010 :

    Thirster42:
    Take a look at a similar post I did for an MVC Hello World tutorial and let me know what you think. If there’s anything you’d like to know more about go ahead and let me know and I can try to add it in.

  10. Sree

    Said on December 19, 2010 :

    good one..
    Thanks :)

  11. Sumedha

    Said on January 21, 2011 :

    Thax. This is helpful

Post a Comment