Primary Objectives:

  1. Begin learning ASP.NET MVC 5
  2. Be able to write a simple (but multi-page) MVC web application that does not use a database
  3. Be able to use the ViewBag or ViewData
  4. Demonstrate use of the Request object to utilize query strings and form data
  5. Learn simple language constructs for the Razor view engine
  6. Understand the relationships between Model, View and Controller and be able to explain how they work together to service requests
  7. Understand the operation of controller action methods, including simple routing and parameter binding
  8. Understand GET and POST, how they're different, and how to use them in an MVC app

Overall Requirements:

  • Start with an empty MVC project (no templates)
  • Project should be in your Git repository under a HW4 folder
  • Use Git from the command line only, and use feature branches
  • Comment all C# code with XML comments
  • Comment all Razor code within .cshtml files
  • All pages should use Bootstrap

"As a new MVC developer I want to learn how to send data from the browser to the server and from the server to the browser, in different ways, so I can see the options I have when creating dynamic web pages with forms and form data."

Questions/Tasks:

  1. [Setup] Begin by creating a new empty MVC project. Make sure your repo has Visual Studio's .gitignore file so it will correctly ignore all the temporary build files as well as built binary files (just like HW 3).
  2. [Planning] Implement the following features in one or more feature branches. Merge each into master when finished. If things are going well with Git, try to implemement two parts of what is below in two different feature branches. Don't merge them back in until both of them are done. This will let you see a little of what can happen when two or more developers are working on the code at the same time. You'll get some practice with merge conflicts.
  3. [Content/Coding] Create a “Home” default landing page that will contain links to each of the other pages you'll create in the tasks below. You must use Razor @Html.ActionLink HTML helper methods to do this. (Implied in this is that you have an appropriately named controller with action method and a suitable view.)

    Below is a basic example. Feel free to reproduce this one or make it your own, but note that yours should look at least as nice and all the routes should be the same, i.e. hostname/Home or just hostname/. This will be explained in the video at the very bottom.

    Screenshot of what this question should look like
  4. [Content/Coding]Simple Server-Side Dynamic page using HTTP GET Recreate the "Mile to Metric Converter" page and functionality (note the route must be the same, which affects your Controller and View names) shown here:

    Screenshot of Mile to Metric Converter page

    This is as it appears after the user has typed a number in the Miles input, selected Kilometers and clicked the Convert button. The answer appears below. Note the route.

    You must write the form elements yourself using only HTML -- no Razor HTML helpers are allowed for this page. Your controller action method must use GET only and can't have any parameters -- you need to get the form data out of the Request object.

    This page demonstrates that that you can write a simple HTML form, send data to the server as query strings, extract that data within a controller action method by using the Request object, perform some computation with it, and finally pass data to a view which builds a new page for the user containing the resulting new, procedurally created, content.

    Now is a great time to start using the debugging and inspection tools available to you:

    • developer tools in the browser
    • Debug.WriteLine and the debug output window in Visual Studio
    • Visual Studio's very nice debugger (set a break point and then run with F5 rather than Ctrl-F5)
    • Use Postman

    You should be able to inspect the page, form values leaving the browser, form values received by the server (localhost in this case) and anything else going on in ASP.NET.

  5. [Content/Coding]Simple Server-Side Dynamic page using HTTP POST Recreate this Color Mixer page:

    Screenshot of the color mixer page

    Here are some requirements for this page:

    1. You must use Razor's HTML Helpers for all form input elements (2 input elements for the colors plus the form itself)
    2. You must POST the data to your app
    3. Your controller action method must use parameter binding to retrieve the form data. i.e. this parameter binding would work for a form that sent two integers and a string in the body of a HTTP POST:
      [HttpPost]
      public ActionResult MyPage(int? id, int? size, string kind)
      {
          //...
      }
    4. To mix colors you can make up an algorithm or use this one: add the red components together, add the green together, and add the blues together, then if any of the values is greater than 255, set it to 255, i.e. clip it at the maximum value of 255 or FF. That's what my version does. C# has Color and ColorTranslator classes to help with this a bit.
    5. Make your page robust so that if, for example, the user doesn't enter a color, or they type something that isn't a hexadecimal HTML color, no errors are generated and you tell them that it's required. This is generally referred to as form validation. I suggest you do it client side using HTML (not javascript) and also server side with C#. Always validate your input before using!!!
  6. [Requirements] Here's a video walkthrough to help you get all the pieces right. I explain how each page works and explain the requirements further. So the video capture (OBS Studio) would capture the input validation popups I had to record full screen, which made the video huge.
  7. [Turn It In] Finally, merge your feature branches back into master and push to your remote repository.
  8. [Portfolio Content] Lastly, put it all in your Portfolio as usual. We need screenshots or a video to be able to tell if it's working. Now that we're into ASP.NET MVC there is a lot more code in your project. We don't want it all though; for your Portfolio, only include the code you write. Just include it as snippets, with some nice explanations in between!

Now is the time to make sure you understand precisely what is going on here: from client → HTTP → server → ASP.NET MVC → your code → ASP.NET MVC → server → HTTP → and back to the browser, for both GET and POST. Get this down before we dive deeper into MVC and add database functionality.