Syllabus Schedule Project Labs Canvas Server Access CSS Tutorial Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9

Assignment 2 - Getting Started with MVC

  1. Student -- This exercise continues with the .NET MVC Tutorial by In assignment 1 you completed the first four steps, through "Create First MVC App." Continue from that tutorial to "Integrate Model, View, and Controller" using Visual Studio 2017 to construct the example. At the end of the tutorial you should have a listing of students as shown in the working sample. Add your new code to the project that you created in A01 named Mis324Assignments.  output

    To keep things simple the tutorial includes sample data inside the controller. Normally data would come from a database, which we will use later.

    1. You may skip the following parts of the tutorial:
      1. Create First ASP.NET MVC Application (you did this in A01).
      2. Action Selectors (not needed yet)
    2. In the "Controller" step you will need to change your controller back to its original code before you can create a view. (the original code returns an ActionResult rather than a string).
    3. The Controller needs to import the datamodel. Add the following around line 6:

      using Mis324Assignments.Models;

    4. To view your code in the browser compile your project with Ctrl-Shift-b then right click on the appropriate View subfolder and select "View in Browser."
    5. The Edit, Details, Delete, and Create New links do not work so remove them from the View.
    6. Please thank for its free MVC tutorial by clicking on a couple of the advertisements which support the site.

  2. PersonForm - In this exercise you will create a simple model and generate a web form based upon your model. This exercise illustrates how VS generates forms from your model and how to access form data in the controller.  Steps:
    1. Create a model: In VS right-click on the Models folder, select "Add" and "Class..." Name your class PersonFormModel.
    2. Add three properties to your model: Fname, Age, and IsSeahawkFan (types are string, int, and bool). The syntax will look similar to this.
    3. Create a controller: Right-click on the Controllers folder and select "Add," "Add Controller," "MVC 5 Controller - Empty." Name it PersonController. No changes are needed to the default controller.
    4. Create a view: Similar to the previous exercise, right-click inside the Index() action method of your controller and select "Add View..." Add View Enter view name "Index", template "Edit" and model class in PersonModel as shown in image. (Note: we could also use the "Create" template which is similar to "Edit"). VS will examine your model and generate a web form with textboxes, labels, validation, submit button, and formatting.
    5. View in Browser: Compile your project with Ctrl-Shift-b then right-click on the view and select "View in Browser."
    6. Add some data to the form fields and click Save. You will notice that the data does not persist in the textbox. This is because we do not have an action handler in the controller for the posted data.  The handler will need to access the PersonFormModel so add the following to the controller:

      using Mis324Assignments.Models;

    7. Add a second Index handler to your controller as shown below. This handler will handle Http Post requests which are fired when the form button is clicked. The first index handler handles Http Get requests which occur when the form initially loads. The Post handler receives the PersonModel as an input and sends it to the view.

      Person Controller
    8. Test: Compile your project and refresh the browser page. The data should now persist.
    9. In an actual application we would need to access the form data and write it to a database or do some other useful work. We will it from the controller and pass it to the view using the ViewBag. Add the following code to the index method of your controller. It gets Fname from the model and adds it to the ViewBag. The ViewBag feature is used specifically to pass data from the controller to the view.

      ViewBag.Fname = personFormModel.Fname;

    10. Retrieve the viewbag in your view by adding the following Razor code just above the BeginForm helper:

      <h3>Fname from controller: @ViewBag.Fname </h3>

    11. Validation: .NET MVC provides very convenient input validation.  Add Required field validation to Fname and Age. Use a custom error message as explained in this tutorial.  Remember to add the DataAnnotations namespace to your model.
    12. One last step, change the text on the submit button from "Save" to something more appropriate.
  3. Calculator - This exercise is similar to the Person exercise. You will create a model, a controller, and a view. The steps are the same as those above with the following exceptions.
    1. Model: name your model CalculatorModel. Add two properties of type decimal named: ValueA, and ValueB.  Add required attributes to both.
    2. Controller: Name your controller CalculatorController.
    3. View: Create a view named Index, using Model CalculatorModel, and "Reference Script Libraries" checked.
    4. Replace the single button with four buttons as in the sample. Copy the html from the working sample (right-click on the sample page and select "View Source" to see the html).
    5. Notice that all four buttons have the name "myButton" and different values.
    6. Check progress: comple your project and view in browser to make sure your form loads successfully. You should see two textboxes and four buttons.
    7. Controller: Add a HttpPost handler to the controller similar to the previous exercise. Notice the extra input parameter "myButton." All form elements may be retrieved in this manner. The variable myButton will have value of the button that the user clicked, "Add", "Subtract", etc.

      Calculator Handler
    8. Tip: You can view the value of variables in the controller with Response.Write. Add the following to your controller:

      Response.Write("myButton:" + myButton + "<br>");

    9. Add a "switch" statement to the new handler as shown in this post MVC which submit button has been pressed. The first answer by WDuffy shows the code.
    10. Perform the math operations by getting the values from the model and assigning the result to the ViewBag like this:

      ViewBag.result = calculator.ValueA + calculator.ValueB;

    11. View: Display the result using the ViewBag:
      <h3>Result:@ViewBag.result </h3>
    12. Test!


Submission instructions: Submit assignments via the Canvas course management system. Submit the full URL for each exercise in the assignment, listing the URLs in the same order that they are listed in the assignment. To minimize typos in URLs it is strongly recommended that you copy the URLs from the address bar of the browser rather than trying to type them. Incorrect URLs will not be graded and no credit will be given.

When pages are connected via navigation (as in your music store project) it is only necessary to submit the URL of the first page.

Regular Expressions HTML Color Names Color Picker ASCII Character Codes Unicode Character Codes