Assignment 4 - RSS feeds, AJAX

1. RssPublish.aspx - RSS (Really Simple Syndication) is a relatively simple method for sharing data. RSS is an XML file that follows a few simple rules and is served via http (Google: "w3w rss 2.0" to see RSS specification) . It is a simpler method than Web Services and it typically implemented as a one-way broadcast of data.  The Seattle Times RSS feed is a typical example of an RSS feed.

RSS feeds are XML files that are not intended to be read directly with browsers. Most browsers will try to make RSS feeds more readable by automatically converting them to HTML and applying a style sheet. The same RSS feed viewed in IE and Firefox looks much different because each browser applies a different style sheet.

Take a look at the RSS XML code for the Seattle times feed by right clicking on the RSS feed and selecting "View Source."  You should see a simple XML file that includes some RSS tags. In this exercise you will produce similar XML formatted data to display product information from your RetailStore database.

The article Syndicating Your Web Site's Content with RSS and ASP.NET by Scott Mitchell explains how to produce an RSS feed. Modify the code provided in the article to syndicate the content from your RetailStore database.

Steps:

1. Cut and paste Scott Mitchell's complete source code into an .aspx page and view the output in a browser.
2. The sample code caches the feed. The cache needs to be disabled while you work on the page. Add the following above line 12:
   Cache.Remove("RssFeed");
