Skip to content
mythz edited this page Feb 14, 2011 · 29 revisions

#New HTML5 and JS Report Format

##HTML5 Report Examples

These examples are simply links to existing ServiceStack web services, which based on your browsers user-agent (i.e. Accept: 'text/html') provides this HTML format instead of the other serialization formats.

Note: To view the web services in a different format simply append ?format=[json|xml|html|csv|jsv] to the query string.

The primary focus for the HTML Format is to provide a readable and semantic HTML layout letting you visualize all the data returned by your web service with a single glance. Using convention, it recursively transforms any web service response DTO into a human-readable HTML report. Other features include:

It's Human Friendly

Based on convention, it generates a recursive and cascading view of your data using a combination of different sized definition lists and tables where appropriate. After it's rendered convenience behaviour is applied allowing you to sort your tabular data, view the embedded JSON contents as well as providing links back to the original web service that generated the report including links to the other formats supported.

It's completely self-contained

The report includes no external CSS, JavaScript or Images which also helps achieve its super-fast load-time and rendering speed.

It's embeds snapshot of your data

The report embeds a complete, unaltered version of your 'JSON webservice' capturing a snapshot of the state of your data at a given point in time. It's perfect for backups with the same document containing a human and programatic access to the data. The JSON data is embedded inside a valid and well-formed document, making it programatically accessible using a standard XML/HTML parser. The report also includes an interface to allow humans to copy it from a textbox.

It's Fast

Like the other web services, the HTML format is just a raw C# IHttpHandler using .NET's fastest JSON Serializer to serialize the response DTO to a JSON string which is embedded inside a static 'HTML template'. No other .aspx page or MVC web framework is used to get in the way to slow things down. High performance JavaScript techniques are also used to start generating the report at the earliest possible time.

How it works - 'view-source' reveals all :)

This is a new type of HTML5 report that breaks the normal conventional techniques of generating a HTML page. Instead of using a server programming and template language to generate the HTML on the server, the data is simply embedded as JSON, unaltered inside the tag:

<script id="dto" type="text/json">{jsondto}</script>

Because of the browser behaviour of the script tag, you can embed any markup or javascript unescaped. Unless it has none or a 'javascript' type attribute, the browser doesn't execute it letting you to access the contents with:

document.getElementById('dto').innerHTML

From there, javascript invoked just before the closing body tag (i.e. the fastest time to run DOM-altering javascript) which takes the data, builds up a html string and injects the generated markup in the contents of the page.

After the report is rendered, and because JavaScript can :) UX-friendly behaviours are applied to the document allowing the user to sort the table data on each column as well as providing an easy way to take a copy of the JSON datasource.

Advantages of a strong-typed, code-first web service framework

Although hard to believe, most of the above web service examples were developed before ServiceStack's CSV and HTML format existed. No code-changes were required in order to take advantage of the new formats, they were automatically available after replacing the ServiceStack.dlls with the latest version (v1.81+)

Being able to generically provide An advantage of ServiceStack's strong-typed, code-first approach to developing web services that lets you focus on your app-specific logic as you only need to return C#/.NET objects or throw C#/.NET exceptions which gets automatically handled, and hosted on a number of different endpoints in a variety of different formats.

Out of the box REST, RPC and SOAP endpoints types are automatically provided, in JSON, XML, CSV, JSV and now the new HTML report format above.



  1. Getting Started
    1. Create your first webservice
    2. Your first webservice explained
    3. ServiceStack's new API Design
    4. Designing a REST-ful service with ServiceStack
    5. Example Projects Overview
  2. Reference
    1. Order of Operations
    2. The IoC container
    3. Metadata page
    4. Rest, SOAP & default endpoints
    5. SOAP support
    6. Routing
    7. Service return types
    8. Customize HTTP Responses
    9. Plugins
    10. Validation
    11. Error Handling
    12. Security
  3. Clients
    1. Overview
    2. C# client
    3. Silverlight client
    4. JavaScript client
    5. Dart Client
    6. MQ Clients
  4. Formats
    1. Overview
    2. JSON/JSV and XML
    3. ServiceStack's new HTML5 Report Format
    4. ServiceStack's new CSV Format
    5. MessagePack Format
    6. ProtoBuf Format
  5. View Engines 4. Razor & Markdown Razor
    1. Markdown Razor
  6. Hosts
    1. IIS
    2. Self-hosting
    3. Mono
  7. Advanced
    1. Configuration options
    2. Access HTTP specific features in services
    3. Logging
    4. Serialization/deserialization
    5. Request/response filters
    6. Filter attributes
    7. Concurrency Model
    8. Built-in caching options
    9. Built-in profiling
    10. Messaging and Redis
    11. Form Hijacking Prevention
    12. Auto-Mapping
    13. HTTP Utils
    14. Virtual File System
    15. Config API
    16. Physical Project Structure
    17. Modularizing Services
  8. Plugins
    1. Sessions
    2. Authentication/authorization
    3. Request logger
    4. Swagger API
  9. Tests
    1. Testing
    2. HowTo write unit/integration tests
  10. Other Languages
    1. FSharp
    2. VB.NET
  11. Use Cases
    1. Single Page Apps
    2. Azure
    3. Logging
    4. Bundling and Minification
    5. NHibernate
  12. Performance
    1. Real world performance
  13. How To
    1. Sending stream to ServiceStack
    2. Setting UserAgent in ServiceStack JsonServiceClient
    3. ServiceStack adding to allowed file extensions
    4. Default web service page how to
  14. Future
    1. Roadmap
Clone this wiki locally