Blog

Model Binding: HTML Templates

Excerpt by Phil Ledgerwood

url4  

The client-side migration revolution has not left markup untouched. Given thatclients making service calls and rendering the results has become such a common way for web applications to work with data, especially as mobile application use is on the rise, a good deal of attention has been given to the rendering aspect of using service data. The standard way of dealing with data returned via AJAX was to use JavaScript to concatenate the data into strings of HTML and then dynamically write that HTML into the DOM. Although the basic principle is the same, mechanisms have been developed in recent years to make this process easier and more modular. Binding data to HTML templates is a popular way to do this, and using it has even given rise to a pattern commonly called MVVM.

MVVM

MVVM stands for Model-View-ViewModel and describes a client rendering design pattern.

  • The Model represents your actual data, such as might be pulled from a database or a service.
  • The View is the actual UI that renders the ViewModel, which will generally be HTML in the case of typical web application development.
  • The ViewModel is Model data that has been shaped specifically with the goal of binding this to a View that will render the data.

This may not sound all that different from the MVC or MVP patterns, but one of the things that makes the MVVM pattern a little more exciting is that changes to the ViewModel can update the View and the Model immediately.

Let's consider the traditional client-server way of editing data. If you want to add a new customer in a web application:

  1. Pull up an HTML form and make changes to the form.
  2. >Click Submit so the page posts this data to code that writes it into the database.
  3. The page refreshes with any new information such as Customer Id.

Now let's consider using MVVM to edit data. With the MVVM pattern, a ViewModel sits between the View (the form) and the Model (the data from the database), which gives you flexibility on when and how these updates happen >and renders the changes in real-time. If you want to add a new customer using MVVM:

  1. Fill out the Add Customer form.
  2. Click Submit, which adds the customer to the ViewModel.
  3. This change automatically updates an Added Customers grid at the bottom of the page with no refresh.

At this point you can decide if you want the new customer to be saved directlyto the database. If you do, then as soon as your server-side code saves the customer and gets the Id, it can put the Id into the ViewModel which automatically updates any UI elements bound to it.

You could also keep the "Added Customers" in the ViewModel but not save any of them until the user clicks the Commit Changes button. This allows theuser to add, update, or delete all kinds of operations on that data with a UI thatresponds immediately to changes but doesn't commit anything to the database until it's told to.

The main point is that in MVVM, the ViewModel is directly bound to the View, so any changes to it automatically update the View. This adds a huge level of responsiveness and options when writing web applications. Some applications are referred to as Single-Page Applications because the MVVMpattern enables users to do everything on a single page bound to a modifiable ViewModel.

Binding ViewModels to HTML

Much like AJAX, there are a number of JavaScript libraries that have already been written to help you with the process of binding an HTML UI to a ViewModel. The basic principle behind them all is that you create a snippet of HTML and use attributes or JavaScript functions to mark off the dynamic partsthat will get their data from the ViewModel.

When a web page containing an HTML template is requested, an AJAX operation gets data from a service. This data either directly becomes or is incorporated into a JSON ViewModel, and the JavaScript binds this ViewModel to the corresponding places marked off in your HTML. Any changes to the JSON ViewModel will automatically update the UI pieces that are bound to them.

Like AJAX, there's nothing stopping you from writing all the code for this process yourself, but a number of libraries exist that already do this. One popular library for binding JSON ViewModels to HTML templates is Knockout.js, and Microsoft includes it by default in Web API projects. There are other options however, such as Pure, Mustache, or JTemplates. Also like AJAX, no Microsoft-specific technologies or platforms are required to use HTML templates. On the client/consumer end of HTTP web services, you are free to use whatever you like, all the way from static HTML to PHP to JSP to anything in between. It's all HTML and JavaScript at this point.

ldn-pledgerwoodThis post is an excerpt from the online courseware for our ASP.NET Web API Model Binding and Media Formats course written by expert Philip Ledgerwood.



Phil Ledgerwood

Philip Ledgerwood has been a software developer for fifteen years. He currently works primarily in .NET technologies producing custom software for organizations of all sizes. He has also done extensive training for those same organizations in both technical and business process topics. Philip is a strong advocate of Lean and agile software development and spends most of his time helping companies interested in the value those practices can bring to their development efforts. He does this through a combination of training and working "in the trenches" as a developer on these teams, keeping a hand in the academic side of emerging technology and practices while also directly applying it in real projects to bring real business value.


This course excerpt was originally posted March 12, 2013 from the online courseware ASP.NET Web API, Part 3 of 4: Model Binding and Media Formats by Phil Ledgerwood

HTMLAJAXWebAPIC#ASP.NET