3. Delete line 16 (CreateDataSource()). We will be retrieving data from the RetailStore database. Also delete the function by the same name located at the bottom of the page.
4. Modify the title, link etc. on lines 30-32 appropriately for your site. The optional "ttl" element is "time to live" (more info on ttl) and may be omitted.
5. Mitchell's sample code uses a for loop (lines 36-52) to display static sample data. Replace his sample data with product information from your database.
   1. Use the DataAccess class to fill a DataTable with information for approximately 6-8 randomly selected items.  The SQL statement from your RetailStore's default page should work for this. You will need the fields ProductID, ItemName, and Description. Most RSS readers do not display images so image information is not needed.
   2. Iterate through the DataTable using the following syntax:

      foreach(DataRow dr in dt.Rows)
      {
          // write out <item>
          writer.WriteStartElement("item");

           // write out <item>-level information
           writer.WriteElementString("title", dr["ItemName"].ToString());
      
      etc. etc...

   3. Populate the "title", "link", "description" and pubDate elements.  The syntax for the pubDate element is:
           writer.WriteElementString("pubDate", DateTime.Now.ToString("r"));
6. That's all. Test the page.
7. If you have an RSS aggregator such as iGoogle or Google Reader try adding your RSS feed. It should look something like the image below (from iGoogle).
                 
   

 

2. RSSSeattleTimes.aspx -  In addition of syndicating our content for others to use we may want to display RSS data from other data providers on our web site. A RSS Reader converts the XML RSS feed to HTML. ASP.NET can read RSS feeds using several techniques, including:

1. Utilize an open-source ASP.NET RSS server control (Google the phrase "asp.net rss reader").
2. Use ASP.NET's Xml server control. This control transforms the data from XML to HTML by applying a XSLT (Extensible Stylesheet Language Transform ) style sheet.  The article An ASP.NET RSS Feed Reader describes this approach.
3. Read the RSS feed into a DataSet and then bind the data to a DataList, GridView or other server control. The method is illustrated in RssReadDataSet.aspx (source).  Since we are familiar with using DataSets and DataList controls we will use this method.

XML documents use a hierarchal tree structure while DataSets use a relational structure.  The dataset's ReadXml method automatically converts the hierarchal XML to a relational structure, with different levels of the tree hierarchy represented in different DataTables. The Seattle times RSS feed is converted into six DataTables. The DataSet creates key fields (Item_Id in the example) to show the relationships between the tables.

Display the Seattle Times RSS feed as hyperlinks and text. Steps:

1. Copy and paste the source code from RssReadDataSet.aspx (source).
2. The sample code iterates through all the tables and binds each to a GridView control. You will want to remove the foreach loop and the PlaceHolder control. Add a DataList control aind bind the appropriate DataTable to the DataList using syntax something like:
        dlArticles.DataSource = ds.Tables[3];
        dlArticles.DataBind();
3. Create an ItemTemplate for the DataList and use Databinder Eval() tags to display the data.
4. The name of the feed and the publication date are in DataTable 1. Retrieve this information and put it in a label. The syntax for retrieving individual items from a DataSet is:
        ds.Tables[1].Rows[0]["pubDate"].ToString()

 

3. ZipCodesForCity.asmx - AJAX (Asynchronous JavaScript And XML) can provide a rich user interface by using JavaScript to update parts of a web page without having to reload the entire page. The JavaScript sends SOAP requests to a server. The server sends an XML response which is captured by the JavaScript and used to update portions of the web page.  Examples are Google Suggest, Amazon's search, Ask.com, and Start.com.

.NET's web services work well as a server back-end for AJAX enabled web pages.  We will create a web service that queries a city-zip database (containing 42,742 zip codes) and returns the names of cities that start with the user-supplied string.

Steps:

1. The zip code information is available via a stored procedure on the SandvigMusicStore database. To access the stored procedure (you may already have a reference to this database in your web.config file from MIS 324):
   
   Data Source=reliant.cbe.wwu.edu,2767
   Initial Catalog=SandvigMusicStore
   User ID=WebGuest
   Password=guest
   
   The connection string in the web.config file has the syntax:
   
   <add name="SandvigMusicStoreGuest" connectionString="Data Source=reliant.cbe.wwu.edu,2767;Initial Catalog=SandvigMusicStore;Persist Security Info=True;User ID=WebGuest;Password=guest" providerName="System.Data.SqlClient"/>
   
   NOTE: This database cannot be accessed from off campus servers. It can be accessed by code that is executed on the Yorktown server as well from Visual Studio via the campus network.
   
   Stored procedure name: SearchCityZip
   Parameter: @strCity
   
   You will probably be able to view the stored procedure in Visual Studio's Server Explorer, however it may not return any results because VS does not have WebGuest credentials. It should work properly via from your .asmx or .cs file because it will pass in the UserID & password for WebGuest from the web config file.
2. GetTitlesSP.cs.txt (view source) illustrates the syntax for using a stored procedure with an input parameter. The stored procedure "SearchCityZip(strCity)" may be called from your .asmx page or via a business object (the business object is then called from your .asmx page).
3. .asmx pages cannot return dataTables, so you must use a dataset. The syntax is:
   
   DataSet ds = new DataSet();
   _myAdapter.Fill(ds, "CityZips");
   

4. AJAXZipcode.aspx - Each time the user types a character into the textbox the JavaScript onKeyUp event requests a new list of cities from the web service and displays them in the select box. Most of the code for this page is on the client side and can be copied from the sample. You will need to add some code to the page_load event that checks the querystring for a parameter named "dlStateList" and, if found, displays its value in a label. This should be a cut and paste exercise.

Steps:

1. Modify your web.config file to allow GET requests for web services as shown below.
2. Copy the HTML source code from the sample, including the .js file. 
3. Modify the .js file to point to the web service you created in the previous problem.
4. Test the page. It should list the cities.
• If it does not work:
• check that your web service uses exactly the same field names for the request and response as the sample above.
5. Add a page load event to the .aspx page that checks the querystring for a parameter named "dlStateList" and, if found, displays its value in a label.
6. That's it!

Note: You may need to modify the web.config file on your development machine to enable GET requests for web services. In the <system.web> section of your root folder web.config file add the following:

<webServices>
  <protocols>
     <add name="HttpGet"/>
     <add name="HttpPost"/>
   </protocols>
</webServices>

 

5. AjaxAspNet.aspx - The ASP.NET framework provides drag-and-drop controls for creating AJAX pages. The controls create the JavaScript on the client-side and handle the AJAX requests on the server-side. This page uses a ScriptManager control and UpdatePanel control to AJAX enable three dropdownlist controls. This article UpdatePanel Control Overview describes how these controls work.  Steps:

1. Create a new page and drag a dropdownlist control onto the design surface. Use the control's smart tag to create a sqlDataSource control that retrieves state abbreviations from the zip code database. Use the distinct keyword to eliminate duplicate state abbreviations. Add AutoPostBack = "true" so that causes a page postback when an item is selected.
2. Drag a second dropDownList control onto the page to list cities. It needs sqlDataSource control that uses the state selected in the first dropdown list.
3. Drag a third dropDown control for zip code.  Its sqlDataSource control needs to use both State and City from the previous two controls.
4. When the user select a zip code the third dropDownList control throws a OnSelectedIndexChanged event. The handler for this event assigns the city, state and zip information to a label control.
5. Also add the time of last page refresh to the page. The syntax is:
        Page refreshed: <% =DateTime.Now.ToLongTimeString() %>
6. Get the page working.
7. Enable AJAX: Drag a ScriptManager control onto the page. The ScriptManager must appear before any controls that need it and inside the <form> tags.
8. We want the three dropDownLists controls and the label control to be AJAX enabled. Drag out a UpdatePanel control and wrap around the four controls. The controls must also be within <ContentTemplate> tags.
9. If the UpdatePanel control does not AJAX-enable your page the problem is often with the web.config file. .NET AJAX requires a number of references in the web.confg. Here is a link to a AJAX enabled web.confg file with all the AJAX references. Add the references in this file to the web.config file located in your application root. The tags must be in the correct order.
10. Test it. The four controls should now be AJAX enabled.

To submit your assignment for grading send an email with the URLs for your assignment to:

1. Professor Sandvig at . (note: this address is for homework assignments only - please send other correspondence to ).
2. cc. a copy to yourself.

The subject line of your email should read "MIS424 AXX YourName" where XX is the assignment number. Please check that your URLs are correct before submitting them for grading. Files with incorrect URLs will not be graded.