Model View Controller

Simplicity is a driving goal behind the design of #Script where in its simplest form it's usable by non-programmers who just know HTML as they're able to embed dynamic content in their HTML pages using intuitive Mustache syntax and with the intuitive way in how #Script Pages works they're able to develop entire content-heavy websites without needing to write any code.

As requirements become more demanding you can use progressively advanced features to enable greater flexibility and functionality whilst still retaining using scripts to generate the HTML view with access to existing layouts and partials.

The first option to enable functionality is to reuse the rich functionality available in Services to populate the data required by your view. To do this in ServiceStack add a reference to the ISharpPages dependency which was registered by ScriptContext, then return a PageResult containing the .html page you want to render as well as any additional arguments you want available in the page:

CustomerServices.cs

using ServiceStack;
using ServiceStack.Script;

namespace SharpScript
{
    [Route("/customers/{Id}")]
    public class ViewCustomer
    {
        public string Id { get; set; }
    }

    public class CustomerServices : Service
    {
        public ISharpPages Pages { get; set; }

        public object Any(ViewCustomer request) =>
            new PageResult(Pages.GetPage("examples/customer")) {
                Model = TemplateQueryData.GetCustomer(request.Id)
            };
    }
}

The above can Service can also be made slightly shorter by using the Request.GetPage() extension method, e.g:

public class CustomerServices : Service
{
    public object Any(ViewCustomer request) =>
        new PageResult(Request.GetPage("examples/customer")) {
            Model = TemplateQueryData.GetCustomer(request.Id)
        };
}

Model PageResult Property

The Model property is a special argument that automatically registers all its public properties as arguments as well as registering itself in the model argument, this lets views reference model properties directly like {{ CustomerId }} instead of the more verbose {{ model.CustomerId }} as used in:

examples/customer.html

<!--
title: Customer Details
-->

<h2>{{ CompanyName }}</h2>

<table class="table table-bordered">
    <tr>
        <th>Address</th>
        <td>
            {{ Address }} 
            {{ City }}, {{ PostalCode }}, {{ Country }}            
        </td>
    </tr>
    <tr>
        <th>Phone</th>
        <td>{{ Phone }}</td>
    </tr>
    <tr>
        <th>Fax</th>
        <td>{{ Fax }}</td>
    </tr>
</table>

<h4>{{ CompanyName }}'s Orders</h4>

<table class="table ">
{{#each Orders}}
    <tr><td>{{OrderId}}</td><td>{{OrderDate}}</td><td>{{Total |> currency}}</td></tr>
{{/each}}
</table>

Now that we have the Service handling the Request and populating the Model for our page we can use it to view each Customer in a nice detail page: