View Switcher for ServiceStack?

Question

In MVC, there's a ViewSwitcher, and you can add _Layout, _Layout.mobile; MyView and optional MyView.mobile

What's the best way to accomplish this in ServiceStack razor view? Thanks

Answer 1

ServiceStack doesn't implicitly switch layouts at runtime, instead the preferred layout needs to be explicitly set. ServiceStack's RazorRockstars Demo website explains how to dynamically switch views, i.e:

Change Views and Layout templates at runtime

The above convention is overrideable where you can change both what View and Layout Template is used at runtime by returning your Response inside a decorated HttpResult:

return new HttpResult(dto) {
    View = {viewName},
    Template = {layoutName},
};

This is useful whenever you want to display the same page in specialized Mobile and Print Preview website templates. You can also let the client change what View and Template gets used by attributing your service with the ClientCanSwapTemplates Request Filter Attribute:

[ClientCanSwapTemplates]
public class RockstarsService : RestServiceBase { ... }

Which itself is a very simple implementation that also shows you can you can swap the View or Template used inside a Request Filter:

public class ClientCanSwapTemplatesAttribute : RequestFilterAttribute
{
    public override void Execute(IHttpRequest req, IHttpResponse res, object requestDto)
    {
        req.Items["View"] = req.GetParam("View");
        req.Items["Template"] = req.GetParam("Template");
    }
}

This attribute allows the client to change what View gets used with the View and Template QueryString or FormData Request Params. A live example of this feature is used to change the /rockstars page:

• /rockstars?View=AngularJS
• /rockstars?Template=SimpleLayout
• /rockstars?View=AngularJS&Template=SimpleLayout

Changing Layout used from inside a view

You can even change the layout used by setting the Layout property from inside a Razor View, e.g:

@inherits ViewPage<Response>
@{
    Layout = IsMobileRequest(base.Request) ? "_LayoutMobile" : "_Layout";
}