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 is based upon an excellent .NET MVC Tutorial by Start the tutorial at the beginning and go to "Integrate Model, View, and Controller" while using Visual Studio 2013 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. Person - 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 PersonModel.
    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: This is the fun part! VS will examine your model and generate a web form with textboxes, validation, a button, and formatting. 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").
    5. Visual studio will create a web form containing edit features for all the elements in your model. It controls the layout with the mobile friendly Twitter Bootstrap CSS framework.
    6. View in Browser: Compile your project with Ctrl-Shift-b then right-click on the view and select "View in Browser."
    7. Add some data to the form fields and click Save. You will notice that the data does not persist in the textbox. We can fix this modifying the controller to connect the view to the model. In the controller add a using statement to import your models:

      using Mis324Assignments.Models;

    8. 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
    9. Test: Compile your project and refresh the browser page. The data should now persist.
    10. In an actual application we would need to access the form data and write it to a database or do some other useful work. The form data can be accessed from both the controller and the view.  We will first access 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 = model.Fname;

    11. Retrieve the viewbag in your view by adding the following just above the BeginForm helper:

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

    12. Data may also be retrieved from the model inside the view. Add the following code in your view just below the previous code.  "Model.Fname" is wrapped by an IF statement because the model will be empty (null) when the form loads initially and this statement would throw an exception.

      model not null
    13. 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.
    14. 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 three properties of type decimal named: ValueA, ValueB, and Result.
    2. Controller: name your controller CalculatorController.
    3. View: create a view as you did previously, using your CalculatorModel.
    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 three textboxes and four buttons.
    7. The Result textbox needs to be replaced with a label. In the form group for "Result" replace the HTML helpers "EditorFor" and "ValidationMessageFor" with:

      @Html.DisplayFor(model => model.Result)

    8. Add logic to the controller: As in the previous exercise we will add a handler for the HttpPost as shown below. 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 use clicked, "Add", "Subtract", etc.

      Calculator Handler
    9. 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>");

    10. 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.
    11. Perform the math operations by getting the values from the model and assigning the result to the model like this:

      calculator.Result = calculator.ValueA + calculator.ValueB;

    12. Test!
  4. Die - This exercise illustrates how to display dynamic images and adds a method to a class. It generates a random number between 1 and 6 and displays the appropriate die. Steps:
    1. Model: Create the following model to hold the current value of the die and a method that rolls the die:

      die model

    2. Controller: Create a controller and add the following code to instantiate a DieModel object and set the CurrentValue:

      die controller

    3. View: Create a view using the Details template. Run the view. You should see a random number between 1 and 6. It should change when you refresh the page.
    4. The six die images, one for each value, are located at where X is the number you wish to display. Create an image tag (look at the sample if you are not sure about the syntax) and replace the "x" in the image tag with the following razor code:


    5. Remove the edit link since it is not used.


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