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. Learn to use C# language features: namespaces, optional parameters, nullable types, attributes

Overall Requirements:

  • Start with an empty MVC project (no templates) and do all work within one project
  • 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. Begin by creating a new empty MVC project. Make sure it has Visual Studio's .gitignore file so it will correctly ignore all the temporary build files as well as built binary files.
  2. Implement each of the following features in its own feature branch. Merge each into master when finished.
  3. Create a “Home” default landing page that will contain links (in an ul) 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 create an appropriately named controller with action method and a suitable view.)
  4. Create a new page (let's call this one Page 1 ) that contains a form with at least two text fields and a submit button. These should GET a new page that contains some server-side dynamic content, i.e. something is displayed that you set from the controller based on the values in the request. You must write the form elements yourself using only HTML -- no Razor HTML form helpers are allowed for this page. Your controller action method 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. A simple temperature conversion would be a good example. The user enters a temperature value into one text field, and a F or C into the other. Pressing a convert button takes the user to another page where their temperature has been converted from F to C or the other way around.

  5. Create another page (Page 2) that also has at least two text fields and a submit button and meets the same requirements as the previous task, but that uses HTML POST to post the form data to the server. In this case your controller action methods should be a parameterless (GET) and a one parameter POST (use FormCollection as the parameter type as shown below). This isn't the best way to do it but this is the way you should do it for now. i.e. we're not using model binding until the next question.

    [HttpPost]
    public ActionResult Page2(FormCollection form)
    {
    	// Values POSTed can be retrieved from the FormCollection object
    }

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

    • developer tools in the browser
    • “println's” and the output window in Visual Studio
    • Visual Studio's very nice debugger (set a break point and then run with F5 rather than Ctrl-F5)
    • 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.

  6. Create a loan calculator page (or something of equivalent complexity if you want to get creative) in Page 3. At a minimum this would need to have a place for the user to enter the loan amount, interest rate and term length (principal, monthly interest rate and number of payments). This form data gets sent to the server where you calculate at least the monthly payment and sum of payments. Generate a new page that shows these results to the user. You get to decide if you want to use Razor HTML Helpers and GET or POST.

    The one thing you must do for this page is to use model binding in controller action methods (parameters that bind to the form element values). Also, make your page robust so that if, for example, the user doesn't enter an interest rate, or they type letters instead of numbers, no errors are generated and you tell them that it's required. Double check with online loan calculators that you got the math correct.

    This is what I mean by model binding with parameters:

    [HttpGet]
    public ActionResult Page3(int? id, int? size, string kind)
    {
    	//...
    }

  7. Lastly, put it all in your Portfolio as usual. We need screenshots 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.