Contact me!
Eric Håård
+46 (0) 73 375 86 06

Quick Start

A guide to help you get started with the Storm API. You will build an MVC.NET eCommerce site with very simple features to get an understanding of how Storm API can be used.

Step 1: Create Visual Studio ASP.NET project

  • In Visual Studio, select “File | New | Project” from the menu.
  • In the “Templates” tree, select the “Templates | Visual C # (or Visual Basic) | Web”.
  • Select “ASP.NET Web Application” template, and give the project a name, then click OK.
  • In the quick start we choose “MVC” project and select “No authentication”.

Step 2: Install StormApiClient

Open the Package Manager Console and install Enferno.StormApiClient.

PM> Install-Package Enferno.StormApiClient

Step 3: Update web.config

StormApiClient will add service references to Storm API in web.config. You can access the demo data by changing the service references. Replace “https://stormstage.enferno.se/api/1.1” to “http://stormstage.se/api/21” which is our demo API and remove the “behavior configuration” and “security mode” .

  <system.serviceModel>
    <bindings>
      <wsHttpBinding>
        <binding name="SOAP" maxReceivedMessageSize="10000000">
          <security mode="None" />
        </binding>
      </wsHttpBinding>
    </bindings>
    <client>
      <endpoint name="APPLICATION" address="http://stormstage.enferno.se/api/21/ApplicationService.svc/soap" binding="wsHttpBinding" bindingConfiguration="SOAP" contract="Enferno.StormApiClient.Applications.ApplicationService" >
      <endpoint name="PRODUCT" address="http://stormstage.enferno.se/api/21/ProductService.svc/soap" binding="wsHttpBinding" bindingConfiguration="SOAP" contract="Enferno.StormApiClient.Products.ProductService" >
      <endpoint name="CUSTOMER" address="http://stormstage.enferno.se/api/21/CustomerService.svc/soap" binding="wsHttpBinding" bindingConfiguration="SOAP" contract="Enferno.StormApiClient.Customers.CustomerService" >
      <endpoint name="SHOPPING" address="http://stormstage.enferno.se/api/21/ShoppingService.svc/soap" binding="wsHttpBinding" bindingConfiguration="SOAP" contract="Enferno.StormApiClient.Shopping.ShoppingService" >
      <endpoint name="ORDER" address="http://stormstage.enferno.se/api/21/OrderService.svc/soap" binding="wsHttpBinding" bindingConfiguration="SOAP" contract="Enferno.StormApiClient.Orders.OrderService" >
      <endpoint name="EXPOSE" address="http://stormstage.enferno.se/api/21/ExposeService.svc/soap" binding="wsHttpBinding" bindingConfiguration="SOAP" contract="Enferno.StormApiClient.Expose.ExposeService" >
    </client>
  </system.serviceModel>

Step 4: Add a product menu and cart in header

In “/Views/Shared/_Layout.cshtml” add a new menu between “Home” and “About”. Add some categories from Storm demo categories.

In a real project, you would set up the category tree in your CMS and specify the product selection each category page should display. The fast start, we make it easy for us and set the categories by hand.

Also add a cart in the navigation bar.

 <div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
   <li>@Html.ActionLink("Home", "Index", "Home")</li>
   <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu">
       <li>@Html.ActionLink("TV", "Index", "Products", new {id = "2193"}, null)</li>
       <li>@Html.ActionLink("Blue-Ray", "Index", "Products", new {id = "2201"}, null)</li>
       <li>@Html.ActionLink("Home Theater", "Index", "Products", new {id = "2206"}, null)</li>
       <li>@Html.ActionLink("Speaker", "Index", "Products", new {id = "2214"}, null)</li>
       <li>@Html.ActionLink("Headphones", "Index", "Products", new {id = "2220"}, null)</li>
       <li>@Html.ActionLink("Stereo", "Index", "Products", new {id = "2224"}, null)</li>
     </ul>
   </li>
   <li>@Html.ActionLink("About", "About", "Home")</li>
   <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
 </ul>
 <ul class="nav navbar-nav navbar-right">
   <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Basket <span class="badge">0</span> <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu">
       <li>@Html.ActionLink("Item", "Index", "Products", new { id = "2224" }, null)</li>
       <li class="divider"></li>
       <li>@Html.ActionLink("To basket", "Index", "Basket")</li>
     </ul>
   </li>
 </ul>
 </div>

Step 5: Create a controller and view for the product list

Right-click the “Controllers” folder and select “Add ..” and “Controller”. Select “MVC5 controller – Empty” and name it “Products Controller”. Create an “Access Client” and retrieve products from the category that is selected.

using System.Web.Mvc;
using Enferno.StormApiClient;

namespace StormApiClient.Controllers
{
    public class ProductsController : Controller
    {
        public ActionResult Index(string id)
        {
            var client = new AccessClient();
            return View(client.ProductProxy.ListProducts2(null, id, null, null, null, null, null, null, null, null, null, "PopularAsc", null, null, null, null, null, null));
        }
    }
}

Right-click the “Views / Products” folder and select “Add …” and “View”. Rename the view to “index” and use the template “Empty (no model)”. Set the model to “ProductItemPagedList” and display the products.

@model Enferno.StormApiClient.Products.ProductItemPagedList
@{
    ViewBag.Title = "Products";
}
<h2>Found @Model.ItemCount products</h2>
<table class="table table-hover">
    @foreach (var item in Model.Items)
    {
        <tr>
            <td>@item.Name</td>
            <td class="text-right">@item.Price.ToString("c")</td>
        </tr>
    }
</table>