This entry is part 2 of 4 in the series ASP.NET - WebForms versus MVC

ASP.NET - WebForms versus MVC

“Hello World” with ASP.Net MVC

This is a simple hello world example with ASP.NET MVC, to help you build your first application step by step.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

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

mvcnewproj-thumb

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 

   1:  public ActionResult SayHello()
   2:  {
   3:      ViewData["Title"] = "Say Hello";
   4:   
   5:      return View();
   6:  }
   7:   
   8:  public ActionResult Hello(string userName)
   9:  {
  10:      ViewData["UserName"] = userName;
  11:      return View();
  12:  }

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 

   1:  <asp:Content ID="sayHelloContent" ContentPlaceHolderID="MainContent" runat="server">
   2:      <div>
   3:          <h2>
   4:              Say Hello</h2>
   5:          <form id="frmSayHello" action="<%= Url.Action("Hello", "Home")%>"
   6:                onsubmit="return SayHi()">
   7:              <span>Your Name:</span>
   8:              <input id="txtUserName" name="userName" type="text" />
   9:              <input type="submit" value="Go" />
  10:              <span id="errorMsg" style="display:none; color:Red">Invalid Name!</span>
  11:          </form>
  12:      </div>
  13:   
  14:      <script type="text/javascript">
  15:      function SayHi()
  16:      {
  17:          var txt = document.getElementById('txtUserName');
  18:          var userName = txt.value ;
  19:   
  20:          if (userName.length == 0)
  21:          {
  22:              document.getElementById('errorMsg').style.display = '';
  23:              txt.focus();
  24:              return false;
  25:          }
  26:   
  27:          return true;
  28:      }
  29:      </script>
  30:   
  31:  </asp:Content>



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: 

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

5. Add another menu item in Site.Master:

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

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

   1:  public static void RegisterRoutes(RouteCollection routes)
   2:  {
   3:      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
   4:   
   5:      routes.Add(
   6:          new Route("Home/Hello",
   7:          new RouteValueDictionary(
   8:              new { controller = "Home", action = "Hello" })
   9:              , new MvcRouteHandler()));
  10:   
  11:      routes.MapRoute(
  12:          "Default",                                              // Route name
  13:          "{controller}/{action}/{id}",                           // URL with parameters
  14:          new { controller = "Home", action = "SayHello", id = "" }  // Parameter defaults
  15:      );
  16:   
  17:  }
Thats it, you are all done.


Now that we have seen how to say “Hello World”, we can start comparing ASP.Net MVC versus regular webforms.

Anuj holds professional certifications in Google Cloud, AWS as well as certifications in Docker and App Performance Tools such as New Relic. He specializes in Cloud Security, Data Encryption and Container Technologies.

Initial Consultation

Anuj Varma – who has written posts on Anuj Varma, Hands-On Technology Architect, Clean Air Activist.

 Twitter Linkedin

Series NavigationBuilding Rapid, Testable Web-Forms–Introducing ASP.NET MVCBuilding Rapid, Testable Web-Forms–Comparing the MVC Framework with ASP.NET WebForms