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 03 - Working with Web Forms

Visual Studio Tip: Occasionally you will be provided with code to include in your project. When adding new files to a project it is best to create a file using Visual Studio then paste the code. Visual Studio does not always recognize files added with Windows Explorer.

Images may be added via Windows explorer. To see them in Visual Studio you must click the refresh icon.

  1. BigWebForm  - Web forms allow uses to enter data on a web page. HTML provides a handful of form elements for collecting user data: textboxes, radio buttons, checkboxes, dropdown lists, textareas, hidden form fields and buttons. .NET MVC provides "HTML helpers" that create HTML form elements and then map the user inputs back to the MVC model. HTML helpers write standard HTML form elements but also use the strongly typed data model to validate the data and pass the data to the controller.  In this exercise you will add a dropdown list to the class handout BigWebForm, which already contains a textbox, radiobuttons, a textbox for dates, and two checkboxes.  Steps:
    1. Model: Create a model named BigWebFormModel and add the properties from the class handout MVC Web Forms.  Add a new string property named State.
    2. ViewModel: The drop-down list of state names needs to be populated with data. This data is called "view data" since it is used solely to populate the view. It is good MVC practice to store view data seperate from the model, typically in a folder named "ViewModel." Right-click on your projects root folder "Mis324Assignments" and add a new folder named "ViewModels". 
    3. One of the most straightforward ways to store the form data is in a static List. This StackOverFlow answer by Nagle explains how to use a static List to store view data. A static list is used because it can be called directly from the view without instantiating an object. Nagle's example uses c# collection initializer syntax to define and populate the class in a single statement. Add a new class to the ViewModel folder named BigWebFormViewModel and add the following code:
      namespace Mis324Assignments.ViewModels.BigWebFormViewModel
      {
          public class State
          {
              public string StateName { get; set; }
              public string StateAbbr { get; set; }
          }
      
          public static class BigWebFormViewModel
          { 
              //use object initializer syntax to add elements to List at time of initialization
              public static List<State> StateList = new List<State> {
                  new State () {StateName = "California", StateAbbr = "CA"  },
                  new State () {StateName = "Idaho", StateAbbr = "ID"  },            
                  new State () {StateName = "Oregon", StateAbbr = "OR"  },            
                  new State () {StateName = "Washington", StateAbbr = "WA"  }
              };
          }
      }
      
    4. Model: Create a new Controller named BigWebFormController. Add the code from the MVC Web Forms handout. 
    5. View: Create a view by right clicking in either of the two Action handlers and selecting "Add View..." View name is "Index" template is "Create" and Model class is BigWebFormModel.
    6. Test your project by opening the new view in a browser. You should see a view with four textboxes and two checkboxes corresponding to the properties in your model. Notice that the Html.EditorFor control displays textboxes for string properties and checkboxs for boolean properties.
    7. Using the syntax from the MVC Web Forms handout, changes the gender textbox to radiobuttons, the birthdate textbox to a date textbox, and personId to a hidden form field.
    8. The next step is to change the state textbox to a dropdown list. The view will need to have access to the ViewModel. Add the following Using statement to the view:

      @using Mis324Assignments.ViewModels.BigWebFormViewModel

    9. Replace the Html.EditorFor state helper with the following Html helper.
                      @Html.DropDownListFor(m => m.State,
                      new SelectList(BigWebFormViewModel.StateList, "StateAbbr", "StateName"),
                      "Please enter your state of residence",
                      htmlAttributes: new { @class = "form-control" })
      
    10. The DropDown helper above contains four parameters:
      1. identifies model property being populated (State)
      2. creates a new SelectList based upon the ViewModel. DropDown list controls use the SelectList class to describe the list options.
      3. Optional initial prompt in the dropdown list
      4. optional CSS class applied to the dropdown list
    11. Test to make sure the dropdown list is working.
    12. The date textbox should use type = "date" to activate HTML5 calendar behavior and validation. Replace the EditorFor tag with:

      @Html.TextBoxFor(model => model.BirthDate, new { htmlAttributes = new { @class = "form-control" }, type = "date" })

    13. The next step is to retrieve the form values in the controller and pass them to the view via the ViewBag. This tutorial explains how ot use the ViewBag. The controller is already adding data to "ViewBag.message." Add code to the view to display this viewbag.
    14. The message needs to be modified to include state. The model returns StateAbbr and we want StateName.  The following statement will find the selected state in StateList and return a state object with the properties StateName and StateAbbr. 

      State state = BigWebFormViewModel.StateList.Find(m => m.StateAbbr == bwf.State);

    15. Your output should be similar to the working sample.
    16. Done! 
  2. FontPicker - This exercise uses a textbox to retrieve a message from the user. It then uses C# to parse individual characters from the message and concatenates them into image tags. Please examine the HTML in the sample by right-clicking on page and looking at the source code. You should see a textbox and one image tag for each character in the message.  Steps:
    1. The code for this exercise is in the class handout FontPickerCSharp.doc. Create a new model and controller using the names in the handout and paste in the code.
    2. To create a view right-click in either of the Index action handlers and select "New View."
    3. The controller uses the ViewBag to pass the string of image tags to the View. Add "@ViewBag.imageTags" to the View below the form.
    4. Test.
  3. FontPicker/Fonts - This exercise extends FontPicker by adding a dropdown list of font names and displaying images for the selected font. Steps:
    1. Model: The ID of selected font needs to be stored. Add a new string property to FontPickerModel named FontId.
    2. ViewModel - As in BigWebForm the view data displayed in the dropdownlist should be stored in the ViewModel. In your ViewModel folder add a new subfolder named FontPickerViewModel. Inside this folder add a class named FontPickerViewModel.
    3. The ViewModel for fonts will be very similar the view model in the previous exercise that listed seasons. Create a new static class named FontPickerViewModel. Add a class for Font with two properties: FontName and FontId (both type string).
    4. To the static class FontPickerViewModel add a public static list named "FontList" (see previous exercise for syntax.) This list will contain a list of Fonts. Add the following fonts:
      FontName FontId
      Chunk Red ChunkRed
      Deco Blue DecoBlue
      Animals Animals
      Elegant Red ElegantRed
      Funky Funky
      Tape Punch TapePunch
    5. Controller: The controller from the previous exercise needs two additional ActionMethods to handle the new view "Fonts." Copy and paste the two existing controller named "Index" them and rename the copies "Fonts".
    6. View: Create a new view "Fonts" by right-clicking in one of the "Fonts" action methods and selecting "Add View..." View name is Fonts, template is "Create" and model class is FontPickerModel.  When viewed in a browser the view should contain two textboxes: Message and FontId.
    7. Replace the FontID textbox with a dropdown list. FontPickerController
    8. The model will pass the FontId of the selected font to the controller (see image showing debugger output).  Modify GenerateImageTags() to accept FontId as a second parameter of type string. The second parameter should be optional so that the method still works when a font ID is not specified. See How can you use optional parameters in C#?
    9. Within GenerateImageTags use an If else-if statement to select the appropriate image tags. To improve code readability I recommend creating a new method that contains this long if else if statement. It would look something like this: 
      private string GetTag(string character, string font)
              {
                  string url = "<img src='http://yorktown.cbe.wwu.edu/sandvig/images/alphabet/";
      
                  if (font == "ChunkRed")
                  {
                      return url + "Chunk/red/" + character + "9.jpg' />";
                  }
                  else if (font == "DecoBlue")
                  *** truncated here ***
      
      
        
    10. The images for each font are stored in separate folders. Each font uses a slightly different naming convention. The naming convention for each font is (where x is the character desired) is shown in the table below. Look at the image tags in the sample to see a complete image path.
      Font Directory & File
      Chunk Red chunk/red/x9.jpg
      Deco Blue deco/blue/x1.gif
      Animals animals/x4.gif
      Elegant Red elegant/red/4x.gif
      Funky funky/x3.jpg
      Tape Punch punch/black/x7.gif
    11. Test your code. If any of the fonts do not display right-click on the web page and view source. Make sure that the path in your image tags match those in the sample.


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.