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

A04 - Web Services, Screen Scraping, Google Search, Google Maps In this assignment you will use web services to publish a search of the music store database. You will then consume it and display the results in an MVC view. You will also scrape WWU's news page, and read a RSS feed.

  1. SearchMusicApi/SearchMusic/ - This exercise creates a web service that searches the music store database and returns the results via JSON.
    1. The exercise will use the same search stored procedure used in the MIS 324 music store project. To access the music store database on the Yorktown server add the music store connection string to your web.config (see MIS 324 A07 1a)
    2. Model: Add a music description model.  Copy your model from MIS 324 or use this MusicDescriptionModel.
    3. DataRepository:  MIS 324 A07 steps 3-4 describe how to call the search procedure on Yorktown. Create a new MusicRepository and add the code for the connection string and accessing the SearchTitleArtist stored procedure.
    4. Controller: Create a new controller named MusicSearchApi. Add a action method named MusicSearch(string id). This action method will retrieve a List<> of data from MusicRepository and format it as JSON. The following article shows the syntax: More Elegant way to return json array to ASP.NET MVC.
    5. Test!
  2. SearchMusicApi/ViewMusic - This exercise consumes the music search web service created in part 1 and displays it in the default table view.
    1. Namespaces: You will be using web services within an MVC project (rather than a Web API project) and will need to add a few additional namespaces to your controller. First add the following to the MusicSearchApiController:
      using System.Net;
      using System.Net.Http;
      using System.Web.Http;
      using System.Threading.Tasks;
      using System.Web.Script.Serialization;
    2. References: Right-click on "References" and select Add Reference and add "System.Web.Http."  If the Script.Serialization namespace is missing add a refernece to System.Web.Extensions.
    3. Controller: Create a new action method named ViewMusic and modify WebServiceReadJson to read the web service you created in the previous exercise.
    4. View: add a view.
    5. Test!
  3. SearchMusicApi/ViewMusic2 - This exercise consumes the music search web service and displays the results in an enhanced view that contains a search box and formatted results.
    1. Controller: Copy and paste ViewMusic and name the copy ViewMusic2. Modify it to accept a parameter named query of type string. Also modify it to return an empty view if the parameter is null.
    2. View: to ViewMusic2 add a search box. Also wrap the foreach loop with a test to see if the model contains data. The foreach loop will throw an exception if the model is empty.
                           @if(Model != null) 
    3. Add Razor to display the item count:
      @string.Format("{0} titles match '{1}'", Model.Count(), 
    4. Replace the table layout with properly formatted e-commerece layout (title, aritst, image, description, and Amazon link). Razor syntax for truncating the descripton:

      @Html.Raw(item.Review.Substring(0, Math.Min(150, item.Review.Length)))

    5. Test!
  4. ScreenScrape/index - This exercise scrapes WWU's popular new headlines.
    1. Add the code from the handlout 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 idenfify a distinctive pattern that captures the desired data. It can be useful to include css style tags so that you can reuse them 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: if you pattern includes double-quotes you can escape them with a back-slash.
    5. The content you desire may not have a distnictive 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 scraped hyperlinks may not include the full URL. (Browsers automatically add the server name to links that do not start with http). Since you will be displaying the links on a different server you need to add the address for the WWU news server. 
  5. RssReader/index - RSS stands for "really simple syndication" and along with the newer Atom standard is used to distribute web content. RSS and Atom are both XML format standards. In this exercise you will read the Seattle Times RSS news feed and display it in a MVC view.
    1. Model: Look at the Seattle Times RSS feeds. Click on "all artiles" to veiw the feed. The fields that we will display are title, pubDate, link, and description. Build a model named RssNewsModel with these four properties.
    2. Controller: The article THE EASY WAY TO READ AN RSS FEED shows how to read an RSS feed into a List<>. Create a new controller named RssRead with an action method named News. Copy from "var reader" to "return" into the controller and modify the code to use the URL of the Seattle Times news feed. Replace the BlogModel with your RssNewsModel. Modify the code in the foreach loop to copy the four fields from the feed to your model:
                      RssNewsModel rnm = new RssNewsModel();
                      rnm.Title = i.Title.Text;
                      rnm.Description = i.Summary.Text;
                      rnm.Link = i.Links[0].Uri.OriginalString;
                      rnm.PubDate = i.PublishDate.LocalDateTime.ToLongDateString(); ;
    3. Pass postList into the View. Create a new view and test.
    4. Improve the layout to display titles (with links to the article), description, and pubDate. You may copy the formatting from the sample. The image tag is located inside the description so use @Html.Raw(item.Description) to display the description. The images are very large so the sample site includes a snippet of CSS to reduce their size.
    5. 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 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