Welcome to this review of MVC and AJAX, which is the 6th module of the Pluralsight course One ASP.NET From Scratch by Jesse Liberty and Jeff Fritz.

This is final module from Jesse Liberty.

Jesse has over 30 years experience writing and delivering software projects, is the author of 2 dozen books, and has been a Senior Technical Evangelist for Microsoft and a Distinguished Software Engineer for AT&T.

He is a Xamarin Certified Mobile Developer and MVP, Microsoft MVP, Telerik MVP and host of “Yet Another Podcast”.

Also in this series:

Part 1 – One ASP.NET From Scratch
Part 2 – Advanced Web Forms
Part 3 – MVC
Part 4 – Advanced MVC
Part 5 – MVC and AJAX
Part 6 – Web Pages
Part 7 – Web API
Part 8 – SignalR

MVC and AJAX

Introduction

AJAX originally stood for Asynchronous JavaScript and XML, but this term is pretty meaningless today as AJAX almost always uses JSON data rather than XML.

MVC’s support for AJAX is in the form of jQuery extensions which enable us to use JavaScript to display validation errors in an unobtrusive way.

Jesse explains that this moves away from the old technique of injecting tons of JavaScript directly into the page, instead using HTML5 attributes and external JavaScript files.

This module focuses on AJAX Action Links and AJAX Forms.

Ajax Action Links are anchor tags with asynchronous behavior and overloaded parameters.

Ajax Forms are also asynchronous with overloaded parameters: Action, Controller and Options.

AJAX Helper

Jesse shows us the view Index.cshtml, where we add a bargainBook div element, and inside it our AJAX Helper

@Ajax.ActionLink("Click here for the Bargain Book!", "Bargain Book")

We also see how to add a 3rd argument AjaxOptions, which has it’s own arguments UpdateTargetId, InsertionMode and HttpMethod.

Next we add an Action Method in our BookController which returns a partial view of HTML containing our bargain book.

We create this partial view as a new cshtml file and outputting our model properties here.

Jesse shows us BundleConfig where we have many bundled scripts, including jqueryval, which contains our unobtrusive scripts.

For much more information on Bundling see Travis Gosselin’s course.

The effect of these code updates is a hyperlink that displays our partial view as:

Book Cryptonomicon
Price 9.95

AJAX Form

In this next demo, we use Ajax.BeginForm, passing in the name of our new AjaxHelper, action name, and AjaxOptions.

In the markup section we add a textbox, submit button and a hidden ajax loading animated image.

In the BookController we write a new Action method _BookSearch returning another partial view.

We see that, when we run our application and click on the Find Title button, our AJAX Form instantly appends the relevant book titles to the page.

Part 6 – Web Pages is coming soon