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 6 - Putting it all together

These exercises utilize all of the tools that the course has covered so far: models, views, controller, DataRepository, Sql Server database, layout views, and partial views. It is also a template for the first part of the MusicStore project.

Visual Studio Tip: This answer explains how to exclude your web.config file from being published to the server. Sql Server requires different connection strings in Visual Studio and on the server. To avoid inadvertently publishing incorrect connection string to the server (and breaking your server applications) you can exclude web.config from being automatically published with your project. To publish web.config right click on the file and select "Publish web.config."   It is also a good idea to do this with database files.
  1. BirdView/index - This exercise builds upon last week's Bird CRUD exercise by adding a layout page, partial views, and categories. Since the focus of this exercise will be views it will use a new controller, data repository and Views folder. To reduce the amount of code and time the instructions make extensive use of code from previous exercises.
    Steps: colors table
    1. Database - Use the bird database from A05. Add two new tables: tblColors and tblBirdColors. tblColors contains color names and tblBirdColors associates birds and colors. Create a table named tblColors and add the data shown in the image. Data type is varchar() for both fields and ColorID is the primary key.
    2. Create a second table named tblBirdColors. The primary key is a composite key of colorID and BirdID (from BirdDetails table). (How to set a composite primary key). Add at least ten records associating birdID with colorID (a bird with three colors will have three records in tblBirdColors).
    3. DataRepository - Copy BirdRepository and rename it BirdViewRepository. Change the class name and constructor to BirdViewRepository. Remove the Insert, Update, and Delete methods since they will not be needed.
    4. Controller - Copy BirdController and rename it BirdViewController.  Change the class name to BirdViewController.  Change the repository to BirdVeiwRepository. Remove the Create, Edit, and Delete action methods. Modify index view to display four random birds from the database.
    5. View - Create a view named index that displays four random birds (hint: copy code from Bird/Views/ViewRandom.cshtml)
    6. Test. Index should display four random birds, similar to A05/ViewRandom.
    7. Layout: Copy _ViewStart, _Layout, _leftMenu, _header, and _footer from the Views folder of the exercise LayoutPartialView. Modify _ViewStart to point to BirdView.
    8. Add a css link to the layout. Copy bird.css from the sample site and add it to your Content folder (to copy the CSS click "view source" in the browser and click on the bird.css link). Add the following inside the head tag of the _Layout page:
        <link href="~/Content/bird.css" rel="stylesheet" />
    9. Controller - The left menu partial view requires an action handler. Copy the _leftMenu code from LayoutPartialViewController.
    10. Test. You should have a header, footer, and leftMenu. The sample site has a cute bird image in the header. Copy the anchor tag and image tag from the sample and add them to your header (or use a different cute bird image). The next step will be to change the content of the menu.
    11. ColorModel: The next step is to populate a list of color names for the left menu. Create a new model named ColorModel with two properties: ColorID and ColorName. Both are type string. ColorID is primary key [Key] and ColorName is [Required]. (We will not be creating CRUD web forms so the DataAnnotations could be skipped) This model can be defined in the same file as BirdModel or in a separate file.
    12. DataRepository needs a method that retrieves color names.  Rename GetAllBirds to GetColorCategories. Change the model from BirdModel to ColorModel Write a sql statement that gets a list of bird colors. The sql should include a join between tblColors and tblBirdColors on ColorId. This will prevent it from displaying colors that have no birds.
      select distinct c.colorName, c.colorID
      from tblColors c, tblBirdColors bc
      where c.colorID = bc.colorID
      order by ColorName
    13. Controller: Modify the _lefMenu action method to populate colorModel from the database. Create a new view named _leftMenu (replacing the current placeholder file copied from the LayoutPartialView exercise) . Template is List, model is ColorModel, check "create as a partial view."
    14. The default List view uses a table and a foreach loop. The menu needs only an unordered list with ActionLinks. The foreach loop:
          @foreach (var color in Model)
                 <a href="~/BirdView/Browse/@color.ColorId">@color.ColorName</a>
    15. You may copy the formatting from the sample or create your own.
    16. The partial view _leftMenu has its own Action Method in the controller. It can even be called outside of a parent page. If this behavior is not wanted the controller can be decorated with the attribute [ChildActionOnly].
    17. Test!
  2. BirdView/Browse/bl -- This step creates a view that displays birds filtered by color.
    1. DataRepository - Add a new method named GetBirdsByColor(string colorID) that retrieves birds by colorID. The method returns List<BirdModel>.
        string sql = @"select b.BirdID, b.Name, b.ImageName
          from tblBirds b, tblBirdColors c 
          where b.BirdID = c.BirdID 
          and c.colorID = @colorID 
          order by b.Name";
        List<BirdModel> birds = db.Query<BirdModel>(sql, new { colorID }).ToList();
        return birds;                   
    2. Controller: The page that displays birds of a given color has the same two-column layout as index so we can reuse the index view. Create a new action method named "Browse." It gets the list of birds and redirects to "index" view.

      return View("index", br.GetByColorId(id));

    3. Test!
  3. BirdView/Details - This page displays a single item (bird) with all relevant details. Steps:
    1. DataRepository - Add a method GetOneBird(int Id) that returns BirdModel. The method GetOnePerson(int id) is a good template since it returns a single record.
    2. Controller - Add a action method named Details. Add the appropriate code to populate BirdModel.
    3. View - Create a view named Details (template: Details, model class BirdModel).  
    4. Hyperlinks - The bird images in index view should link to details view and pass BirdID as a parameter. Wrap the image tags in the index view with anchor tags: 
       @{string thumbImage = @item.ImageName.Replace(".", "T.");}
        <a href="~/BirdView/Details/@(item.BirdID)">
            <img src="~/content/images/birds/@thumbImage"
                 class="birdThumb" alt="@item.Name" title="@item.Name" />
    5. Test details view by clicking on an image. You should see text describing one bird.
    6. The next step is to display a large image in details. Syntax for the image tag:
      <img src="~/content/images/birds/@Model.ImageName" class='birdImage' alt="@Model.Name" title="@Model.Name" />
    7. Edit the Details view to display bird name and bird description.
    8. Test!
  4. BirdView/Search - This exercise adds the ability for users to search for characters in bird names. 
    1. DataRepository - Add a method Search(string query) that returns BirdModel. Wildcards in Dapper have an unusual syntax as shown below:
        string sql = @"select b.BirdId, b.Name, b.ImageName, b.Description
                        from tblBirds b
                        where b.Name like @query";
        List<BirdModel> birds = db.Query<BirdModel>(sql, new { query = "%" + query + "%"}).ToList();
        return birds;
    2. Controller - Add a action handler named Search(string id) that utilizes the Search method in DataRepository. The Browse action handler is a good template. Fortunately we can use the index again (3rd time!).
    3. Search textbox: Add a search textbox and button to _leftMenu view:
        <form action="~/BirdView/search">
            <input type="text" name="id" class="form-control" style="width:90%;margin:3px auto;" />
            <input type="submit" class="btn btn-primary" />
    4. Test!
  5. Note: This exercise is not required Winter 2020 due to missed classes for snow days. You are welcome to complete it (its pretty easy) but it is not required and no credit will be given.

    BirdView/AjaxSearch - .NET MVC has tools that greatly simplify support for AJAX. If you are unfamiliar with AJAX please read AJAX Introduction. in this exercise you will reuse the search method in the dataRepository and create an AJAX handler in the controller.
    1. Controller: The controller needs an action handler that loads the AjaxSearch page. No data is passed to the view. Create an action handler named AjaxSearch() that returns an empty view.
    2. View: Create a view named AjaxSearch and paste in the source code from the sample. This contains the search box and JavaScript. The code is delineated with the comments "Start Ajax search code" and "End Ajax search code." 
    3. Controller - The JavaScript calls an action handler named AjaxSearchHandler. This handler takes the user input, passes it to Search(string id) in the dataRepository, and generates a JSON response.  Create a second handler named AjaxSearhHandler as shown below. The JsonResult class converts List data to Json format. 
       //handler for AJAX requests. Returns JSON.
       public ActionResult AjaxSearchHandler(string id)
           return Json(birdRepository.Search(id), JsonRequestBehavior.AllowGet);
    4. Add a link pointing to AjaxSearch in _leftMenu.
    5. Test!  If nothing happens when characters are typed into the textbox use Chrome's developer tools to check for 404 errors in the request and/or JavaScript errors.

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