Edit on GitHub

Create your first WebService

This is a quick walkthrough of getting your first web service up and running whilst having a look at the how some of the different components work.

Step 1: Download and Install ServiceStackVS

First we want to install ServiceStackVS Visual Studio extension. The easiest way to do this is to look for it from within Visual Studio by going to Tools->Extensions and Updates and searching the Visual Studio Gallery as seen below.

Optionally it can be downloaded and installed from the VS.NET Gallery

VS.NET Gallery Download

ServiceStackVS supports both VS.NET 2013 and 2012.

VS.NET 2012 Prerequisites

Alternatively if continuing to use an older version of the NuGet Package Manager you will need to click on Enable NuGet Package Restore after creating a new project to ensure its NuGet dependencies are installed.

Step 2: Selecting a template

Once the ServiceStackVS extension is installed, you will have new project templates available when creating a new project. For this example, let’s choose ServiceStack ASP.NET Empty to get started.

Once you’ve created your application from the template, you should have 4 projects in your new solution. If you left the default name, you’ll end up with a solution with the following structure.

Step 3: Run your project

Press F5 and run your project!

If you are continuing to use an older version of the NuGet Package Manager you will need to click on Enable NuGet Package Restore after creating a new project to ensure its NuGet dependencies are installed. Without this enabled, Visual Studio will not pull down the ServiceStack dependencies and successfully build the project.

How does it work?

Now that your new project is running, let’s have a look at what we have. The template comes with a single web service route which comes from the request DTO (Data Transfer Object) which is located in the WebApplication1.ServiceModel project under Hello.cs file.

[Route("/hello/{Name}")]
public class Hello : IReturn<HelloResponse>
{
    public string Name { get; set; }
}

public class HelloResponse
{
    public string Result { get; set; }
}

The Route attribute is specifying what path /hello/{Name} where {Name} binds it’s value to the public string property of ‘Name’.

Let’s access the route to see what comes back. Go to the following URL in your address bar, where is your server address.

http://<root_path>/hello/world

You will see a snapshot of the Result in a HTML response format. To change the return format to Json, simply add ?format=json to the end of the URL. You’ll learn more about formats, endpoints (URLs, etc) when you continue reading the documentation.

If we go back to the solution and find the WebApplication1.ServiceInterface and open the MyServices.cs file, we can have a look at the code that is responding to the browser, giving us the Result back.

public class MyServices : Service
{
  public object Any(Hello request)
  {
    return new HelloResponse { Result = "Hello, {0}!".Fmt(request.Name) };
  }
}

If we look at the code above, there are a few things to note. The name of the method Any means the server will run this method for any of the valid HTTP Verbs. Service methods are where you control what returns from your service.

Step 4: Exploring the AngularJS Template

Starting a new ServiceStack ASP.NET with AngularJS application will also give you 4 new projects.

  • Host project
  • Service Interface project
  • Service Model project
  • Unit Testing project

AngularJS Solution

The Host project contains an AppHost which has been configured with the RazorFormat plugin as well as hosting all the required JavaScript packages like AngularJS, Bootstrap and jQuery. It is setup initially with a single _Layout.cshtml using the default Bootstrap template and a default.cshtml which contains the HelloWorld demo.

AngularJS Project

The Host project has dependencies on the Service Model and Service Interface projects. These are the projects that contain your request/response DTOs, validators and filters. This structure is trying to encourage have your data structures and services in separate projects make testing and reuse easier.

AngularJS Other Projects

The Unit Testing project, also as a dependency on these projects as it tests them in isolation of the main Host project. In the template, we are using the BasicAppHost to mock the AppHost we are using in the Host project. The example unit test is using NUit to setup and run the tests.

The Demo

The simple HelloWorld angular application that is provided in the template calls the /hello/{Name} route and displays the result in the <p> below.

AngularJS Demo

Home Page

The default.cshtml home page shows how easy it is to call ServiceStack Services from within AngularJS:

AngularJS Home

Testing

The project templates from the ServiceStackVS extension also include a Tests project. The project structure and addition of the Tests project is there to encourage a pattern that will scale to larger applications whilst maintaining a easy to understand and testable application.

Create a WebService from scratch

If you prefer, you can instead create a ServiceStack Web Service from a blank ASP.NET Web Application another popular option is to Add ServiceStack to an existing ASP.NET MVC Application

Explore more ServiceStack features

The EmailContacts solution is a new guidance available that walks through the recommended setup and physical layout structure of typical medium-sized ServiceStack projects, including complete documentation of how to create the solution from scratch, whilst explaining all the ServiceStack features it makes use of along the way.

Community Resources