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

AJAX (Asynchronous JavaScript and XML) is used in many popular web applications to provide users with a faster and smoother experience. It uses JavaScript embedded in the web page to make calls to the server and update parts of the web page. It is used extensively in many popular sites such as Facebook, Gmail, Netflix, Google search, and Google maps. .NET MVC has built in support for AJAX which makes in relatively easy to implement using many of the same tools used for web pages.

Tip: The developer tools in Chrome and Firefox are extremely helpful for debugging AJAX. They allow you to view the server requests and responses being made by the client-side JavaScript. Chrome's network view displays the AJAX requests and responses from the server. The console view displays client-side JavaScript errors. The following image from the Chrome developer tools illustrates an AJAX call with the parameter "sea", the URL where the request was sent, and the JSON response. Chrome Network

  1. AjaxSearch - Add a search page to the Bird exercise. Steps:
    1. The first step is to add a reference to the jQuery library to your layout. By default .Net MVC includes the jQuery library but it uses an old local version. Best practice is to download the library from a content delivery network (cdn). This allows browsers to benefit from caching. Add the following tag to the head section of your layout:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    2. Disable the old jQuery library by going to App_Start, BundleConfig.cs and commenting out the jQuery bundle.
    3. DataRepository: Add a new method named "SearchName(string id)" to BirdRepository. It searches the bird name field for characters matching id. The code looks something like this:
         string wildcard = '%' + id + '%';
        string sql = "select Id, Name, ImageName from birdDetails where Name like @wildcard";
        List<BirdModel> birds = db.Query<BirdModel>(sql, new { wildcard }).ToList();
        return birds;
      
    4. Controller: The Ajax enabled web page is static but it still needs a controller. For the static page add a new action method named AjaxSearch that returns an empty View().
    5. The JavaScript in the web page will be making requests to the server. The requests are handled by an ActionMethod named Search(string id). It uses the SearchName method in the DataRepository to search the database and returns List<BirdModel>. This List is then converted to JSON (JavaScript Object Notation) and sent to the client. Click to see the format of JSON request and response. Add the following to the return statement of Search(string id):

      return Json(birdRep.SearchName(id), JsonRequestBehavior.AllowGet);

    6. The next step is to create an new view named AjaxSearch. Create an empty view and replace the content with the HTML form and JavaScript from the working sample. The view content is clearly labeled in the sample.
    7. Test.
    8. Finally, add a link at the bottom of the left navigation column that points to the search page.
  2. AjaxZipcodes - This exercise uses AJAX to searche a Sql Server database of 42,742 city zip codes and returns cities that match the user's input. The database is inside WWU's firewall so for Visual Studio to access it from off campus you will need to have a VPN connection open. VPN is not needed on campus.  Steps:
    1. The handler for the AJAX request will utilize a database on Yorktown.  Add the following connection string to web.conifg:
      <add name="ZipCodes" connectionString="Data Source=yorktown.cbe.wwu.edu\dsciweb;Initial Catalog=Zipcodes;User ID=ZipcodeReader;Password=zipGuest;Persist Security Info=True;"providerName="System.Data.SqlClient"/>
    2. Model: Create a model with three string properties City, State, Zip and one int property ZipCount.
    3. DataRepository: The Zipcode database contains a stored procedure named "SearchZip" that accepts the beginning of a city name and returns all matching cities and states. It also returns a filed named zipCount with the number of zip codes in city-state combination. Create a new DataRepository (copy and rename PeopleCrudRepository) named ZipcodeRepository. Create a method GetMatchingCities(string city) and use the following to call the stored procedure:
       List<CityZipModel> cityzips = db.Query<CityZipModel>("SearchZip", new { city },
           commandType: CommandType.StoredProcedure).ToList();
       return cityzips;           
      
    4. Controller: Create a new empty controller named ZipcodeController. Add an ActionMethod named GetMatchingCities(string id) to handle the JavaScript calls. It will be similar to the AJAX handler for birds. Also add an ActionMethod named Index that returns an empty view. 
    5. The AJAX handler can be tested directly from the browser. It accepts GET requests and responds with JSON. This is a good way to test its functionality before calling it with JavaScript. Here is an example of the request and response. Test the AJAX handler from the browser.
    6. View: Create a new empty view named Index. Copy the client side code from the sample. This contains the jQuery to make requests to the sever and display the results in a table. Also copy the css.
    7. Test
  3. AjaxDropdown - This exercise is similar to the previous but uses AJAX to populate a dropdown list. Steps:
    1. Model: no changes need to existing model
    2. Repository: Returns city, state zip. Use SearchName in BirdRepository as a template.
    3. Controller: Requires to new action methods, similar to previous exercise.
    4. Test your controller to make sure it is returning appropriate data.
    5. View: Create a view named AjaxDropDown and paste in the HTML and jQuery code from the sample.
    6. Test!


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