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 4 - Web Forms, Layouts and Partial Views

  1. Snowboard - This is a two part exercise. The first part creates a form with validation. The second part retrieves the form data and displays an order confirmation. Steps:
    1. Model: The first part of this exercise builds upon BigWebForm from A03. The following instructions will focus on differences. Create a new model named SnowboardModel with the following properties:
      Property Type Validation
      Email string required
      ModelID string required
      Experience string required
      DiscountStudent bool
      DiscountSenior bool
      DiscountGoldClub bool
      State string required
    2. Email and Model should use the Display attribute to provide user-friendly display names. Email should be validated using the EmailAddress Attribute validator as described by Ehsan.
    3. ViewModel: The snowboard order form will contain two dropdownlists and a list of radiobuttons. The data for these options will be stored in the ViewModel.
    4. ListStateViewModel: Use the same viewModel, ListStateViewModel, used in BigWebForm exercise. Add an additional property "TaxRate" of type double. Add the tax rates for each state (state sales map.). A tax rate of 6.01% (Idaho) would be entered into the ViewModel as 0.0601.
    5. BoardModelList: Create a new ViewModel named SnowBoardViewModel. Add a class to the view model named "BoardModel" with three properties: ModelName (string), modelId, and Price (double).
    6. Add a static List to the class named BoardModelList with the following data:
      ModelName ModelId Price
      Screamer $200 scr 200
      Terrorizer $300 ter 300
      Cliff Hopper $400 cli 400
      Low IQ $500 low 500
    7. Experience: Add a second class named Experience with two properties: ExperienceLevel (string) and Surcharge (double).
    8. Add a second static List named ExperienceList with the following data:
      ExperienceLevel Surcharge
      Beginner (no surcharge) 0.0
      Intermediate (10% surcharge) 0.1 
      Knuckle-dragger (20% surcharge) 0.2
      Out-of-control (30% surcharge) 0.3
    9. Controller: Create a new controller, similar to BigWebFormController.  
    10. View: Create a view and add the form elements shown in the working sample. Similar to BigWebForm you will need to manually change the BoardModel and State from textboxes to dropdownlists. The radio buttonList can be generated from ExperienceList using the following Razor syntax:
                      @foreach (Experience exp in SnowBoardViewModel.ExperienceList)
                          @Html.RadioButtonFor(m => m.Experience, exp.ExperienceLevel) @exp.ExperienceLevel 
    11. The snowboard company has a business rule that disallows both student and senior discounts. Add a ValidationMessage control  below the three discount checkboxes. Validate the business rule in the controller by adding the following code to your the HttpPost ActionMethod:
      if (SbModel.DiscountSenior && SbModel.DiscountStudent)
          ModelState.AddModelError("Discounts", "Dude, you cannot take both student and senior discounts.");
      //return to view if any fields invalid
      if (!ModelState.IsValid) return View(SbModel);
    12. Test the page and check that the validation is working for all fields.
  2. Snowboard/OrderConfirmation - The second part of this exercise uses the data from the form to create an order confirmation.  Steps:
    1. The order confirmation displays the customer's order and calculates the total cost. Add a second model to SnowBoardModel.cs named CustomerOrderModel with the following properties:
              public string ModelName { get; set; }
              public double ModelPrice { get; set; }
              public double ExperienceSurchargePercent { get; set; }
              public double ExperienceSurchargeDollars { get; set; }
              public string DiscountsTaken { get; set; }
              public double DiscountsPercent { get; set; }
              public double DiscountDollars { get; set; }
              public double Subtotal { get; set; }
              public double TaxPercent { get; set; }
              public double TaxDollars { get; set; }
              public double TotalPrice { get; set; }
    2. Controller: The next step is to calculate the properties for the CustomerOrderModel. In the HttpPost ActionMethod instantiate an CustomerOrderModel object named custOrder.SnowBoardModel
    3. Model name and price: The order form returned ModelID (see image). To get the model name it is necessary to find the model in BoardModelList. This can be done using the Find method of List<> and Lambda syntax.  The syntax is:




      BoardModel boardModel = SnowBoardViewModel.BoardModelList.Find(m => m.ModelId == SbModel.ModelId);
    4. Assign the model name from boardModel to CustOrder with:
      custOrder.ModelName = boardModel.ModelName;
      Do the same for price.
    5. Experience: The ExperienceList needs to be searched to find the surcharge percent.  Use Lambda syntax to search ExperienceList and return an experience object, similar to what you did for boardModel (above).
    6. Calculate ExperienceSurchargeDollars by multiplying Surcharge by Price.
    7. Discounts: The discount radio buttons have no data associated with them so check them individually and calculate the total discount. The discounts are 10% for students, 5% for seniors, and 8% for Gold Club. The C# syntax is similar to this:
                  if (SbModel.DiscountStudent)
                      custOrder.DiscountsTaken += "student, ";
                      custOrder.DiscountsPercent += 0.1;
    8. The list of discounts could end with a comma. Trim the final comma with:

      custOrder.DiscountsTaken = custOrder.DiscountsTaken.TrimEnd(',',' ');

    9. Calculate subtotal.  
    10. Tax: The StateList needs to be searched to find the tax rate. Use Lambda syntax to search StateList and return a state object, similar to what you did for boardModel (above).
    11. Calculate tax and total price. Double check that you have provided values for all of the properties in CustomerOrderModel.
    12. Return a view that calls an action method "OrderConfirmation" and passes custOrder model. Syntax:

      return View("OrderConfirmation", custOrder);

    13. In the Controller create a new action method named "OrderConfirmation" that takes CustomerOrderModel as an input parameter. It has only one statement:

      return View(custOrder);

    14. View: Create a view by right-clicking in the OrderConfirmation action method. Use template Details and model CustomerOrderModel.
    15. Test: Fill in the order form and submit it. You should see all the properties of the CustomerOrderModel and their values.
    16. Improve the appearance of the order confirmation by decorating the properties of CustomerOrderModel with user friendly names, currency formatting, and percentage formatting.The following snippet shows how to format as currency and percent.  Most of the properties will need formatting.
               [Display(Name = "Price")]
              public double ModelPrice { get; set; }
              [Display(Name = "Surcharge %")]
              [DisplayFormat(DataFormatString = "{0:P0}")]  //percentage with no decimals
              public double ExperienceSurchargePercent { get; set; }
    17. Finally, copy the snowboard image tag from the sample and put it in your view. The appearance of the confirmation is pretty basic but it does contain the necessary information.
    18. Done!

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