Homework Four

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.

   

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:

   

   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:

   

   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!