Learning: Part 2 - ASP.NET MVC 2.0 with Visual Studio 2010 Beta 2

Please make sure you’ve seen my previous blog post because this one continues on the project built.

https://blogs.msdn.com/brunoterkaly/archive/2010/01/23/getting-started-with-the-asp-net-mvc-framework-installation-and-hello-world.aspx

In this post, we’ll explore a couple of more options to learn more about MVC. There are some great starting points right here.

https://www.asp.net/mvc/learn/

I will go through some of these, briefly. I will adapt the “HelloWorld” from my previous blog entry, which shows you how to setup and get started with your first application.

image

Creating Custom Routes

The goal of creating custom routes is to make interaction with your web site more intuitive and natural. It should also map well for search engines.

Scott Guthrie said it best at https://weblogs.asp.net/scottgu/archive/2007/12/03/asp-net-mvc-framework-part-2-url-routing.aspx

  • Having the ability to use URL mapping rules to handle both incoming and outgoing URL scenarios adds a lot of flexibility to application code. 
  • It means that if we want to later change the URL structure of our application (for example: rename /Products to /Catalog), we could do so by modifying one set of mapping rules at the application level - and not require changing any code within our Controllers or View templates.

Imagine that you sell car parts:

 

Our goal is to support the following:

https://www.mygoofycarparts.com/Brakes/Disc

So here are the 4 steps we will take

image

How we would setup our own view and controller (basic starter kit)

Step 1 - Edit global.asax and edit route table

The whole point here is to get us to the right controller / action method / custom view combination that we dream up based on url.

We want to support the url https://blah_blah.com/Brakes/Disc. That means we need to add our own controllers, action methods, and views.

image

Notice lines 27-31 where we added an additional routing table. You can start to see support for the https://blah_blah.com/Brakes/Disc url.

https://weblogs.asp.net/scottgu/archive/2007/03/08/new-c-orcas-language-features-automatic-properties-object-initializers-and-collection-initializers.aspx is a link to Scott Guthries blogy about the syntax used on on line 30 below. It is called object initializers.

Code Snippet

  1. //=========================================================
  2. // This is global.asax
  3. //=========================================================
  4. using System;
  5. using System.Collections.Generic;
  6. using System.Linq;
  7. using System.Web;
  8. using System.Web.Mvc;
  9. using System.Web.Routing;
  10.  
  11. namespace HelloWorld
  12. {
  13.     // Note: For instructions on enabling IIS6 or IIS7 classic mode,
  14.     // visit https://go.microsoft.com/?LinkId=9394801
  15.  
  16.     public class MvcApplication : System.Web.HttpApplication
  17.     {
  18.         public static void RegisterRoutes(RouteCollection routes)
  19.         {
  20.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  21.             // Pass the "route name", the "url with parameters", the "defaults"
  22.             // This will mean that I need a controller called BrakesController
  23.             // I will also need an action method to support whatever url pattern I support
  24.             // For example: https://brunocarparts.com/brakes/disc
  25.             // I need a method called "disc"
  26.         
  27.             routes.MapRoute(
  28.                "CarParts",                                          
  29.                "Brakes/{brakeType}",                           
  30.                new { controller = "Brakes", action = "Disc" }  
  31.            );
  32.  
  33.  
  34.             routes.MapRoute(
  35.                 "Default",                                              // Route name
  36.                 "{controller}/{action}/{id}",                           // URL with parameters
  37.                 new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
  38.             );
  39.  
  40.         }
  41.  
  42.         protected void Application_Start()
  43.         {
  44.             RegisterRoutes(RouteTable.Routes);
  45.         }
  46.     }
  47. }

Step 2 - Add controller and action method

One of the first steps you need to do to get your url supported with the MVC plumbing is to add a custom controller.

It is easy to do because it is built into Visual Studio 2010 Beta 2. Once we add the controller (BrakesController) we will also need to add an action method called "Disc()".

image

 

Make sure your selections as follows:

  • Controller Name = BrakesController
  • Add action methods for Create, Update, Details = True = Yes = CheckMark

image

 

Notice that lines 19-22 support the Disc part of https://blah_blah.com/Brakes/Disc

Methods Provided by MVC Framework Our Custom Method(s)
Index() Disc()
Details()  
Create()  
Edit()  

We will cover Details(), Create(), Edit() in a future post.

Code Snippet

  1. using System;

  2. using System.Collections.Generic;

  3. using System.Linq;

  4. using System.Web;

  5. using System.Web.Mvc;

  6. using System.Web.Mvc.Ajax;

  7.  

  8. namespace HelloWorld.Controllers

  9. {

  10.     public class BrakesController : Controller

  11.     {

  12.         //

  13.         // GET: /Brakes/

  14.  

  15.         public ActionResult Index()

  16.         {

  17.             return View();

  18.         }

  19.         public ActionResult Disc()

  20.         {

  21.             return View();

  22.         }

  23.  

  24.         //

  25.         // GET: /Brakes/Details/5

  26.  

  27.         public ActionResult Details(int id)

  28.         {

  29.             return View();

  30.         }

  31.  

  32.         //

  33.         // GET: /Brakes/Create

  34.  

  35.         public ActionResult Create()

  36.         {

  37.             return View();

  38.         }

  39.  

  40.         //

  41.         // POST: /Brakes/Create

  42.  

  43.         [AcceptVerbs(HttpVerbs.Post)]

  44.         public ActionResult Create(FormCollection collection)

  45.         {

  46.             try

  47.             {

  48.                 // TODO: Add insert logic here

  49.  

  50.                 return RedirectToAction("Index");

  51.             }

  52.             catch

  53.             {

  54.                 return View();

  55.             }

  56.         }

  57.  

  58.         //

  59.         // GET: /Brakes/Edit/5

  60.         public ActionResult Edit(int id)

  61.         {

  62.             return View();

  63.         }

  64.  

  65.         //

  66.         // POST: /Brakes/Edit/5

  67.  

  68.         [AcceptVerbs(HttpVerbs.Post)]

  69.         public ActionResult Edit(int id, FormCollection collection)

  70.         {

  71.             try

  72.             {

  73.                 // TODO: Add update logic here

  74.                 return RedirectToAction("Index");

  75.             }

  76.             catch

  77.             {

  78.                 return View();

  79.             }

  80.         }

  81.     }

  82. }

Step 3 - Add view (in folder structure)

After we have added the controller and the action method, we need to next add our own custom view. Later we will play with the model and add database support.

Call the new folder Brakes. Make sure you create the folder underneath the Views folder.

Afterall, https://blah_blah.com/Brakes/Disc should take you to a database query that shows "Disc Brakes."

We can worry about CRUD later (Create, Read, Update, Delete).

image

 

Now add the view. Later we will enhance this view to cooperate with the model object to display data. In particular, to display disc brakes.

image

Call the view “Disc” to support https://blah_blah.com/Brakes/Disc.

 

image

Modify the code a little bit to validate the the view we create is the view we see.

image

This is the default view of Disc.aspx

image

Add your own code in the designer as follows for Disc.aspx (our view to support https://blah_blah.com/Brakes/Disc.

image  

Step 4 - Run and validate

Finally, we want to run the application with https://blah_blah.com/Brakes/Disc and see our view popup with our own custom message to show the whole thing is working together correctly.

Run the final program. But we will need to edit the url.

image

This is the wrong url:

We’ve been talking about:

image

Notice the url we want: https://localhost:19078/Brakes/Disc

image

This represents the final step for this post. Hope you enjoyed it.

Here is the code:

https://brunoblogfiles.com/zips/HelloWorldMvc.zip