Building Rapid, Testable Web-Forms–Hello World with ASP.NET MVC
- Building Rapid, Testable Web-Forms–Introducing ASP.NET MVC
- Building Rapid, Testable Web-Forms–Hello World with ASP.NET MVC
- Building Rapid, Testable Web-Forms–Comparing the MVC Framework with ASP.NET WebForms
- Building Rapid, Testable Web-Forms– Conclusion
“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
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:
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.
Leave a Reply