BTI420 notes – Tue Apr 7

An introduction to Ajax and web services, in an ASP.NET MVC web app.

.

Reminder about in-class evaluation on Thursday or Monday

Section B students have a hands-on in-class evaluation on Thursday, April 9, at 8:30am ET.

For Section A students, it will be on Monday, April 13, at 1:45pm ET.

It will be a focused programming task, that may include some recently-covered topics, or may include other work that has been covered in the past number of weeks.

.

Today’s code examples

Ajax Intro

Notes base with Ajax

.

Ajax technology in general

In the past, you have learned that ‘Ajax’ is a web client programming technique that enables JavaScript code to asynchronously request new content for the document in the browser.

Here are some introductory documents that will help you get started with Ajax:

Wikipedia – Ajax (programming)

MDN – AJAX info start page

MDN – Getting Started (with AJAX)

Ajax – A New Approach… (the article that popularized the Ajax technique)

.

What kind of content can be requested?

Any kind of content can be requested, including:

  • HTML
  • JSON
  • Internet media type

.

Ajax technology in ASP.NET MVC apps

Every ASP.NET MVC project is Ajax-enabled.

An enhanced level of Ajax functionality can be added – unobtrusive JavaScript. One of today’s code examples uses the technique.

In your views, you have used HTML Helpers. There are a few Ajax Helpers that enable a form to asynchronously call into a controller method.

(more to come)

.

Code example – Ajax Intro

The AjaxIntro code example demonstrates these features:

  • Ajax
  • partial view

.

In the Scripts folder, a new folder named App was created. (This is a soft but emerging best practice for ASP.NET MVC web apps.) In that folder, we add our own JavaScript code. In this code example, “core.js” was added.

We must ensure that the JavaScript loads when the page loads. Therefore, in _Layout.cshtml, we add an HTML <script> element to make that happen:

<!-- code above... -->
@Scripts.Render("~/bundles/jquery")
<!-- Core functionality for all views in the web app -->
<script src="~/Scripts/App/core.js"></script>
@Scripts.Render("~/bundles/bootstrap")
<!-- code below... -->

.

In this app, the core.js source code file has the “addRegions()” function, which gets called by the World controller’s UseInfo view.

As you can see in core.js, the code requests a resource named ~/world/fetchregions/5:

// Configure the xhr object and fetch the content
xhr.open('get', '/world/FetchRegions/' + value, true);
xhr.send();

.

The controller method that services that resource returns a partial view.

A partial view is a source code container with markup + code expressions that you intend to add to an existing view. Create a partial view by using the same ‘add view’ procedure that you have used before. By convention, the name of a partial view begins with an underscore, e.g. _Whatever. In the ‘Options’ area, make sure that you mark the checkbox:

create-partial-view

.

When the content is delivered to the JavaScript function, it adds it to the browser DOM:

// Update the user interface
// 'content' is a reference to the <div> that will hold the new content
content.innerHTML = xhr.responseText;

.

Code example – Notes base with Ajax

The Notes base with Ajax code example demonstrates these features:

  • unobtrusive JavaScript

.

(more to come)

.

A brief introduction to web services

A web service is an application that runs on a web server, and is accessed programmatically.

This simple sentence contains a number of very important concepts and techniques, including:

  • HTTP is the protocol
  • A web service is defined by its application programming interface (API)
  • Humans don’t use a web service directly – instead, the application they are using creates and sends a request to the web service, and handles the response in a way that’s meaningful to the application they’re using

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: