Syllabus Schedule Project Canvas Assignment 1 Assignment 2 Assignment 3 Assignment 4

A04 - This assignment includes a screen scraping exercise and two major parts of the Lab Inspection Project (LIP).

  1. ScreenScrape/wwuNews - This exercise scrapes WWU's news headlines.
    1. Add the code from the handout ScreenScrape.doc to your project. It should produce this output.
    2. Controller: Add a second action method named WwuNews. Copy and paste the code from the index action method and remove the code that deals with the form since you will be hard-coding the targetURL and regExPattern into the script. Add the WWU news page as targetUrl.
    3. View: copy the index view and remove the form.
    4. RegEx pattern. Examine the html in the news page and try to identify a distinctive pattern that captures the desired data. It can be useful to include CSS style tags so that you can reuse the styles in your page. Write a regular expression pattern. The MIS 424 website has a regular expression tester that may be useful. Paste in the html from the target page and experiment with different patterns. Tip: Patterns often include double quotes. They may be escaped with a back-slash.
    5. The content you desire may not have a distinctive pattern to distinguish it from content that you do not desire. In these cases you may need to remove undesired text using C# methods such as indexOf(), substring(), and the length property. 
    6. The href attribute in anchor tags often omits the server name since the browser will use the current server name on paths that do not start with http.  Use replace to find the paths and replace the relative paths with absolute paths.
    7. The working sample includes a style tag that uses a smaller font size than the default <h2> style.
  2. /labs/ (click on "Select Criteria") The following two exercises tackle the more challenging parts of LIP. Specifically:
    • Assigning inspection criteria to labs
    • Displaying and recording the lab inspection form

    The first exercise assigns inspection criteria to labs. This exercise is very similar to assigning categories to products in A03. It assigns criteria to labs rather than categories to products.

    1. Database: In VS create a database named LabInspection.mdf. Paste LabDB.sql.txt into VS's "new query" dialog box to add 10 tables to the database. Take a look at the tables to overview their content and relationships.
    2. Model: The view model (LabVM) represents a single lab with a List<> of all possible inspection criteria. The criteria are displayed using checkboxes. The first answer by user3559349 Pass List of Checkboxes into View and Pull out IEnumerable explains how to setup the model. Use the model in the answer and replace the words "User" with "Lab" and "Role" with "Criteria". Edit the field names to match those in your database. For instance, your database uses CriteriaID rather than ID, LabID rather than ID,, etc. Change "bool IsSelected" to "string IsChecked". The LabVM model should have four properties and a List<CriteriaVM>. 
    3. LabRepository: The repository populates the model LabVM created in the previous step. Create an new method ListLabCriteria that takes LabID as a parameter and returns ProductVM.
    4. The LabVM model needs to be populated with both lab and criteria information. I suggest getting the lab information first by using a separate method named GetLabInfo(int productID). Call it using the syntax:
      tblLab lab = GetLabInfo(labID);
       
    5. Instantiate an instance of ProductVM and populate it with product information from the previous step:
        //Instantiate instance of LabVM and populate with lab info.
        LabVM labVM = new LabVM();
        labVM.LabID = lab.LabID;
        labVM.DeptID = lab.DeptID;
        //etc...
                                      
    6. SQL: This step populates labVM.Criteria. The sql statement uses a left join to get all the criteria from tblCriteria. Write a query that products output similar to the image. The article Sql Left Join describes the syntax. Also display the category field from tblCategory (include tblCategory in FROM and a join on CategoryID in WHERE). The answer by Taryn shows how to filter for labID. Order by Category and SortOrder. I suggest using VS's query tool for writing and testing your sql statement. The output should be similar to the image. The sql can be saved as a stored procedure or in LabRepository.
    7. The output from the previous query needs to be modified to work with the checkbox's checked attribute. Checkbox that are checked need to include the checked attribute in the view. There many ways to achieve this. The most straightforward is to modify the sql statement to return the string "checked" for checked items. Replace LabID in the select statement with an iif() statement:
      iif(lc.labID is not null,'checked', '') as IsChecked
      Test the query with VS's query tool.
    8. Controller:Create and new controller LabInspection with the following action method to display the checkboxes:
              [HttpGet]
              public ActionResult ListLabCriteria(int id = 0)  //labID
              {
                  if (id < 1) 
                      return RedirectToAction("/admin");
      
                  LabVM labVM = labRepository.ListLabCriteria(id);
                  return View(lbVM);
              }
      
    9. View: Use VS to create a view. Template is Details and model is LabVM. LabID and other lab attibutes can be retrieved using the syntax @Model.LabID. The syntax to display the list of criteria in checkboxes is: *** update from here ***
                  <table class="table">
                      @foreach (CategoryVM cVM in Model.Categories)
                      {
                          <tr>
                              <td style="width:20px">
                                  <input type="checkbox" name="ck1" value="@cVM.CategoryID" @cVM.IsChecked />
                              </td>
                              <td>
                                  @cVM.CatLabel
                              </td>
                          </tr>
                      }
                  </table>
      
    10. The JQuery Ajax code can be copied from the sample. The only modifications are to add a snippet of Razor code to get the application path:
      //Get application URL so path is correct in VS and on server.
      @{
          string RequestUrl = Url.Content("~/retail/ProductCategoryAjaxHandler/");
       }
      
      and add it to the Ajax request:
      $.post('@RequestUrl',
    11. Test. Add links to the Product/Index view pointing to EditProductCategories and pass ProductID in the querystring. Make sure the checkboxes are displaying correctly and add an image as in the sample. Check that Ajax requests are being sent by opening Chrome's developer tools and selecting the Network tab. When you click on a checkbox it should show a request being sent. If no request is sent check the Console tab to see the JavaScript error.  The request will return an error because there is no handler yet. The next steps will create a handler for the Ajax requests.
    12. Model: Create a new view model named AjaxResponseVM to handle the Ajax post request. It has three string properties: ProductID, CategoryID, and Action.
    13. RetailRepository: Add a method named AddRemoveProductCategoryAssignments(AjaxResponseVM ar) that returns void. Use an if statement to check if the action for insert or delete. Write a sql statement for each case. Execute the sql using the syntax: 
      db.Execute(sql, new { prodID = ar.ProductID, catID = ar.CategoryID});
      A return statement is not needed since no data is returned.
    14. Controller: Add an action method ProductCategoryAjaxHandler that accepts the parameter AjaxResponseVM and returns a string. Add the action verb [HttpPost]
    15. The action method calls retailRepository.AddRemoveProductCategories(ar) which updates the database. It then returns a string containing the product and category IDs. This will be displayed in the view to confirm a successful round-trip:
      return " ProductID:" + ar.ProductID + " CategoryID:" + ar.CategoryID;
    16. Test!
  3. LabInspection/index (click on Open Inspections) This exercise displays a form with inspection criteria, status, and comments. The form uses AJAX to update the database.
    1. Because this is a one-time project the instructions are provided two Word files: InspectionFormInstructions.doc and InspectionClasses.docx

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 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
Top