Merge pull request #394 from JocaPC/wwi-app

Wwi app v1 added into branch wwi-app

samples/databases/wide-world-importers/wwi-app/.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "wwwroot/lib"
+}

samples/databases/wide-world-importers/wwi-app/.gitignore

@@ -0,0 +1,12 @@
+*.xproj.user
+.vs/*
+.vscode/*
+bin/*
+obj/*
+obj/project.assets.json
+*.sln
+*.log
+Properties/PublishProfiles/*
+*.Development.json
+*.lock.json
+*.ide

samples/databases/wide-world-importers/wwi-app/Controllers/FrontEndController.cs

@@ -0,0 +1,160 @@
+using Belgrade.SqlClient;
+using Microsoft.AspNetCore.Authentication;
+using Microsoft.AspNetCore.Authentication.Cookies;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging;
+using System;
+using System.Collections.Generic;
+using System.Data;
+using System.Security.Claims;
+using System.Threading.Tasks;
+
+namespace wwi_app.Controllers
+{
+    public class FrontEndController : Controller
+    {
+        private readonly ICommand queryService;
+        private readonly ILogger _logger;
+
+        public FrontEndController(ICommand queryService, ILogger<FrontEndController> logger)
+        {
+            this.queryService = queryService;
+            this._logger = logger;
+        }
+
+        [ResponseCache(Duration = 60)]
+        public IActionResult Index() { return View(); }
+
+        [ResponseCache(Duration = 60)]
+        public IActionResult Offers() { return View(); }
+
+        [ResponseCache(Duration = 60)]
+        public IActionResult Contact() { return View(); }
+
+        [Authorize]
+        public IActionResult BuyingGroups() { return View(); }
+
+        [Authorize]
+        public IActionResult Cities() { return View(); }
+
+        [Authorize]
+        public IActionResult Colors() { return View(); }
+
+        [Authorize]
+        public IActionResult Countries() { return View(); }
+
+        [Authorize]
+        public IActionResult CustomerCategories() { return View(); }
+
+        [Authorize]
+        public IActionResult Customers() { return View(); }
+
+        [Authorize]
+        public IActionResult CustomerTransactions() { return View(); }
+
+        [Authorize]
+        public IActionResult Dashboard() { return View(); }
+
+        [Authorize]
+        public IActionResult Deals() { return View(); }
+
+        [Authorize]
+        public IActionResult DeliveryMethods() { return View(); }
+
+        [Authorize]
+        public IActionResult Invoices() { return View(); }
+
+        [Authorize]
+        public IActionResult PackageTypes() { return View(); }
+
+        [Authorize]
+        public IActionResult PaymentMethods() { return View(); }
+
+        [Authorize]
+        public IActionResult PurchaseOrders() { return View(); }
+
+        [Authorize]
+        public IActionResult SalesOrders() { return View(); }
+
+        [Authorize]
+        public IActionResult StateProvinces() { return View(); }
+
+        [Authorize]
+        public IActionResult StockGroups() { return View(); }
+
+        [Authorize]
+        public IActionResult StockItems() { return View(); }
+
+        [Authorize]
+        public IActionResult SupplierCategories() { return View(); }
+
+        [Authorize]
+        public IActionResult Suppliers() { return View(); }
+
+        [Authorize]
+        public IActionResult SupplierTransactions() { return View(); }
+
+        [Authorize]
+        public IActionResult TransactionTypes() { return View(); }
+        
+        public async Task<IActionResult> Login(string username, string password)
+        {
+            if(string.IsNullOrEmpty(username))
+            {
+                return Redirect("~/Index");
+            }
+
+            bool isValidUser = false;
+            var claims = new List<Claim>() { new Claim(ClaimTypes.Email, username) };
+
+            await queryService
+                .Sql("EXEC WebApi.Login @LogonName, @Password")
+                .Param("LogonName", DbType.String, username, 256)
+                .Param("Password", DbType.String, password, 256)
+                .OnError(e => _logger.LogError(e, "Cannot login user:" + username))
+                .Map(r => {
+                    isValidUser = true;
+                    claims.Add(new Claim(ClaimTypes.Sid, Convert.ToString(r["PersonID"])));
+                    claims.Add(new Claim(ClaimTypes.Name, Convert.ToString(r["PreferredName"])));
+                    if (Convert.ToBoolean(r["IsSalesperson"]))
+                        claims.Add(new Claim(ClaimTypes.Role, "Salesperson"));
+                    if (Convert.ToBoolean(r["IsEmployee"]))
+                        claims.Add(new Claim(ClaimTypes.Role, "Employee"));
+                    if (r["Territory"] != null)
+                        claims.Add(new Claim("Territory", r["Territory"].ToString()));
+                }
+            );
+
+            if (isValidUser)
+            {
+                var claimsIdentity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+                await HttpContext.SignInAsync(new ClaimsPrincipal(claimsIdentity));
+                return Redirect("~/Dashboard");
+            } else
+            {
+                _logger.LogWarning("Cannot login user: " + username);
+            }
+            return Redirect("~/Index");
+        }
+
+        public async Task<IActionResult> SignOut()
+        {
+            await HttpContext.SignOutAsync();
+            return Redirect("~/Index");
+        }
+
+        public async Task Search(string name, string tag, double? minPrice, double? maxPrice, int? stockItemGroup, int top)
+        {
+            await queryService
+                .Sql("EXEC WebApi.SearchForStockItems @Name, @Tag, @MinPrice, @MaxPrice, @StockGroupID, @MaximumRowsToReturn")
+                .Param("Name", DbType.String, name, 100)
+                .Param("Tag", DbType.String, tag, 100)
+                .Param("MinPrice", DbType.Decimal, minPrice)
+                .Param("MaxPrice", DbType.Decimal, maxPrice)
+                .Param("StockGroupID", DbType.Int32, stockItemGroup)
+                .Param("MaximumRowsToReturn", DbType.Int32, 20)
+                .Stream(Response.Body, "{\"value\":[]}");
+        }
+    }
+}

samples/databases/wide-world-importers/wwi-app/Controllers/ODataController.cs

@@ -0,0 +1,969 @@
+
+using Belgrade.SqlClient;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using SqlServerRestApi;
+using System;
+using System.IO;
+using System.Security.Claims;
+using System.Threading.Tasks;
+
+namespace wwi_app.Controllers
+{
+    public partial class ODataController : Controller
+    {
+		ICommand sqlCmd = null;
+
+        public ODataController(ICommand sqlCommandService)
+        {
+			this.sqlCmd = sqlCommandService;
+        }
+		
+
+		TableSpec salesorders = new TableSpec("WebApi","SalesOrders", "OrderID,OrderDate,CustomerPurchaseOrderNumber,ExpectedDeliveryDate,PickingCompletedWhen,CustomerID,CustomerName,PhoneNumber,FaxNumber,WebsiteURL,DeliveryLocation,SalesPerson,SalesPersonPhone,SalesPersonEmail");
+
+		[HttpGet]
+        public async Task SalesOrders(int? id)
+        {
+			await this.OData(salesorders, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task SalesOrders(int id, string body)
+        {
+            var SalesOrder = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateSalesOrderFromJson @SalesOrder, @SalesOrderID = {id}, @UserID = @UserID")
+				.Param("SalesOrder", SalesOrder)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task SalesOrders()
+        {
+            var SalesOrders = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertSalesOrdersFromJson @SalesOrders, @UserID = @UserID")
+				.Param("SalesOrders", SalesOrders)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task SalesOrders(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteSalesOrder @SalesOrderID = {id}").Exec();
+        }
+
+
+		TableSpec salesorderlines = new TableSpec("WebApi","SalesOrderLines", "OrderLineID,OrderID,Description,Quantity,UnitPrice,TaxRate,ProductName,Brand,Size,ColorName,PackageTypeName");
+
+		[HttpGet]
+        public async Task SalesOrderLines(int? id)
+        {
+			await this.OData(salesorderlines, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task SalesOrderLines(int id, string body)
+        {
+            var SalesOrderLine = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateSalesOrderLineFromJson @SalesOrderLine, @SalesOrderLineID = {id}, @UserID = @UserID")
+				.Param("SalesOrderLine", SalesOrderLine)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task SalesOrderLines()
+        {
+            var SalesOrderLines = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertSalesOrderLinesFromJson @SalesOrderLines, @UserID = @UserID")
+				.Param("SalesOrderLines", SalesOrderLines)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task SalesOrderLines(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteSalesOrderLine @SalesOrderLineID = {id}").Exec();
+        }
+
+
+		TableSpec purchaseorders = new TableSpec("WebApi","PurchaseOrders", "PurchaseOrderID,OrderDate,ExpectedDeliveryDate,SupplierReference,IsOrderFinalized,DeliveryMethodName,ContactName,ContactPhone,ContactFax,ContactEmail,SupplierID");
+
+		[HttpGet]
+        public async Task PurchaseOrders(int? id)
+        {
+			await this.OData(purchaseorders, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task PurchaseOrders(int id, string body)
+        {
+            var PurchaseOrder = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdatePurchaseOrderFromJson @PurchaseOrder, @PurchaseOrderID = {id}, @UserID = @UserID")
+				.Param("PurchaseOrder", PurchaseOrder)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task PurchaseOrders()
+        {
+            var PurchaseOrders = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertPurchaseOrdersFromJson @PurchaseOrders, @UserID = @UserID")
+				.Param("PurchaseOrders", PurchaseOrders)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task PurchaseOrders(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeletePurchaseOrder @PurchaseOrderID = {id}").Exec();
+        }
+
+
+		TableSpec purchaseorderlines = new TableSpec("WebApi","PurchaseOrderLines", "PurchaseOrderLineID,PurchaseOrderID,Description,IsOrderLineFinalized,ProductName,Brand,Size,ColorName,PackageTypeName,OrderedOuters,ReceivedOuters,ExpectedUnitPricePerOuter");
+
+		[HttpGet]
+        public async Task PurchaseOrderLines(int? id)
+        {
+			await this.OData(purchaseorderlines, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task PurchaseOrderLines(int id, string body)
+        {
+            var PurchaseOrderLine = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdatePurchaseOrderLineFromJson @PurchaseOrderLine, @PurchaseOrderLineID = {id}, @UserID = @UserID")
+				.Param("PurchaseOrderLine", PurchaseOrderLine)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task PurchaseOrderLines()
+        {
+            var PurchaseOrderLines = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertPurchaseOrderLinesFromJson @PurchaseOrderLines, @UserID = @UserID")
+				.Param("PurchaseOrderLines", PurchaseOrderLines)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task PurchaseOrderLines(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeletePurchaseOrderLine @PurchaseOrderLineID = {id}").Exec();
+        }
+
+
+		TableSpec invoices = new TableSpec("WebApi","Invoices", "InvoiceID,InvoiceDate,CustomerPurchaseOrderNumber,IsCreditNote,TotalDryItems,TotalChillerItems,DeliveryRun,RunPosition,ReturnedDeliveryData,ConfirmedDeliveryTime,ConfirmedReceivedBy,CustomerName,SalesPersonName,ContactName,ContactPhone,ContactEmail,SalesPersonEmail,DeliveryMethodName,CustomerID,OrderID,DeliveryMethodID,ContactPersonID,AccountsPersonID,SalespersonPersonID,PackedByPersonID");
+
+		[HttpGet]
+        public async Task Invoices(int? id)
+        {
+			await this.OData(invoices, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task Invoices(int id, string body)
+        {
+            var Invoice = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateInvoiceFromJson @Invoice, @InvoiceID = {id}, @UserID = @UserID")
+				.Param("Invoice", Invoice)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task Invoices()
+        {
+            var Invoices = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertInvoicesFromJson @Invoices, @UserID = @UserID")
+				.Param("Invoices", Invoices)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task Invoices(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteInvoice @InvoiceID = {id}").Exec();
+        }
+
+
+		TableSpec specialdeals = new TableSpec("WebApi","SpecialDeals", "SpecialDealID,DealDescription,StartDate,EndDate,DiscountAmount,DiscountPercentage,UnitPrice,StockItemName,Brand,Size,CustomerName,BuyingGroupName,CustomerCategoryName,StockItemID,CustomerID,BuyingGroupID,CustomerCategoryID,StockGroupID");
+
+		[HttpGet]
+        public async Task SpecialDeals(int? id)
+        {
+			await this.OData(specialdeals, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task SpecialDeals(int id, string body)
+        {
+            var SpecialDeal = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateSpecialDealFromJson @SpecialDeal, @SpecialDealID = {id}, @UserID = @UserID")
+				.Param("SpecialDeal", SpecialDeal)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task SpecialDeals()
+        {
+            var SpecialDeals = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertSpecialDealsFromJson @SpecialDeals, @UserID = @UserID")
+				.Param("SpecialDeals", SpecialDeals)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task SpecialDeals(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteSpecialDeal @SpecialDealID = {id}").Exec();
+        }
+
+
+		TableSpec customertransactions = new TableSpec("WebApi","CustomerTransactions", "CustomerTransactionID,TransactionDate,AmountExcludingTax,TaxAmount,TransactionAmount,OutstandingBalance,FinalizationDate,IsFinalized,CustomerName,TransactionTypeName,InvoiceDate,CustomerPurchaseOrderNumber,PaymentMethodName,CustomerID,TransactionTypeID,InvoiceID,PaymentMethodID");
+
+		[HttpGet]
+        public async Task CustomerTransactions(int? id)
+        {
+			await this.OData(customertransactions, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task CustomerTransactions(int id, string body)
+        {
+            var CustomerTransaction = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateCustomerTransactionFromJson @CustomerTransaction, @CustomerTransactionID = {id}, @UserID = @UserID")
+				.Param("CustomerTransaction", CustomerTransaction)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task CustomerTransactions()
+        {
+            var CustomerTransactions = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertCustomerTransactionsFromJson @CustomerTransactions, @UserID = @UserID")
+				.Param("CustomerTransactions", CustomerTransactions)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task CustomerTransactions(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteCustomerTransaction @CustomerTransactionID = {id}").Exec();
+        }
+
+
+		TableSpec suppliertransactions = new TableSpec("WebApi","SupplierTransactions", "SupplierTransactionID,TransactionDate,AmountExcludingTax,TaxAmount,TransactionAmount,OutstandingBalance,FinalizationDate,IsFinalized,SupplierName,TransactionTypeName,PaymentMethodName,SupplierID,TransactionTypeID,PurchaseOrderID,PaymentMethodID,OrderDate,IsOrderFinalized,ExpectedDeliveryDate,SupplierReference");
+
+		[HttpGet]
+        public async Task SupplierTransactions(int? id)
+        {
+			await this.OData(suppliertransactions, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task SupplierTransactions(int id, string body)
+        {
+            var SupplierTransaction = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateSupplierTransactionFromJson @SupplierTransaction, @SupplierTransactionID = {id}, @UserID = @UserID")
+				.Param("SupplierTransaction", SupplierTransaction)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task SupplierTransactions()
+        {
+            var SupplierTransactions = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertSupplierTransactionsFromJson @SupplierTransactions, @UserID = @UserID")
+				.Param("SupplierTransactions", SupplierTransactions)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task SupplierTransactions(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteSupplierTransaction @SupplierTransactionID = {id}").Exec();
+        }
+
+
+		TableSpec customers = new TableSpec("WebApi","Customers", "CustomerID,CustomerName,AccountOpenedDate,CustomerCategoryName,PrimaryContact,AlternateContact,PhoneNumber,FaxNumber,WebsiteURL,PostalAddressLine1,PostalAddressLine2,PostalCity,PostalCityID,PostalPostalCode,CreditLimit,IsOnCreditHold,IsStatementSent,PaymentDays,RunPosition,StandardDiscountPercentage,BuyingGroupName,DeliveryLocation,BuyingGroupID,BillToCustomerID,CustomerCategoryID,PrimaryContactPersonID,AlternateContactPersonID");
+
+		[HttpGet]
+        public async Task Customers(int? id)
+        {
+			await this.OData(customers, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task Customers(int id, string body)
+        {
+            var Customer = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateCustomerFromJson @Customer, @CustomerID = {id}, @UserID = @UserID")
+				.Param("Customer", Customer)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task Customers()
+        {
+            var Customers = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertCustomersFromJson @Customers, @UserID = @UserID")
+				.Param("Customers", Customers)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task Customers(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteCustomer @CustomerID = {id}").Exec();
+        }
+
+
+		TableSpec suppliers = new TableSpec("WebApi","Suppliers", "SupplierID,SupplierName,SupplierCategoryName,PrimaryContact,AlternateContact,PhoneNumber,FaxNumber,WebsiteURL,SupplierReference,DeliveryLocation,BankAccountName,BankAccountBranch,BankAccountCode,BankAccountNumber,BankInternationalCode,PostalAddressLine1,PostalAddressLine2,PostalPostalCode,PaymentDays");
+
+		[HttpGet]
+        public async Task Suppliers(int? id)
+        {
+			await this.OData(suppliers, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task Suppliers(int id, string body)
+        {
+            var Supplier = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateSupplierFromJson @Supplier, @SupplierID = {id}, @UserID = @UserID")
+				.Param("Supplier", Supplier)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task Suppliers()
+        {
+            var Suppliers = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertSuppliersFromJson @Suppliers, @UserID = @UserID")
+				.Param("Suppliers", Suppliers)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task Suppliers(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteSupplier @SupplierID = {id}").Exec();
+        }
+
+
+		TableSpec countries = new TableSpec("WebApi","Countries", "CountryID,CountryName,FormalName,IsoAlpha3Code,IsoNumericCode,CountryType,LatestRecordedPopulation,Continent,Region,Subregion");
+
+		[HttpGet]
+        public async Task Countries(int? id)
+        {
+			await this.OData(countries, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task Countries(int id, string body)
+        {
+            var Country = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateCountryFromJson @Country, @CountryID = {id}, @UserID = @UserID")
+				.Param("Country", Country)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task Countries()
+        {
+            var Countries = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertCountriesFromJson @Countries, @UserID = @UserID")
+				.Param("Countries", Countries)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task Countries(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteCountry @CountryID = {id}").Exec();
+        }
+
+
+		TableSpec cities = new TableSpec("WebApi","Cities", "CityID,CityName,StateProvinceID,LatestRecordedPopulation");
+
+		[HttpGet]
+        public async Task Cities(int? id)
+        {
+			await this.OData(cities, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task Cities(int id, string body)
+        {
+            var City = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateCityFromJson @City, @CityID = {id}, @UserID = @UserID")
+				.Param("City", City)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task Cities()
+        {
+            var Cities = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertCitiesFromJson @Cities, @UserID = @UserID")
+				.Param("Cities", Cities)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task Cities(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteCity @CityID = {id}").Exec();
+        }
+
+
+		TableSpec stateprovinces = new TableSpec("WebApi","StateProvinces", "StateProvinceID,StateProvinceCode,StateProvinceName,CountryID,SalesTerritory,LatestRecordedPopulation");
+
+		[HttpGet]
+        public async Task StateProvinces(int? id)
+        {
+			await this.OData(stateprovinces, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task StateProvinces(int id, string body)
+        {
+            var StateProvince = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateStateProvinceFromJson @StateProvince, @StateProvinceID = {id}, @UserID = @UserID")
+				.Param("StateProvince", StateProvince)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task StateProvinces()
+        {
+            var StateProvinces = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertStateProvincesFromJson @StateProvinces, @UserID = @UserID")
+				.Param("StateProvinces", StateProvinces)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task StateProvinces(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteStateProvince @StateProvinceID = {id}").Exec();
+        }
+
+
+		TableSpec stockitems = new TableSpec("WebApi","StockItems", "StockItemID,StockItemName,SupplierName,SupplierReference,ColorName,OuterPackage,UnitPackage,Brand,Size,LeadTimeDays,QuantityPerOuter,IsChillerStock,Barcode,TaxRate,UnitPrice,RecommendedRetailPrice,TypicalWeightPerUnit,MarketingComments,InternalComments,CustomFields,QuantityOnHand,BinLocation,LastStocktakeQuantity,LastCostPrice,ReorderLevel,TargetStockLevel,SupplierID,ColorID,UnitPackageID,OuterPackageID");
+
+		[HttpGet]
+        public async Task StockItems(int? id)
+        {
+			await this.OData(stockitems, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task StockItems(int id, string body)
+        {
+            var StockItem = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateStockItemFromJson @StockItem, @StockItemID = {id}, @UserID = @UserID")
+				.Param("StockItem", StockItem)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task StockItems()
+        {
+            var StockItems = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertStockItemsFromJson @StockItems, @UserID = @UserID")
+				.Param("StockItems", StockItems)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task StockItems(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteStockItem @StockItemID = {id}").Exec();
+        }
+
+
+		TableSpec packagetypes = new TableSpec("WebApi","PackageTypes", "PackageTypeID,PackageTypeName");
+
+		[HttpGet]
+        public async Task PackageTypes(int? id)
+        {
+			await this.OData(packagetypes, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task PackageTypes(int id, string body)
+        {
+            var PackageType = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdatePackageTypeFromJson @PackageType, @PackageTypeID = {id}, @UserID = @UserID")
+				.Param("PackageType", PackageType)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task PackageTypes()
+        {
+            var PackageTypes = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertPackageTypesFromJson @PackageTypes, @UserID = @UserID")
+				.Param("PackageTypes", PackageTypes)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task PackageTypes(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeletePackageType @PackageTypeID = {id}").Exec();
+        }
+
+
+		TableSpec colors = new TableSpec("WebApi","Colors", "ColorID,ColorName");
+
+		[HttpGet]
+        public async Task Colors(int? id)
+        {
+			await this.OData(colors, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task Colors(int id, string body)
+        {
+            var Color = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateColorFromJson @Color, @ColorID = {id}, @UserID = @UserID")
+				.Param("Color", Color)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task Colors()
+        {
+            var Colors = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertColorsFromJson @Colors, @UserID = @UserID")
+				.Param("Colors", Colors)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task Colors(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteColor @ColorID = {id}").Exec();
+        }
+
+
+		TableSpec stockgroups = new TableSpec("WebApi","StockGroups", "StockGroupID,StockGroupName");
+
+		[HttpGet]
+        public async Task StockGroups(int? id)
+        {
+			await this.OData(stockgroups, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task StockGroups(int id, string body)
+        {
+            var StockGroup = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateStockGroupFromJson @StockGroup, @StockGroupID = {id}, @UserID = @UserID")
+				.Param("StockGroup", StockGroup)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task StockGroups()
+        {
+            var StockGroups = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertStockGroupsFromJson @StockGroups, @UserID = @UserID")
+				.Param("StockGroups", StockGroups)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task StockGroups(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteStockGroup @StockGroupID = {id}").Exec();
+        }
+
+
+		TableSpec buyinggroups = new TableSpec("WebApi","BuyingGroups", "BuyingGroupID,BuyingGroupName");
+
+		[HttpGet]
+        public async Task BuyingGroups(int? id)
+        {
+			await this.OData(buyinggroups, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task BuyingGroups(int id, string body)
+        {
+            var BuyingGroup = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateBuyingGroupFromJson @BuyingGroup, @BuyingGroupID = {id}, @UserID = @UserID")
+				.Param("BuyingGroup", BuyingGroup)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task BuyingGroups()
+        {
+            var BuyingGroups = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertBuyingGroupsFromJson @BuyingGroups, @UserID = @UserID")
+				.Param("BuyingGroups", BuyingGroups)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task BuyingGroups(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteBuyingGroup @BuyingGroupID = {id}").Exec();
+        }
+
+
+		TableSpec customercategories = new TableSpec("WebApi","CustomerCategories", "CustomerCategoryID,CustomerCategoryName");
+
+		[HttpGet]
+        public async Task CustomerCategories(int? id)
+        {
+			await this.OData(customercategories, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task CustomerCategories(int id, string body)
+        {
+            var CustomerCategory = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateCustomerCategoryFromJson @CustomerCategory, @CustomerCategoryID = {id}, @UserID = @UserID")
+				.Param("CustomerCategory", CustomerCategory)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task CustomerCategories()
+        {
+            var CustomerCategories = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertCustomerCategoriesFromJson @CustomerCategories, @UserID = @UserID")
+				.Param("CustomerCategories", CustomerCategories)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task CustomerCategories(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteCustomerCategory @CustomerCategoryID = {id}").Exec();
+        }
+
+
+		TableSpec suppliercategories = new TableSpec("WebApi","SupplierCategories", "SupplierCategoryID,SupplierCategoryName");
+
+		[HttpGet]
+        public async Task SupplierCategories(int? id)
+        {
+			await this.OData(suppliercategories, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task SupplierCategories(int id, string body)
+        {
+            var SupplierCategory = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateSupplierCategoryFromJson @SupplierCategory, @SupplierCategoryID = {id}, @UserID = @UserID")
+				.Param("SupplierCategory", SupplierCategory)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task SupplierCategories()
+        {
+            var SupplierCategories = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertSupplierCategoriesFromJson @SupplierCategories, @UserID = @UserID")
+				.Param("SupplierCategories", SupplierCategories)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task SupplierCategories(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteSupplierCategory @SupplierCategoryID = {id}").Exec();
+        }
+
+
+		TableSpec transactiontypes = new TableSpec("WebApi","TransactionTypes", "TransactionTypeID,TransactionTypeName");
+
+		[HttpGet]
+        public async Task TransactionTypes(int? id)
+        {
+			await this.OData(transactiontypes, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task TransactionTypes(int id, string body)
+        {
+            var TransactionType = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateTransactionTypeFromJson @TransactionType, @TransactionTypeID = {id}, @UserID = @UserID")
+				.Param("TransactionType", TransactionType)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task TransactionTypes()
+        {
+            var TransactionTypes = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertTransactionTypesFromJson @TransactionTypes, @UserID = @UserID")
+				.Param("TransactionTypes", TransactionTypes)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task TransactionTypes(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteTransactionType @TransactionTypeID = {id}").Exec();
+        }
+
+
+		TableSpec paymentmethods = new TableSpec("WebApi","PaymentMethods", "PaymentMethodID,PaymentMethodName");
+
+		[HttpGet]
+        public async Task PaymentMethods(int? id)
+        {
+			await this.OData(paymentmethods, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task PaymentMethods(int id, string body)
+        {
+            var PaymentMethod = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdatePaymentMethodFromJson @PaymentMethod, @PaymentMethodID = {id}, @UserID = @UserID")
+				.Param("PaymentMethod", PaymentMethod)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task PaymentMethods()
+        {
+            var PaymentMethods = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertPaymentMethodsFromJson @PaymentMethods, @UserID = @UserID")
+				.Param("PaymentMethods", PaymentMethods)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task PaymentMethods(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeletePaymentMethod @PaymentMethodID = {id}").Exec();
+        }
+
+
+		TableSpec deliverymethods = new TableSpec("WebApi","DeliveryMethods", "DeliveryMethodID,DeliveryMethodName");
+
+		[HttpGet]
+        public async Task DeliveryMethods(int? id)
+        {
+			await this.OData(deliverymethods, this.sqlCmd, id: id).Process();
+        }
+		
+        [Authorize]
+		[HttpPut]
+        public async Task DeliveryMethods(int id, string body)
+        {
+            var DeliveryMethod = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.UpdateDeliveryMethodFromJson @DeliveryMethod, @DeliveryMethodID = {id}, @UserID = @UserID")
+				.Param("DeliveryMethod", DeliveryMethod)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task DeliveryMethods()
+        {
+            var DeliveryMethods = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.InsertDeliveryMethodsFromJson @DeliveryMethods, @UserID = @UserID")
+				.Param("DeliveryMethods", DeliveryMethods)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task DeliveryMethods(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.DeleteDeliveryMethod @DeliveryMethodID = {id}").Exec();
+        }
+
+
+
+    }
+}
+

samples/databases/wide-world-importers/wwi-app/Controllers/ODataController.tt

@@ -0,0 +1,88 @@
+<#@ output extension=".cs"#>
+<#@ assembly name="Newtonsoft.Json" #>
+<#@ template language="C#" hostspecific="True" #>
+<#
+	var o = Newtonsoft.Json.Linq.JObject.Parse(System.IO.File.ReadAllText(this.Host.ResolvePath("..") + "\\appsettings.Development.json"));
+	var json = o["ApiModel"].ToString();
+	TableDef[] config = Newtonsoft.Json.JsonConvert.DeserializeObject<TableDef[]>(json);
+#>
+
+using Belgrade.SqlClient;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using SqlServerRestApi;
+using System;
+using System.IO;
+using System.Security.Claims;
+using System.Threading.Tasks;
+
+namespace wwi_app.Controllers
+{
+    public partial class ODataController : Controller
+    {
+		ICommand sqlCmd = null;
+
+        public ODataController(ICommand sqlCommandService)
+        {
+			this.sqlCmd = sqlCommandService;
+        }
+		
+<# foreach(var t in config) {#>
+
+<# if(string.IsNullOrEmpty(t.ODataColumns)) continue; #>
+		TableSpec <#= t.Table.ToLower() #> = new TableSpec("<#= t.Schema #>","<#= t.Table #>", "<#= t.ODataColumns #>");
+
+		[HttpGet]
+        public async Task <#= t.Table #>(int? id)
+        {
+			await this.OData(<#= t.Table.ToLower() #>, this.sqlCmd, id: id).Process();
+        }
+		
+<# if(!t.IsReadOnly) { #>
+        [Authorize]
+		[HttpPut]
+        public async Task <#= t.Table #>(int id, string body)
+        {
+            var <#= t.Table.Replace("ies","y").TrimEnd('s') #> = new StreamReader(Request.Body).ReadToEnd();
+
+			await sqlCmd
+				.Sql($"EXEC WebApi.Update<#= t.Table.Replace("ies","y").TrimEnd('s') #>FromJson @<#= t.Table.Replace("ies","y").TrimEnd('s') #>, @<#= t.Table.Replace("ies","y").TrimEnd('s') #>ID = {id}, @UserID = @UserID")
+				.Param("<#= t.Table.Replace("ies","y").TrimEnd('s') #>", <#= t.Table.Replace("ies","y").TrimEnd('s') #>)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+        [Authorize]
+        [HttpPost]
+        public async Task <#= t.Table #>()
+        {
+            var <#= t.Table #> = new StreamReader(Request.Body).ReadToEnd();
+			await sqlCmd
+				.Sql($"EXEC WebApi.Insert<#= t.Table #>FromJson @<#= t.Table #>, @UserID = @UserID")
+				.Param("<#= t.Table #>", <#= t.Table #>)
+				.Param("UserID", Convert.ToInt32(this.User.FindFirst(ClaimTypes.Sid).Value))
+				.Exec();
+        }
+
+		[Authorize]
+        [HttpDelete]
+        public async Task <#= t.Table #>(int id)
+        {
+            await this.sqlCmd.Sql($"EXEC WebApi.Delete<#= t.Table.Replace("ies","y").TrimEnd('s') #> @<#= t.Table.Replace("ies","y").TrimEnd('s') #>ID = {id}").Exec();
+        }
+<# } #>
+
+<# } #>
+
+
+    }
+}
+
+<#+
+	public class TableDef { 
+		public string Schema {get; set;}
+		public string Table {get; set;}
+		public string ODataColumns {get; set;}
+		public bool IsReadOnly {get; set;}
+	}
+#>

samples/databases/wide-world-importers/wwi-app/Controllers/TableController.cs

@@ -0,0 +1,118 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Belgrade.SqlClient;
+using SqlServerRestApi;
+
+namespace wwi_app.Controllers
+{
+    public class TableController : Controller
+    {
+        IQueryPipe sqlQuery = null;
+
+        public TableController(IQueryPipe sqlQueryService)
+        {
+            this.sqlQuery = sqlQueryService;
+        }
+
+		
+        private static readonly TableSpec salesorders = new TableSpec("WebApi","SalesOrders", "OrderDate,CustomerPurchaseOrderNumber,CustomerName,ExpectedDeliveryDate,PhoneNumber,SalesPerson,OrderID");
+        public async Task SalesOrders()
+        {
+            await this
+				.Table(salesorders, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+				
+        private static readonly TableSpec purchaseorders = new TableSpec("WebApi","PurchaseOrders", "OrderDate,SupplierReference,ExpectedDeliveryDate,ContactName,ContactPhone,IsOrderFinalized,PurchaseOrderID");
+        public async Task PurchaseOrders()
+        {
+            await this
+				.Table(purchaseorders, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+				
+        private static readonly TableSpec invoices = new TableSpec("WebApi","Invoices", "InvoiceDate,CustomerPurchaseOrderNumber,CustomerName,SalesPersonName,ContactName,ContactPhone,SalesPersonEmail,InvoiceID");
+        public async Task Invoices()
+        {
+            await this
+				.Table(invoices, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+				
+        private static readonly TableSpec customertransactions = new TableSpec("WebApi","CustomerTransactions", "TransactionDate,TransactionAmount,IsFinalized,CustomerName,TransactionTypeName,PaymentMethodName,InvoiceDate,CustomerTransactionID");
+        public async Task CustomerTransactions()
+        {
+            await this
+				.Table(customertransactions, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+		
+        private static readonly TableSpec suppliertransactions = new TableSpec("WebApi","SupplierTransactions", "TransactionDate,TransactionAmount,IsFinalized,SupplierName,TransactionTypeName,PaymentMethodName,SupplierTransactionID");
+        public async Task SupplierTransactions()
+        {
+            await this
+				.Table(suppliertransactions, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+		
+        private static readonly TableSpec customers = new TableSpec("WebApi","Customers", "CustomerName,CustomerCategoryName,PhoneNumber,FaxNumber,BuyingGroupName,CustomerID");
+        public async Task Customers()
+        {
+            await this
+				.Table(customers, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+		
+        private static readonly TableSpec suppliers = new TableSpec("WebApi","Suppliers", "SupplierName,SupplierCategoryName,PhoneNumber,FaxNumber,PrimaryContact,SupplierID");
+        public async Task Suppliers()
+        {
+            await this
+				.Table(suppliers, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+		
+        private static readonly TableSpec countries = new TableSpec("WebApi","Countries", "FormalName,Subregion,Region,Continent,LatestRecordedPopulation,CountryID");
+        public async Task Countries()
+        {
+            await this
+				.Table(countries, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+		
+        private static readonly TableSpec cities = new TableSpec("WebApi","Cities", "CityName,LatestRecordedPopulation,StateProvinceName,CityID");
+        public async Task Cities()
+        {
+            await this
+				.Table(cities, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+		
+        private static readonly TableSpec stateprovinces = new TableSpec("WebApi","StateProvinces", "StateProvinceName,StateProvinceCode,SalesTerritory,LatestRecordedPopulation,CountryName,StateProvinceID");
+        public async Task StateProvinces()
+        {
+            await this
+				.Table(stateprovinces, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+		
+        private static readonly TableSpec stockitems = new TableSpec("WebApi","StockItems", "StockItemName,SupplierName,UnitPrice,TaxRate,RecommendedRetailPrice,StockItemID");
+        public async Task StockItems()
+        {
+            await this
+				.Table(stockitems, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+																		    }
+}
+

samples/databases/wide-world-importers/wwi-app/Controllers/TableController.tt

@@ -0,0 +1,42 @@
+<#@ output extension=".cs"#>
+<#@ assembly name="Newtonsoft.Json" #>
+<#@ template language="C#" hostspecific="True" #>
+<#
+	var o = Newtonsoft.Json.Linq.JObject.Parse(System.IO.File.ReadAllText(this.Host.ResolvePath("..") + "\\appsettings.Development.json"));
+	var json = o["ApiModel"].ToString();
+	TableDef[] config = Newtonsoft.Json.JsonConvert.DeserializeObject<TableDef[]>(json);
+#>
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Belgrade.SqlClient;
+using SqlServerRestApi;
+
+namespace wwi_app.Controllers
+{
+    public class TableController : Controller
+    {
+        IQueryPipe sqlQuery = null;
+
+        public TableController(IQueryPipe sqlQueryService)
+        {
+            this.sqlQuery = sqlQueryService;
+        }
+
+<# foreach(var t in config) {#>
+		<# if(string.IsNullOrEmpty(t.TableColumns)) continue; #>
+
+        private static readonly TableSpec <#= t.Table.ToLower() #> = new TableSpec("<#= t.Schema #>","<#= t.Table #>", "<#= t.TableColumns #>");
+        public async Task <#= t.Table #>()
+        {
+            await this
+				.Table(<#= t.Table.ToLower() #>, this.sqlQuery)
+				.OnError(e => { this.Response.Body.Dispose(); throw e; })
+				.Process();
+        }
+<# } #>
+    }
+}
+
+<#+
+	public class TableDef { public string Schema {get; set;} public string Table {get; set;} public string TableColumns {get; set;}}
+#>

samples/databases/wide-world-importers/wwi-app/Program.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Hosting;
+
+namespace App
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            var host = new WebHostBuilder()
+                .UseKestrel()
+                .UseContentRoot(Directory.GetCurrentDirectory())
+                .UseIISIntegration()
+                .UseStartup<Startup>()
+                .Build();
+
+            host.Run();
+        }
+    }
+}

samples/databases/wide-world-importers/wwi-app/Startup.cs

@@ -0,0 +1,115 @@
+using Common.Logging;
+using Microsoft.AspNetCore.Authentication.Cookies;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using SqlServerRestApi;
+using System;
+using System.Linq;
+
+namespace App
+{
+    public class Startup
+    {
+        public Startup(IHostingEnvironment env)
+        {
+            var builder = new ConfigurationBuilder()
+                .SetBasePath(env.ContentRootPath)
+                .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
+                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
+                .AddEnvironmentVariables();
+            Configuration = builder.Build();
+        }
+
+        public IConfigurationRoot Configuration { get; }
+
+        // This method gets called by the runtime. Use this method to add services to the container.
+        public void ConfigureServices(IServiceCollection services)
+        {
+            services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
+            
+            services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
+                        .AddCookie(o => 
+                            {
+                                o.LoginPath = new PathString("/Index");
+                                o.AccessDeniedPath = new PathString("/Index");
+                            }
+                        );
+
+            services
+                .AddSqlClient(Configuration["ConnectionStrings:WWI"],
+                                options =>
+                                {
+                                    options.SessionContext
+                                            .Add("SalesTerritory", GetTerritoryFromSession);
+                                    options.EnableODataExtensions = true;
+                                    
+                                });
+
+            services.AddAuthorization();
+            
+            // Add framework services.
+            services.AddMvc();
+        }
+
+        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
+        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
+        {
+            loggerFactory.AddDebug();
+            loggerFactory.AddConsole();
+
+            if (env.IsDevelopment())
+            {
+                app.UseDeveloperExceptionPage();
+            }
+            else
+            {
+                app.UseExceptionHandler("/Error");
+            }
+
+            app.UseStaticFiles();
+            app.UseAuthentication();
+
+            app.UseMvc(routes =>
+            {
+                routes.MapRoute(
+                    "FrontEnd",
+                    "{action}",
+                    new { controller = "FrontEnd", action = "Index" }
+                );
+
+                routes.MapRoute(
+                    "Api",
+                    "{controller}/{action}"
+                );
+
+                routes.MapRoute(
+                   "odata-single",
+                   "OData/{action}({id})",
+                   new { controller = "OData" }
+                );
+            });
+        }
+
+        /// <summary>
+        /// Utility method that takes Territory from cookie.
+        /// You need to add: services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
+        /// </summary>
+        /// <param name="serviceProvider">IServiceProvider interface.</param>
+        /// <returns>Session value</returns>
+        private string GetTerritoryFromSession(IServiceProvider serviceProvider)
+        {
+            var ctx = serviceProvider.GetServices<IHttpContextAccessor>().First().HttpContext;
+            if (ctx.User.Identity.IsAuthenticated)
+            {
+                var cl = ctx.User.Claims.FirstOrDefault(c => c.Type == "Territory");
+                if (cl != null)
+                    return cl.Value;
+            }
+            return "";
+        }
+    }
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/BuyingGroups.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Buying groups";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Buying groups<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="buyingGroups" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Buying group</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="BuyingGroupID" value="" />
+                    <div class="form-group">
+                        <label for="BuyingGroupName">Name</label>
+                        <input type="text" class="form-control" name="BuyingGroupName" placeholder="Name" autofocus>
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/BuyingGroups.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Cities.cshtml

@@ -0,0 +1,67 @@
+@{
+    ViewData["Title"] = "Cities";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Cities<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+<table id="cities" class="table table-striped table-bordered temporal" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Population</th>
+            <th>State/Province</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">City details</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="CityID" value="" />
+                    <div class="form-group">
+                        <label for="Name">City</label>
+                        <input type="text" class="form-control" name="CityName" placeholder="Name">
+                    </div>
+                    <div class="form-group">
+                        <label for="StateProvinceID">State</label>
+                        <select class="form-control" id="StateProvinceID" name="StateProvinceID" data-text="StateProvinceName"></select>
+                    </div>
+                    <div class="form-group">
+                        <label for="LatestRecordedPopulation" class="field-label">Population</label>
+                        <input type="text" id="LatestRecordedPopulation" name="LatestRecordedPopulation" class="form-control">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/Cities.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Colors.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Colors";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Colors<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="colors" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Color</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="ColorID" value="" />
+                    <div class="form-group">
+                        <label for="ColorName">Name</label>
+                        <input type="text" class="form-control" name="ColorName" placeholder="Name">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/Colors.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Contact.cshtml

@@ -0,0 +1,12 @@
+@{
+    ViewData["Title"] = "Contact";
+}
+<h2>@ViewData["Title"].</h2>
+<h3>@ViewData["Message"]</h3>
+
+<p>If you find any issue or if you have suggestions you can contact SQL Server Github Samples team via email or using GitHub issue tracker.</p>
+<p>You can also fork the project add some enhancements and send us <a href="https://github.com/Microsoft/sql-server-samples/pulls">Pull request</a>.</p>
+<address>
+    <strong>Questions:</strong> <a href="mailto:jovanpop@microsoft.com">Jovan Popovic (MSFT)</a>, <a href="mailto:sqlserversamples@microsoft.com">SqlServer GitHub Admin group</a>, <br />
+    <strong>Report problem:</strong> <a href="https://github.com/Microsoft/sql-server-samples/issues">SQL Server Samples GitHub</a>
+</address>

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Countries.cshtml

@@ -0,0 +1,97 @@
+@{
+    ViewData["Title"] = "Countries";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Countries</h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+@await Html.PartialAsync("_TemporalSlider")
+<table id="countries" class="table table-striped table-bordered temporal" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Area</th>
+            <th>Region</th>
+            <th>Continent</th>
+            <th>Population</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Country Details</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="CountryID" value="" />
+                    <div class="form-group">
+                        <label for="CountryName">Name</label>
+                        <input type="text" class="form-control" name="CountryName" placeholder="Country">
+                    </div>
+                    <div class="form-group">
+                        <label for="FormalName">Formal name</label>
+                        <input type="text" class="form-control" name="FormalName" placeholder="Formal name">
+                    </div>
+                    <div class="form-group">
+                        <label for="Subregion">Area</label>
+                        <input type="text" class="form-control" name="Subregion" placeholder="Area">
+                    </div>
+                    <div class="form-group">
+                        <label for="Region">Region</label>
+                        <select class="form-control" name="Region">
+                            <option value="Africa">Africa</option>
+                            <option value="Asia">Asia</option>
+                            <option value="Americas">Americas</option>
+                            <option value="Europe">Europe</option>
+                            <option value="Oceania">Oceania</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="Continent">Continent</label>
+                        <select class="form-control" name="Continent">
+                            <option value="Africa">Africa</option>
+                            <option value="Asia">Asia</option>
+                            <option value="North America">North America</option>
+                            <option value="Europe">Europe</option>
+                            <option value="South America">South America</option>
+                            <option value="Oceania">Oceania</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="LatestRecordedPopulation" class="field-label">Population</label>
+                        <input type="number" id="LatestRecordedPopulation" name="LatestRecordedPopulation" class="form-control">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/Countries.js"></script>
+    <script src="~/lib/jquery-ui/jquery-ui.js"></script>
+    <script src="~/js/_TimeTravel.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/CustomerCategories.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Customer category";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Customer categories<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="customerCategories" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Customer category</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="CustomerCategoryID" value="" />
+                    <div class="form-group">
+                        <label for="CustomerCategoryName">Name</label>
+                        <input type="text" class="form-control" name="CustomerCategoryName" placeholder="Name">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/CustomerCategories.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/CustomerTransactions.cshtml

@@ -0,0 +1,12 @@
+@{
+    ViewData["Title"] = "Customer transactions";
+}
+
+<h1>Customer transactions</h1>
+@await Html.PartialAsync("_CustomerTransactionsTable")
+@await Html.PartialAsync("_CustomerTransactionsForm")
+
+@section Scripts {
+    <script src="~/js/CustomerTransactions.Table.js"></script>
+    <script src="~/js/CustomerTransactions.Edit.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Customers.cshtml

@@ -0,0 +1,136 @@
+@{
+    ViewData["Title"] = "Customers";
+}
+
+
+<div class="row customer-list">
+    <h1>Customers</h1>
+    <table id="customers" class="table table-striped table-bordered" cellspacing="0">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Category</th>
+                <th>Phone</th>
+                <th>Fax</th>
+                <th>Buying group</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+</div>
+
+<h1 class="customer-edit hidden">Customer details</h1>
+<!-- Nav tabs -->
+<ul class="nav nav-tabs customer-edit hidden" role="tablist">
+    <li role="presentation" class="active"><a href="#customer-panel" aria-controls="home" role="tab" data-toggle="tab">Customer</a></li>
+    <li role="presentation"><a href="#orders-panel" aria-controls="profile" role="tab" data-toggle="tab">Orders</a></li>
+    <li role="presentation"><a href="#transactions-panel" aria-controls="messages" role="tab" data-toggle="tab">Transactions</a></li>
+    <li role="presentation"><a href="#invoices-panel" aria-controls="settings" role="tab" data-toggle="tab">Invoices</a></li>
+</ul>
+
+<div class="tab-content">
+    <div role="tabpanel" id="customer-panel" class="row customer-edit hidden tab-pane active">
+        <!-- Bootstrap form -->
+        <form id="EditCustomerForm" class="form-horizontal">
+            <input type="hidden" id="CustomerID" value="" />
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="form-group">  <label for="CustomerName" class="col-sm-3 control-label">Name</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="CustomerName" placeholder="CustomerName">  </div>  </div>
+                    <div class="form-group">  <label for="AccountOpenedDate" class="col-sm-3 control-label">Opened date</label>  <div class="col-sm-9">  <input type="date" class="form-control" name="AccountOpenedDate" placeholder="AccountOpenedDate">  </div>  </div>
+                    <div class="form-group">
+                        <label for="BuyingGroupID" class="col-sm-3 control-label">Buying group</label>
+                        <div class="col-sm-9">
+                            <select class="form-control" id="BuyingGroupID" name="BuyingGroupID" data-text="BuyingGroupName">
+                                <option value="null">N/A</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="CustomerCategoryID" class="col-sm-3 control-label">Category</label>
+                        <div class="col-sm-9">
+                            <select class="form-control" id="CustomerCategoryID" name="CustomerCategoryID" data-text="CustomerCategoryName">
+                                <option value="null">N/A</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="IsOnCreditHold" class="col-sm-3 control-label">On credit hold</label>
+                        <div class="col-sm-9">
+                            <input type="checkbox" class="form-control" name="IsOnCreditHold" value="true">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="IsStatementSent" class="col-sm-3 control-label">Statement sent</label>
+                        <div class="col-sm-9">
+                            <input type="checkbox" class="form-control" name="IsStatementSent" value="true">
+                       </div>
+                    </div>
+                    <div class="form-group">  <label for="PaymentDays" class="col-sm-3 control-label">Payment days</label>  <div class="col-sm-9">  <input type="number" class="form-control" name="PaymentDays" placeholder="PaymentDays">  </div>  </div>
+                    <div class="form-group">  <label for="CreditLimit" class="col-sm-3 control-label">Credit limit</label>  <div class="col-sm-9">  <input type="number" class="form-control" name="CreditLimit" placeholder="CreditLimit">  </div>  </div>
+                    <div class="form-group">  <label for="StandardDiscountPercentage" class="col-sm-3 control-label">Std. discount %</label>  <div class="col-sm-9">  <input type="number" class="form-control" name="StandardDiscountPercentage" placeholder="StandardDiscountPercentage">  </div>  </div>
+                    <div class="form-group">  <label for="RunPosition" class="col-sm-3 control-label">Run position</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="RunPosition" placeholder="Run position">  </div>  </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="form-group">  <label for="PrimaryContact" class="col-sm-3 control-label">Primary contact</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="PrimaryContact" placeholder="No primary contact" readonly />  </div>  </div>
+                    <div class="form-group">  <label for="AlternateContact" class="col-sm-3 control-label">Alt. contact</label>  <div class="col-sm-9">   <input type="text" class="form-control" name="AlternateContact" placeholder="No alternate contact" readonly />  </div>  </div>
+                    <div class="form-group">  <label for="PhoneNumber" class="col-sm-3 control-label">Phone</label>  <div class="col-sm-9">  <input type="tel" class="form-control" name="PhoneNumber" placeholder="Phone number">  </div>  </div>
+                    <div class="form-group">  <label for="FaxNumber" class="col-sm-3 control-label">Fax</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="FaxNumber" placeholder="Fax number">  </div>  </div>
+                    <div class="form-group">  <label for="WebsiteURL" class="col-sm-3 control-label">Website</label>  <div class="col-sm-9">  <input type="url" class="form-control" name="WebsiteURL" placeholder="Website">  </div>  </div>
+                    <div class="form-group">  <label for="PostalAddressLine1" class="col-sm-3 control-label">Line 1</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="PostalAddressLine1" placeholder="Postal Address Line 1">  </div>  </div>
+                    <div class="form-group">  <label for="PostalAddressLine2" class="col-sm-3 control-label">Line 2</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="PostalAddressLine2" placeholder="Postal Address Line 2">  </div>  </div>
+                    <div class="form-group">  <label for="PostalCityID" class="col-sm-3 control-label">Postal city</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="PostalCity" placeholder="No postal city" readonly />  </div>  </div>
+                    <div class="form-group">  <label for="PostalPostalCode" class="col-sm-3 control-label">Postal code</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="PostalPostalCode" placeholder="PostalPostalCode">  </div>  </div>
+                    <div class="form-group">  <label class="col-sm-3 control-label">Delivery</label>
+                        <div class="col-sm-9 bind-DeliveryLocation bind-properties">  
+                            <span id="CityName"></span>, <span id="Province"></span> (<strong id="Territory"></strong>)
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+        <!-- End Bootstrap form -->
+
+        <div class="form-group pull-right">
+            <button id="cancel-customer-edit" type="button" class="btn btn-link pull-right">Cancel</button>
+            <button id="save-customer" type="button" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+        </div>
+    </div>
+
+    <div role="tabpanel" id="orders-panel" class="row customer-edit hidden tab-pane">
+        <div class="row order-list">
+            @await Html.PartialAsync("_SalesOrdersTable")
+        </div>
+        <div class="row order-edit hidden">
+            <h3>Order</h3>
+            @await Html.PartialAsync("_SalesOrdersForm")
+        </div>
+
+        <div class="row order-edit hidden">
+            <h3>Sales order lines</h3>
+            @await Html.PartialAsync("_SalesOrderLinesTable")
+        </div>
+
+        </div>
+
+        <div role="tabpanel" id="transactions-panel" class="row customer-edit hidden tab-pane">
+            @*<h2>Transactions</h2>*@
+            @await Html.PartialAsync("_CustomerTransactionsTable")
+            @await Html.PartialAsync("_CustomerTransactionsForm")
+        </div>
+
+        <div role="tabpanel" id="invoices-panel" class="row customer-edit hidden tab-pane">
+            @*<h2>Invoices</h2>*@
+            @await Html.PartialAsync("_InvoicesTable")
+            @await Html.PartialAsync("_InvoicesForm")
+        </div>
+    </div>
+    @section Scripts {
+        <script src="~/js/Customers.js"></script>
+        <script src="~/js/Customers.InvoicesTable.js"></script>
+        <script src="~/js/Invoices.Edit.js"></script>
+        <script src="~/js/Customers.CustomerTransactionsTable.js"></script>
+        <script src="~/js/CustomerTransactions.Edit.js"></script>
+        <script src="~/js/Customers.SalesOrdersTable.js"></script>
+        <script src="~/js/SalesOrders.Edit.js"></script>
+    }

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Dashboard.cshtml

@@ -0,0 +1,44 @@
+@{
+    ViewData["Title"] = "Dashboard";
+}
+
+<div class="row">
+    <div id="part4" class="col-md-12">
+        <h2>Number of orders per day in <strong>@User.Claims.FirstOrDefault(c => c.Type == "Territory").Value</strong> region</h2>
+        <svg style="height:300px"> </svg>
+    </div>
+</div>
+<div class="row">
+    <div id="part1" class="col-md-4">
+        <h2>Top customer cities</h2>
+        <table class="table table-striped">
+            <thead>
+                <tr>
+                    <th>City</th>
+                    <th>Number of customers</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="bind-PostalCity">Belgrade</td>
+                    <td class="bind-Total">382</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div id='part2' class="col-md-4">
+        <h2>Sales per color</h2>
+        <svg style="height:300px"> </svg>
+    </div>
+    <div id="part3" class="col-md-4">
+        <h2>Expected income per color</h2>
+        <svg style="height:300px"> </svg>
+    </div>
+</div>
+@section Scripts {
+    <link href="~/lib/nvd3/nv.d3.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
+    <script src="~/lib/nvd3/nv.d3.js"></script>
+    <script src="~/js/Dashboard.js"></script>
+
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Deals.cshtml

@@ -0,0 +1,83 @@
+@{
+    ViewData["Title"] = "Deals";
+}
+<h1>Deals</h1>
+<table id="deals" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Description</th>
+            <th>Start</th>
+            <th>End</th>
+            <th>Discount</th>
+            <th>Unit price</th>
+            <th>Buying group</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Special deal</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm" class="form-horizontal">
+                    <input type="hidden" id="SpecialDealID" value="" />
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">  <label for="DealDescription" class="col-sm-3 control-label">Description</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="DealDescription" placeholder="DealDescription">  </div>  </div>
+                            <div class="form-group">  <label for="StartDate" class="col-sm-3 control-label">Start date</label>  <div class="col-sm-9">  <input type="date" class="form-control" name="StartDate" placeholder="Start date">  </div>  </div>
+                            <div class="form-group">  <label for="EndDate" class="col-sm-3 control-label">End date</label>  <div class="col-sm-9">  <input type="date" class="form-control" name="EndDate" placeholder="End date">  </div>  </div>
+                            <div class="form-group">  <label for="DiscountAmount" class="col-sm-3 control-label">Discount</label>  <div class="col-sm-9">  <input type="number" class="form-control" name="DiscountAmount" placeholder="Discount amount">  </div>  </div>
+                            <div class="form-group">  <label for="DiscountPercentage" class="col-sm-3 control-label">Discount%</label>  <div class="col-sm-9">  <input type="number" class="form-control" name="DiscountPercentage" placeholder="Discount percentage">  </div>  </div>
+                            <div class="form-group">  <label for="UnitPrice" class="col-sm-3 control-label">Unit price</label>  <div class="col-sm-9">  <input type="number" class="form-control" name="UnitPrice" placeholder="N/A">  </div>  </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">  <label for="StockItemName" class="col-sm-3 control-label">Stock item</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="StockItemName" placeholder="N/A" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="Brand" class="col-sm-3 control-label">Brand</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="Brand" placeholder="N/A" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="Size" class="col-sm-3 control-label">Size</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="Size" placeholder="N/A" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="CustomerName" class="col-sm-3 control-label">Customer</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="CustomerName" placeholder="N/A" readonly>  </div>  </div>
+                            <div class="form-group">
+                                <label for="BuyingGroupID" class="col-sm-3 control-label">Buying group</label>
+                                <div class="col-sm-9">
+                                    <select class="form-control" id="BuyingGroupID" name="BuyingGroupID" data-text="BuyingGroupName">
+                                        <option value="null">N/A</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="CustomerCategoryID" class="col-sm-3 control-label">Category</label>
+                                <div class="col-sm-9">
+                                    <select class="form-control" id="CustomerCategoryID" name="CustomerCategoryID" data-text="CustomerCategoryName">
+                                        <option value="null">N/A</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                            <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+                        </div>
+                      </div>
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/Deals.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/DeliveryMethods.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Delivery method";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Delivery methods<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="deliveryMethods" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Delivery method</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="DeliveryMethodID" value="" />
+                    <div class="form-group">
+                        <label for="DeliveryMethodName">Name</label>
+                        <input type="text" class="form-control" name="DeliveryMethodName" placeholder="Name">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="button" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/DeliveryMethods.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Index.cshtml

@@ -0,0 +1,105 @@
+@{
+    ViewData["Title"] = "Home Page";
+}
+
+<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
+    <ol class="carousel-indicators">
+        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+        <li data-target="#myCarousel" data-slide-to="1"></li>
+        <li data-target="#myCarousel" data-slide-to="2"></li>
+        <li data-target="#myCarousel" data-slide-to="3"></li>
+    </ol>
+    <div class="carousel-inner" role="listbox">
+        <div class="item active">
+            <img src="~/images/banner1.svg" alt="ASP.NET" class="img-responsive" />
+            <div class="carousel-caption" role="option">
+                <p>
+                    Cross-platform - you can build ASP.NET  Core apps that can run anywhere, and also you can install SQL Server 2017+ on Windows, Linux, and Docker containers.
+                    <a class="btn btn-default" href="https://www.microsoft.com/sql-server/sql-server-2017">
+                        Learn More
+                    </a>
+                </p>
+            </div>
+        </div>
+        <div class="item">
+            <img src="~/images/banner2.svg" alt="Visual Studio" class="img-responsive" />
+            <div class="carousel-caption" role="option">
+                <p>
+                    JSON features in SQL Server 2016+ enable you to easily integrate front-end technologies with the relational database.
+                    <a class="btn btn-default" href="https://www.youtube.com/watch?v=0m6GXF3-5WI">
+                        Learn More
+                    </a>
+                </p>
+            </div>
+        </div>
+        <div class="item">
+            <img src="~/images/banner3.svg" alt="Package Management" class="img-responsive" />
+            <div class="carousel-caption" role="option">
+                <p>
+                    Explore new features such as JSON support, Row-level security, and Dynamic Data masking.
+                    <a class="btn btn-default" href="https://docs.microsoft.com/en-us/sql/sql-server/what-s-new-in-sql-server-2016">
+                        Learn More
+                    </a>
+                </p>
+            </div>
+        </div>
+        <div class="item">
+            <img src="~/images/banner4.svg" alt="Microsoft Azure" class="img-responsive" />
+            <div class="carousel-caption" role="option">
+                <p>
+                    Deploy to Microsoft's Azure cloud platform.
+                    <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409">
+                        Learn More
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+    </a>
+</div>
+
+<div class="row">
+    <div class="col-md-4">
+        <h2>Application uses</h2>
+        <ul>
+            <li><a href="https://docs.microsoft.com/aspnet/core/mvc/overview">ASP.NET MVC Core</a> in web server layer.</li>
+            <li><a href="https://www.microsoft.com/sql-server/sql-server-2016">SQL Server 2016</a>+ or <a href="https://azure.microsoft.com/services/sql-database">Azure SQL Database</a> in database layer.</li>
+            <li>REST Services including <a href="http://www.odata.org/">OData</a> services to expose database information.</li>
+            <li>
+                <a href="https://jquery.com/">JQuery</a> and <a href="https://jqueryui.com/">JQuery UI</a>
+                libraries and JQuery plugins (<a href="https://datatables.net/">JQuery DataTables</a>, <a href="https://github.com/marioizquierdo/jquery.serializeJSON">serializeJSON</a>, and <a href="https://jocapc.github.io/jquery-view-engine/">JQuery View engine</a>) to build client interface.
+            </li>
+            <li>Theming using <a href="https://go.microsoft.com/fwlink/?LinkID=398939">Bootstrap</a></li>
+            <li>Reporing using <a href="https://d3js.org/">D3</a> and <a href="http://nvd3.org">NVD3</a> libraries.</li>
+        </ul>
+    </div>
+    <div class="col-md-4">
+        <h2>Access the application</h2>
+        <ul>
+            <li>Browse products on <a href="/Products">Product offers</a> page.</li>
+            <li>Login to manage data using one of the following emails:
+                <ul>
+                    <li>sophiah@wideworldimporters.com - Southeast sales region</li>
+                    <li>anthonyg@wideworldimporters.com - Mideast sales region</li>
+                    <li>hudsono@wideworldimporters.com - New England sales region</li>
+
+                </ul>
+            </li>
+            <li>Password is not checked!</li>
+        </ul>
+    </div>
+    <div class="col-md-4">
+        <h2>Run &amp; Deploy</h2>
+        <ul>
+            <li><a href="https://go.microsoft.com/fwlink/?LinkID=517851">Run your app</a></li>
+            <li><a href="https://go.microsoft.com/fwlink/?LinkID=398609">Publish to Microsoft Azure Web Apps</a></li>
+        </ul>
+    </div>
+</div>

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Invoices.cshtml

@@ -0,0 +1,12 @@
+@{
+    ViewData["Title"] = "Invoices";
+}
+
+<h1>Invoices</h1>
+@await Html.PartialAsync("_InvoicesTable")
+@await Html.PartialAsync("_InvoicesForm")
+
+@section Scripts {
+    <script src="~/js/Invoices.Table.js"></script>
+    <script src="~/js/Invoices.Edit.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Offers.cshtml

@@ -0,0 +1,124 @@
+@{
+    ViewData["Title"] = "Products";
+}
+<!-- Page Content -->
+<div class="container">
+    <div class="row">
+        <!-- Blog Post Content Column -->
+        <div class="col-lg-8">
+            <!-- Blog Post -->
+            <!-- Title -->
+            <h1>Product offer</h1>
+            <!-- Date/Time -->
+            <p><span class="glyphicon glyphicon-time"></span> @DateTime.Now</p>
+            <hr>
+            <div class="product-list">
+            </div>
+            <template id="tmpl-product-item">
+                <div class="media product-item">
+                    <div class="media-body">
+                        <h4 class="media-heading bind-StockItemName"></h4>
+                        <span class="bind-MarketingComments"></span> Price: <span class="bind-UnitPrice"></span>$ Tax: <span class="bind-TaxRate"></span>$
+                        Color: <span class="bind-ColorName"></span>  Size: <span class="bind-Size"></span> <span class="bind-Brand"></span>
+                    </div>
+                 </div>
+            </template>
+        </div>
+        <!-- Blog Sidebar Widgets Column -->
+        <div class="col-md-4 rhs-search">
+            <!-- Blog Search Well -->
+            <div class="well form-horizontal">
+                <h4>Product search</h4>
+                <form id="refineSearch" class="form-horizontal">
+                    <div class="form-group">
+                        <label for="name" class="col-sm-2 control-label">Name</label>
+                        <input type="text" name="name" class="form-control col-sm-10" aria-label="Min price" placeholder="name">
+                    </div>
+                    <div class="form-group">
+                        <label for="minPrice" class="col-sm-2 control-label">Min</label>
+                        <div class="input-group col-sm-10">
+                            <input type="number" name="minPrice" class="form-control" aria-label="Min price" placeholder="price">
+                            <span class="input-group-addon">$</span>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="maxPrice" class="col-sm-2 control-label">Max</label>
+                        <div class="input-group col-sm-10">
+                            <input type="number" name="maxPrice" class="form-control" aria-label="Max price" placeholder="price">
+                            <span class="input-group-addon">$</span>
+                        </div>
+                    </div>
+                </form>
+                <h4 id="category-filter-h">Filter by categories</h4>
+                <template id="tmpl-product-tags">
+                    <li>
+                        <button class="btn btn-link bind-Tag select-tag" type="button">
+                            <span class="bind-Tag select-tag"></span>
+                            <span class="badge bind-Items select-tag"></span>
+                        </button>
+                    </li>
+                </template>
+                <div class="row category-filter">
+                    <div class="col-lg-6">
+                        <ul class="list-unstyled product-tags product-tags-l">
+                        </ul>
+                    </div>
+                    <div class="col-lg-6">
+                        <ul class="list-unstyled product-tags product-tags-r">
+                        </ul>
+                    </div>
+                </div>
+                <!-- /.row -->
+                <div class="row">
+                    <button type="button" id="search" class="btn btn-primary pull-right">Refine search</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- /.row -->
+</div>
+<!-- /.container -->
+
+@section Scripts {
+<script>
+    $(_ => {
+
+        $.ajax("/Search", { dataType: "json" }).then( refresh );
+
+        function refresh(data) {
+            $(".product-list").html($("#tmpl-product-item").html());
+            $(".product-tags").html($("#tmpl-product-tags").html());
+            $(".product-list>.product-item").view(data.value);
+            if (data.tags.length >= 1) {
+                $(".product-tags-l").show();
+                $("#category-filter-h").show();
+                $(".product-tags-l>li").view(data.tags.slice(0, data.tags.length / 2));
+            } else {
+                $("#category-filter-h").hide();
+                $(".product-tags-l").hide();
+            }
+            if (data.tags.length >= 2) {
+                $(".product-tags-r").show();
+                $(".product-tags-r>li").view(data.tags.slice(data.tags.length / 2 + 1, data.tags.length));
+            } else {
+                $(".product-tags-r").hide();
+            } 
+
+        }
+
+        var params = {};
+
+        $("button#search")
+            .on("click", e => {
+                params = $.extend(params, $("#refineSearch").serializeJSON());
+                $.ajax("/Search?" + $.param(params), { dataType: "json" }).then(refresh);
+            });
+
+        $(".category-filter")
+            .on("click", ".select-tag", e => {
+                params = $.extend(params, { tag: e.target.value || $(e.target).parent().attr("value") });
+                $.ajax("/Search?" + $.param(params), { dataType: "json" }).then(refresh);
+            });
+    });
+</script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/PackageTypes.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Package type";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Package types<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="packageTypes" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Package type</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="PackageTypeID" value="" />
+                    <div class="form-group">
+                        <label for="PackageTypeName">Name</label>
+                        <input type="text" class="form-control" name="PackageTypeName" placeholder="Name">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/PackageTypes.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/PaymentMethods.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Payment method";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Payment methods<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="paymentMethods" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Payment method</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="PaymentMethodID" value="" />
+                    <div class="form-group">
+                        <label for="PaymentMethodName">Name</label>
+                        <input type="text" class="form-control" name="PaymentMethodName" placeholder="Name">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/PaymentMethods.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/PurchaseOrders.cshtml

@@ -0,0 +1,19 @@
+@{
+    ViewData["Title"] = "Purchase orders";
+}
+
+<div class="row order-list">
+    <h1>Purchase orders</h1>
+    @await Html.PartialAsync("_PurchaseOrdersTable")
+</div>
+
+<div class="row order-edit hidden">
+    <h1>Order details</h1>
+    @await Html.PartialAsync("_PurchaseOrdersEdit")
+</div>
+
+@section Scripts {
+    <script src="~/js/PurchaseOrders.Table.js"></script>
+    <script src="~/js/PurchaseOrders.Edit.js"></script>
+    <script src="~/js/PurchaseOrders.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/SalesOrders.cshtml

@@ -0,0 +1,23 @@
+@{
+    ViewData["Title"] = "Sales orders";
+}
+
+<div class="row order-list">
+    <h1>Sales orders</h1>
+    @await Html.PartialAsync("_SalesOrdersTable")
+</div>
+<div class="row order-edit hidden">
+    <h1>Sales order details</h1>
+    @await Html.PartialAsync("_SalesOrdersForm")
+</div>
+<div class="row order-edit hidden">
+    <h2>Order lines</h2>
+    @await Html.PartialAsync("_SalesOrderLinesTable")
+</div>
+@section Scripts {
+    <script src="~/js/SalesOrders.js"></script>
+    <script src="~/js/SalesOrders.Table.js"></script>
+    <script src="~/js/SalesOrders.Edit.js"></script>
+}
+
+

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/StateProvinces.cshtml

@@ -0,0 +1,76 @@
+@{
+    ViewData["Title"] = "StateProvinces";
+}
+<div class="clearfix">
+    <h1 class="pull-left">States</h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+<table id="stateProvinces" class="table table-striped table-bordered temporal" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Code</th>
+            <th>Territory</th>
+            <th>Population</th>
+            <th>Country</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">State Details</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="StateProvinceID" value="" />
+                    <div class="form-group">
+                        <label for="StateProvinceName">Name</label>
+                        <input type="text" class="form-control" name="StateProvinceName" placeholder="State">
+                    </div>
+                    <div class="form-group">
+                        <label for="StateProvinceCode">Code</label>
+                        <input type="text" class="form-control" name="StateProvinceCode" placeholder="Code">
+                    </div>
+                    <div class="form-group">
+                        <label for="SalesTerritory">Code</label>
+                        <input type="text" class="form-control" name="SalesTerritory" placeholder="Sales territory">
+                    </div>
+                    <div class="form-group">
+                        <label for="CountryID">Country</label>
+                        <select class="form-control" id="CountryID" name="CountryID" data-text="CountryName"></select>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="LatestRecordedPopulation" class="field-label">Population</label>
+                        <input type="number" id="LatestRecordedPopulation" name="LatestRecordedPopulation" class="form-control">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/StateProvinces.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/StockGroups.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Stock groups";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Stock groups<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="stockGroups" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Stock group</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="StockGroupID" value="" />
+                    <div class="form-group">
+                        <label for="StockGroupName">Name</label>
+                        <input type="text" class="form-control" name="StockGroupName" placeholder="Name">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/StockGroups.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/StockItems.cshtml

@@ -0,0 +1,17 @@
+@{
+    ViewData["Title"] = "Stock items";
+}
+<h1>Stock items</h1>
+@await Html.PartialAsync("_TemporalSlider")
+<div class="row">
+    @await Html.PartialAsync("_StockItemsTable")
+    @await Html.PartialAsync("_StockItemsForm")
+</div>
+@section Scripts {
+
+    <script src="~/lib/jquery-ui/jquery-ui.js"></script>
+    <script src="~/js/StockItems.js"></script>
+    <script src="~/js/StockItems.Table.js"></script>
+    <script src="~/js/_TimeTravel.js"></script>
+    <script src="~/js/StockItems.Edit.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/SupplierCategories.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Supplier category";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Supplier categories<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="supplierCategories" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Supplier category</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="SupplierCategoryID" value="" />
+                    <div class="form-group">
+                        <label for="SupplierCategoryName">Name</label>
+                        <input type="text" class="form-control" name="SupplierCategoryName" placeholder="Name">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/SupplierCategories.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/SupplierTransactions.cshtml

@@ -0,0 +1,13 @@
+@{
+    ViewData["Title"] = "Supplier transaction";
+}
+
+<h1>Supplier transactions</h1>
+@await Html.PartialAsync("_SupplierTransactionsTable")
+@await Html.PartialAsync("_SupplierTransactionsForm")
+
+@section Scripts {
+    <script src="~/js/SupplierTransactions.Table.js"></script>
+    <script src="~/js/SupplierTransactions.Edit.js"></script>
+}
+

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/Suppliers.cshtml

@@ -0,0 +1,141 @@
+@{
+    ViewData["Title"] = "Suppliers";
+}
+
+<div class="row supplier-list">
+    <h1>Suppliers</h1>
+    <table id="suppliers" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Category</th>
+                <th>Phone</th>
+                <th>Fax</th>
+                <th>Contact</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+</div>
+
+<h1 class="supplier-edit hidden">Supplier details</h1>
+<!-- Nav tabs -->
+<ul class="nav nav-tabs supplier-edit hidden" role="tablist">
+    <li role="presentation" class="active"><a href="#supplier-panel" aria-controls="home" role="tab" data-toggle="tab">Supplier</a></li>
+    <li role="presentation"><a href="#orders-panel" aria-controls="orders" role="tab" data-toggle="tab">Orders</a></li>
+    <li role="presentation"><a href="#transactions-panel" aria-controls="transactions" role="tab" data-toggle="tab">Transactions</a></li>
+    <li role="presentation"><a href="#stock-items-panel" aria-controls="stockitems" role="tab" data-toggle="tab">Stock items</a></li>
+</ul>
+<div class="tab-content">
+    <div role="tabpanel" id="supplier-panel" class="row supplier-edit hidden tab-pane active">
+        <!-- Bootstrap form -->
+        <form id="EditForm" class="form-horizontal">
+            <input type="hidden" id="SupplierID" value="" />
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="SupplierName" class="col-sm-4 control-label">Name</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="SupplierName" placeholder="Supplier name">  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="SupplierReference" class="col-sm-4 control-label">Reference</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="SupplierReference" placeholder="Supplier reference">  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="SupplierCategoryID" class="col-sm-4 control-label">Category</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" id="SupplierCategoryID" name="SupplierCategoryID" data-text="SupplierCategoryName">
+                                <option value="null">(Not set)</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="PrimaryContact" class="col-sm-4 control-label">Primary contact</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="PrimaryContact" readonly>  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="AlternateContact" class="col-sm-4 control-label">Alternate contact</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="AlternateContact" readonly>  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="PaymentDays" class="col-sm-4 control-label">Payment days</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" name="PaymentDays" placeholder="Payment days">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label for="PhoneNumber" class="col-sm-4 control-label">Phone number</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="PhoneNumber" placeholder="Phone">  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="FaxNumber" class="col-sm-4 control-label">Fax number</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="FaxNumber" placeholder="Fax">  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="WebsiteURL" class="col-sm-4 control-label">WebsiteURL</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="WebsiteURL" placeholder="Website URL">  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="PostalAddressLine1" class="col-sm-4 control-label">Postal address line 1</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="PostalAddressLine1" placeholder="Postal address line 1">  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="PostalAddressLine2" class="col-sm-4 control-label">Postal address line 2</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="PostalAddressLine2" placeholder="Postal address line 2">  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="PostalPostalCode" class="col-sm-4 control-label">Postal code</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="PostalPostalCode" placeholder="Postal code">  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="CityName" class="col-sm-4 control-label">City</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="CityName" placeholder="City" readonly>  </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="StateProvinceName" class="col-sm-4 control-label">State or Province name</label>
+                        <div class="col-sm-8">  <input type="text" class="form-control" name="StateProvinceName" readonly>  </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+        <!-- End Bootstrap form -->
+
+        <div class="form-group">
+            <button id="cancel-supplier-edit" type="button" class="btn btn-link pull-right">Cancel</button>
+            <button id="save-supplier" type="button" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+        </div>
+    </div>
+
+    <div role="tabpanel" id="orders-panel" class="row supplier-edit hidden tab-pane">
+
+        <div class="row order-list">
+            @await Html.PartialAsync("_PurchaseOrdersTable")
+        </div>
+        <div class="row order-edit hidden">
+            <h3>Order</h3>
+            @await Html.PartialAsync("_PurchaseOrdersEdit")
+        </div>
+    </div>
+
+    <div role="tabpanel" id="transactions-panel" class="row supplier-edit hidden tab-pane">
+        @await Html.PartialAsync("_SupplierTransactionsTable")
+        @await Html.PartialAsync("_SupplierTransactionsForm")
+    </div>
+
+    <div role="tabpanel" id="stock-items-panel" class="row supplier-edit hidden tab-pane">
+        @await Html.PartialAsync("_StockItemsTable")
+        @await Html.PartialAsync("_StockItemsForm")
+    </div>
+</div>
+    @section Scripts {
+        <script src="~/js/Suppliers.js"></script>
+        <script src="~/js/Suppliers.PurchaseOrderTable.js"></script>
+        <script src="~/js/PurchaseOrders.Edit.js"></script>
+        <script src="~/js/Suppliers.SupplierTransactionsTable.js"></script>
+        <script src="~/js/SupplierTransactions.Edit.js"></script>
+        <script src="~/js/Suppliers.StockItemsTable.js"></script>
+        <script src="~/js/StockItems.Edit.js"></script>
+    }

samples/databases/wide-world-importers/wwi-app/Views/FrontEnd/TransactionTypes.cshtml

@@ -0,0 +1,59 @@
+@{
+    ViewData["Title"] = "Transaction type";
+}
+
+<div class="clearfix">
+    <h1 class="pull-left">Transaction types<span id="snapshot"></span></h1>
+    <button id="add" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modalDialog">
+        <span class="glyphicon glyphicon-plus"></span> Add
+    </button>
+</div>
+
+<table id="transactionTypes" class="table table-striped table-bordered" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalDialogLabel">Transaction type</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditForm">
+                    <input type="hidden" id="TransactionTypeID" value="" />
+                    <div class="form-group">
+                        <label for="TransactionTypeName">Name</label>
+                        <input type="text" class="form-control" name="TransactionTypeName" placeholder="Name">
+                    </div>
+                    <!-- Allow form submission with keyboard without duplicating the dialog button -->
+                    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
+
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+
+@section Scripts {
+    <script src="~/js/TransactionTypes.js"></script>
+}

samples/databases/wide-world-importers/wwi-app/Views/Shared/Error.cshtml

@@ -0,0 +1,14 @@
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>Development environment should not be enabled in deployed applications</strong>, as it can result in sensitive information from exceptions being displayed to end users. For local debugging, development environment can be enabled by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>, and restarting the application.
+</p>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_CustomerTransactionsForm.cshtml

@@ -0,0 +1,69 @@
+
+<!-- Bootstrap Modal -->
+<div class="modal fade in" data-show="false" id="modalCustomerTransactionDialog" tabindex="-1" role="dialog" aria-labelledby="modalCustomerTransactionDialogLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalCustomerTransactionDialogLabel">Customer transaction</h4>
+            </div>
+            <div class="modal-body">
+                <!-- Bootstrap form -->
+                <form id="EditCustomerTransactionForm" class="form-horizontal">
+                    <input type="hidden" id="CustomerTransactionID" value="" />
+                    <div class="form-group">
+                        <label for="TransactionDate" class="col-sm-3 control-label">Date</label>
+                        <div class="col-sm-9">
+                            <input type="date" class="form-control" name="TransactionDate" placeholder="Transaction date">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="TransactionAmount" class="col-sm-3 control-label">Transaction amount</label>
+                        <div class="col-sm-9">
+                            <input type="number" class="form-control" name="TransactionAmount">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="InvoiceDate" class="col-sm-3 control-label">Invoice date</label>
+                        <div class="col-sm-9">
+                            <input type="date" class="form-control" name="InvoiceDate" readonly>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="IsFinalized" class="col-sm-3 control-label">Finalized</label>
+                        <div class="col-sm-9">
+                            <input type="checkbox" class="form-control" name="IsFinalized" disabled readonly>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="CustomerName" class="col-sm-3 control-label">Customer</label>
+                        <div class="col-sm-9">
+                            <input type="text" class="form-control" name="CustomerName" readonly>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="TransactionTypeName" class="col-sm-3 control-label">Transaction type</label>
+                        <div class="col-sm-9">
+                            <select class="form-control" id="TransactionTypeID" name="TransactionTypeID" data-text="TransactionTypeName"></select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="PaymentMethodID" class="col-sm-3 control-label">Payment method</label>
+                        <div class="col-sm-9">
+                            <select class="form-control" id="PaymentMethodID" name="PaymentMethodID" data-text="PaymentMethodName">
+                                <option value="null">N/A</option>
+                            </select>
+                        </div>
+                    </div>
+                </form>
+                <!-- End Bootstrap form -->
+            </div>
+            <div class="modal-footer">
+                <button id="save-customer-transaction" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->
+

samples/databases/wide-world-importers/wwi-app/Views/Shared/_CustomerTransactionsTable.cshtml

@@ -0,0 +1,14 @@
+<table id="customerTransactions" class="table table-striped table-bordered full-width" style="width:100%" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Amount</th>
+            <th>Finalized</th>
+            <th>Customer</th>
+            <th>Type</th>
+            <th>Payment method</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_InvoicesForm.cshtml

@@ -0,0 +1,54 @@
+
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalInvoiceDialog" tabindex="-1" role="dialog" aria-labelledby="modalInvoiceDialogLabel">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalInvoiceDialogLabel">Invoice</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditInvoiceForm" class="form-horizontal">
+                    <input type="hidden" id="InvoiceID" value="" />
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">  <label for="InvoiceDate" class="col-sm-4 control-label">Invoice date</label>  <div class="col-sm-8">  <input type="date" class="form-control" name="InvoiceDate" placeholder="Invoice date">  </div>  </div>
+                            <div class="form-group">  <label for="CustomerPurchaseOrderNumber" class="col-sm-4 control-label">Order number</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="CustomerPurchaseOrderNumber" placeholder="Customer purchase order number">  </div>  </div>
+                            <div class="form-group">  <label for="CustomerName" class="col-sm-4 control-label">Customer</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="CustomerName" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="IsCreditNote" class="col-sm-4 control-label">Credit note</label>  <div class="col-sm-8">  <input type="checkbox" class="form-control" name="IsCreditNote" placeholder="Is credit note" value="true">  </div>  </div>
+                            <div class="form-group">  <label for="TotalDryItems" class="col-sm-4 control-label">Dry items</label>  <div class="col-sm-8">  <input type="number" class="form-control" name="TotalDryItems" placeholder="Total dry items">  </div>  </div>
+                            <div class="form-group">  <label for="TotalChillerItems" class="col-sm-4 control-label">Chiller items</label>  <div class="col-sm-8">  <input type="number" class="form-control" name="TotalChillerItems" placeholder="TotalChillerItems"> </div>  </div>
+                            <div class="form-group">  <label for="DeliveryRun" class="col-sm-4 control-label">Delivery run</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="DeliveryRun" placeholder="Delivery run">  </div>  </div>
+                            <div class="form-group">  <label for="RunPosition" class="col-sm-4 control-label">Run position</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="RunPosition" placeholder="Run position">  </div>  </div>
+                            
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">  <label for="SalesPersonName" class="col-sm-4 control-label">Salesperson</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="SalesPersonName" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="SalesPersonEmail" class="col-sm-4 control-label">Email</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="SalesPersonEmail" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="ContactName" class="col-sm-4 control-label">Contact</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="ContactName" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="ContactPhone" class="col-sm-4 control-label">Contact phone</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="ContactPhone" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="ContactEmail" class="col-sm-4 control-label">Contact email</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="ContactEmail" readonly>  </div>  </div>
+                            <div class="form-group">
+                                <label for="DeliveryMethodID" class="col-sm-4 control-label">Delivery method</label>
+                                <div class="col-sm-8">
+                                <select class="form-control" id="DeliveryMethodID" name="DeliveryMethodID" data-text="DeliveryMethodName"></select>
+                                </div>
+                            </div>
+                            <div class="form-group">  <label for="ConfirmedDeliveryTime" class="col-sm-4 control-label">Delivery time</label>  <div class="col-sm-8">  <input type="datetime" class="form-control" name="ConfirmedDeliveryTime" readonly>  </div>  </div>
+                            <div class="form-group">  <label for="ConfirmedReceivedBy" class="col-sm-4 control-label">Received by</label>  <div class="col-sm-8">  <input type="text" class="form-control" name="ConfirmedReceivedBy" readonly>  </div>  </div>
+                        </div>
+                    </div>
+                </form>
+                <!-- End Bootstrap form -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="save-invoice" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel-invoice-edit" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->

samples/databases/wide-world-importers/wwi-app/Views/Shared/_InvoicesTable.cshtml

@@ -0,0 +1,14 @@
+<table id="invoices" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Order number</th>
+            <th>Customer</th>
+            <th>Salesperson</th>
+            <th>Contact</th>
+            <th>Contact phone</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_Layout.cshtml

@@ -0,0 +1,166 @@
+@using Microsoft.AspNetCore.Authorization
+@inject IAuthorizationService AuthorizationService
+<!DOCTYPE html5>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@ViewData["Title"] - Wide World Importers</title>
+    <environment names="Development">
+        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
+        <link rel="stylesheet" href="~/lib/datatables/media/css/dataTables.bootstrap.css" />
+        <link href="~/lib/toastr/toastr.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="~/css/site.css" />
+    </environment>
+    <environment names="Staging,Production">
+        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
+              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
+              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
+        <link rel="stylesheet" href="~/lib/datatables/media/css/dataTables.bootstrap.css" />
+        <link href="~/lib/toastr/toastr.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
+    </environment>
+</head>
+<body>
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                @if (User.Identity.IsAuthenticated)
+                {
+                        <a href="~/Dashboard" class="navbar-brand">Wide World Importers</a>
+                }
+                else
+                {
+                        <a href="~/Index" class="navbar-brand">Wide World Importers</a>
+                }
+            </div>
+            <div class="navbar-collapse collapse">
+                <ul class="nav navbar-nav">
+                    <li class="dropdown">
+                        <a href="~/Offers">Offers</a>
+                        </li>
+                        @if (User.Identity.IsAuthenticated)
+                        {
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sales <span class="caret"></span></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="/SalesOrders">Orders</a></li>
+                            <li><a href="/Invoices">Invoices</a></li>
+                            <li><a href="/CustomerTransactions">Transactions</a></li>
+                            <li role="separator" class="divider"></li>
+                            <li><a href="/Customers">Customers</a></li>
+                            <li><a href="/Deals">Deals</a></li>
+                            <li role="separator" class="divider"></li>
+                            <li><a href="/BuyingGroups">Buying groups</a></li>
+                            <li><a href="/CustomerCategories">Customer categories</a></li>
+                            <li><a href="/TransactionTypes">Transaction types</a></li>
+                        </ul>
+                    </li>
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Purchasing <span class="caret"></span></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="/PurchaseOrders">Orders</a></li>
+                            <li><a href="/SupplierTransactions">Transactions</a></li>
+                            <li role="separator" class="divider"></li>
+                            <li><a href="/Suppliers">Suppliers</a></li>
+                            <li role="separator" class="divider"></li>
+                            <li><a href="/SupplierCategories">Supplier categories</a></li>
+                            <li><a href="/TransactionTypes">Transaction types</a></li>
+                        </ul>
+                    </li>
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Warehouse <span class="caret"></span></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="/StockItems">Stock items</a></li>
+                            <li role="separator" class="divider"></li>
+                            <li><a href="/StockGroups">Stock groups</a></li>
+                            <li><a href="/Colors">Colors</a></li>
+                            <li><a href="/PackageTypes">Package types</a></li>
+                        </ul>
+                    </li>
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Locations <span class="caret"></span></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="/Countries">Countries</a></li>
+                            <li><a href="/StateProvinces">States</a></li>
+                            <li><a href="/Cities">Cities</a></li>
+                        </ul>
+                    </li>
+                    }
+                    <li><a href="~/Contact">Contact</a></li>
+                </ul>                
+                @if (User.Identity.IsAuthenticated)
+                {
+                    <p class="navbar-text navbar-right">Hello @User.Identity.Name   
+                    <a href="/SignOut" class="btn btn-default btn-xs">
+                        <span class="glyphicon glyphicon-log-out"></span> Log out
+                    </a>
+                </p>
+                }
+                else
+                {
+                <form action="/Login" class="navbar-form navbar-right">
+                    <div class="form-group">
+                        <input type="email" class="form-control input-sm" name="username" placeholder="Email">
+                    </div>
+                    <div class="form-group">
+                        <input type="password" class="form-control input-sm" name="password" placeholder="Password">
+                    </div>
+                    <button type="submit" class="btn btn-default input-sm">Sign in</button>
+                </form>
+                }
+            </div>
+        </div>
+    </nav>
+    <div class="container body-content">
+        @RenderBody()
+        <hr />
+        <footer>
+            <p>&copy; 2018 - Wide World Importers</p>
+        </footer>
+    </div>
+
+    <environment names="Development">
+        <script src="~/lib/jquery/dist/jquery.js"></script>
+        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
+        <script src="~/lib/datatables/media/js/jquery.dataTables.js"></script>
+        <script src="~/lib/datatables/media/js/dataTables.bootstrap.js"></script>
+        <script src="~/lib/q.js"></script>
+        <script src="~/lib/o.js/o.min.js"></script>
+        <script src="~/lib/jquery.view-engine.js"></script>
+        <script src="~/lib/jquery.serializejson.js"></script>
+        <script src="~/lib/toastr/toastr.min.js"></script>
+        @*<script src="~/lib/d3/d3.js"></script>*@
+        <script type="text/javascript">o().config({ endpoint: "/OData", autoFormat: false });</script>
+    </environment>
+    <environment names="Staging,Production">
+        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
+                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
+                asp-fallback-test="window.jQuery"
+                crossorigin="anonymous"
+                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
+        </script>
+        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
+                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
+                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
+                crossorigin="anonymous"
+                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
+        </script>
+        <script src="~/lib/q.js"></script>
+        <script src="~/lib/o.js/o.min.js"></script>
+        <script type="text/javascript">o().config({ endpoint: "/OData", autoFormat: false });</script>
+        <script src="~/lib/jquery.view-engine.js"></script>
+        <script src="~/lib/jquery.serializejson.js"></script>
+        <script src="~/lib/toastr/toastr.min.js"></script>
+        @*<script src="~/lib/d3/d3.js"></script>*@
+        <script type="text/javascript">o().config({ endpoint: "/OData", autoFormat: false });</script>
+    </environment>
+    @RenderSection("Scripts", required: false)
+</body>
+</html>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_PurchaseOrdersEdit.cshtml

@@ -0,0 +1,54 @@
+
+<!-- Bootstrap form -->
+<form id="EditPurchaseOrderForm" class="form-horizontal">
+    <input type="hidden" id="PurchaseOrderID" value="" />
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group">  <label for="OrderDate" class="col-sm-3 control-label">Date</label>  <div class="col-sm-9">  <input type="date" class="form-control" name="OrderDate">  </div>  </div>
+            <div class="form-group">  <label for="ExpectedDeliveryDate" class="col-sm-3 control-label">Expected delivery date</label>  <div class="col-sm-9">  <input type="date" class="form-control" name="ExpectedDeliveryDate">  </div>  </div>
+            <div class="form-group">
+                <label for="DeliveryMethodID" class="col-sm-3 control-label">Delivery method</label>
+                <div class="col-sm-9">
+                    <select class="form-control" id="DeliveryMethodID" name="DeliveryMethodID" data-text="DeliveryMethodName">
+                        <option value="null">N/A</option>
+                    </select>
+                </div>
+            </div>
+            <div class="form-group">  <label for="SupplierReference" class="col-sm-3 control-label">Supplier reference</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="SupplierReference" placeholder="Supplier reference">  </div>  </div>
+            <div class="form-group">
+                <label for="IsOrderFinalized" class="col-sm-3 control-label">Finalized</label>
+                <div class="col-sm-9">
+                    <input type="checkbox" class="form-control" name="IsOrderFinalized" value="true">
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">  <label for="ContactName" class="col-sm-3 control-label">Contact</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="ContactName" readonly>  </div>  </div>
+            <div class="form-group">  <label for="ContactPhone" class="col-sm-3 control-label">Contact phone</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="ContactPhone" readonly>  </div>  </div>
+            <div class="form-group">  <label for="ContactFax" class="col-sm-3 control-label">Contact fax</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="ContactFax" readonly>  </div>  </div>
+            <div class="form-group">  <label for="ContactEmail" class="col-sm-3 control-label">Contact email</label>  <div class="col-sm-9">  <input type="text" class="form-control" name="ContactEmail" readonly>  </div>  </div>
+        </div>
+    </div>
+</form>
+<!-- End Bootstrap form -->
+<div class="pull-right form-group">
+    <button id="cancel" type="button" class="btn btn-link pull-right" data-dismiss="modal">Cancel</button>
+    <button id="save" type="button" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+</div>
+
+
+    <h3>Order lines</h3>
+    <table id="orderLines" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
+        <thead>
+            <tr>
+                <th>Description</th>
+                <th>Ordered</th>
+                <th>Expected price</th>
+                <th>Received</th>
+                <th>Product</th>
+                <th>Is finalized</th>
+                <th>Package type</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_PurchaseOrdersTable.cshtml

@@ -0,0 +1,15 @@
+<table id="orders" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Supplier</th>
+            <th>Delivery date</th>
+            <th>Contact</th>
+            <th>Contact phone</th>
+            <th>Finalized</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+

samples/databases/wide-world-importers/wwi-app/Views/Shared/_SalesOrderLinesTable.cshtml

@@ -0,0 +1,14 @@
+<table id="orderLines" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Description</th>
+            <th>Quantity</th>
+            <th>Price</th>
+            <th>Tax</th>
+            <th>Product</th>
+            <th>Color</th>
+            <th>Package type</th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_SalesOrdersForm.cshtml

@@ -0,0 +1,81 @@
+<!-- Bootstrap form -->
+<form id="EditOrderForm" class="form-horizontal">
+    <input type="hidden" id="OrderID" value="" />
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label for="OrderDate" class="col-sm-3 control-label">Date</label>
+                <div class="col-sm-9">
+                    <input type="date" class="form-control" name="OrderDate">
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="CustomerPurchaseOrderNumber" class="col-sm-3 control-label">Order Number</label>
+                <div class="col-sm-9">
+                    <input type="number" class="form-control" name="CustomerPurchaseOrderNumber">
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="ExpectedDeliveryDate" class="col-sm-3 control-label">Delivery date</label>
+                <div class="col-sm-9">
+                    <input type="date" class="form-control" name="ExpectedDeliveryDate" placeholder="ExpectedDeliveryDate">
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="PickingCompletedWhen" class="col-sm-3 control-label">Picked on</label>
+                <div class="col-sm-9">
+                    <input type="datetime" class="form-control" name="PickingCompletedWhen" placeholder="PickingCompletedWhen">
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label for="CustomerName" class="col-sm-3 control-label">Customer name</label>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control" name="CustomerName" readonly>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="PhoneNumber" class="col-sm-3 control-label">Phone number</label>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control" name="PhoneNumber" readonly>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="FaxNumber" class="col-sm-3 control-label">Fax</label>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control" name="FaxNumber" readonly>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="WebsiteURL" class="col-sm-3 control-label">Website URL</label>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control" name="WebsiteURL" readonly>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="SalesPerson" class="col-sm-3 control-label">Salesperson</label>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control" name="SalesPerson" readonly>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="SalesPersonPhone" class="col-sm-3 control-label">Salesperson phone</label>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control" name="SalesPersonPhone" readonly>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="SalesPersonEmail" class="col-sm-3 control-label">Salesperson email</label>
+                <div class="col-sm-9">
+                    <input type="text" class="form-control" name="SalesPersonEmail" readonly>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>
+<!-- End Bootstrap form -->
+<div class="pull-right">
+    <button id="cancel-order-edit" type="button" class="btn btn-link pull-right" data-dismiss="modal">Cancel</button>
+    <button id="save-order" type="button" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+</div>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_SalesOrdersTable.cshtml

@@ -0,0 +1,15 @@
+
+<table id="orders" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Order number</th>
+            <th>Customer</th>
+            <th>Delivery date</th>
+            <th>Contact phone</th>
+            <th>Sales person</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_StockItemsForm.cshtml

@@ -0,0 +1,135 @@
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalStockItemDialog" tabindex="-1" role="dialog" aria-labelledby="modalStockItemDialogLabel">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalStockItemDialogLabel">Stock item details</h4>
+            </div>
+            <div class="modal-body">
+
+                <!-- Bootstrap form -->
+                <form id="EditStockItemForm" class="form-horizontal">
+                    <input type="hidden" id="StockItemID" value="" />
+                    <div class="row">
+                        <div class="col-md-6">
+
+                            <div class="form-group">
+                                <label for="StockItemName" class="col-sm-3 control-label">Name</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="StockItemName" placeholder="Name">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="SupplierName" class="col-sm-3 control-label">Supplier</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="SupplierName" placeholder="Supplier" readonly>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="ColorID" class="col-sm-3 control-label">Color</label>
+                                <div class="col-sm-9">
+                                    <select class="form-control" id="ColorID" name="ColorID" data-text="ColorName"></select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="UnitPackageID" class="col-sm-3 control-label">Unit package</label>
+                                <div class="col-sm-9">
+                                    <select class="form-control" id="UnitPackageID" name="UnitPackageID" data-key="PackageTypeID" data-text="PackageTypeName"></select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="OuterPackageID" class="col-sm-3 control-label">Outer package</label>
+                                <div class="col-sm-9">
+                                    <select class="form-control" id="OuterPackageID" name="OuterPackageID" data-key="PackageTypeID" data-text="PackageTypeName"></select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="Brand" class="col-sm-3 control-label">Brand</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="Brand" placeholder="Brand">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="Size" class="col-sm-3 control-label">Size</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="Size" placeholder="Size">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="LeadTimeDays" class="col-sm-3 control-label">Lead time days</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="LeadTimeDays" placeholder="Lead time (days)">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="QuantityPerOuter" class="col-sm-3 control-label">Quantity per outer</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="QuantityPerOuter" placeholder="Quantity per outer">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                        
+                            <div class="form-group">
+                                <label for="IsChillerStock" class="col-sm-3 control-label">Is chiller</label>
+                                <div class="col-sm-9">
+                                    <input type="checkbox" class="form-control" name="IsChillerStock" placeholder="Is chiller stock?" value="true">
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label for="Barcode" class="col-sm-3 control-label">Barcode</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="Barcode" placeholder="Barcode">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="TaxRate" class="col-sm-3 control-label">Tax rate</label>
+                                <div class="col-sm-9">
+                                    <input type="number" class="form-control" name="TaxRate" placeholder="Tax rate">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="UnitPrice" class="col-sm-3 control-label">Unit price</label>
+                                <div class="col-sm-9">
+                                    <input type="number" class="form-control" name="UnitPrice" placeholder="Unit price">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="RecommendedRetailPrice" class="col-sm-3 control-label">Recommended retail price</label>
+                                <div class="col-sm-9">
+                                    <input type="number" class="form-control" name="RecommendedRetailPrice" placeholder="Recommended retail price">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="TypicalWeightPerUnit" class="col-sm-3 control-label">Weight/unit</label>
+                                <div class="col-sm-9">
+                                    <input type="number" class="form-control" name="TypicalWeightPerUnit" placeholder="Typical weight per unit">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="MarketingComments" class="col-sm-3 control-label">Marketing comments</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="MarketingComments" placeholder="Marketing comments">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="InternalComments" class="col-sm-3 control-label">Internal comments</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" name="InternalComments" placeholder="Internal comments">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+                <!-- End Bootstrap form -->
+            </div>
+            <div class="modal-footer">
+                <button id="save-stock-item" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel-stock-item-edit" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->

samples/databases/wide-world-importers/wwi-app/Views/Shared/_StockItemsTable.cshtml

@@ -0,0 +1,14 @@
+<table id="stockItems" class="table table-striped table-bordered temporal" style="width:100%" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Supplier</th>
+            <th>Unit price</th>
+            <th>Tax</th>
+            <th>Retail price</th>
+            <th></th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_SupplierTransactionsForm.cshtml

@@ -0,0 +1,93 @@
+<!-- Bootstrap Modal -->
+<div class="modal fade" id="modalSupplierTransactionDialog" tabindex="-1" role="dialog" aria-labelledby="modalSupplierTransactionDialogLabel">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="modalSupplierTransactionDialogLabel">Supplier transaction</h4>
+            </div>
+            <div class="modal-body">
+                <!-- Bootstrap form -->
+                <form id="EditSupplierTransactionForm" class="form-horizontal">
+                    <input type="hidden" id="SupplierTransactionID" value="" />
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label for="TransactionDate" class="col-sm-4 control-label">Date</label>
+                                <div class="col-sm-8">
+                                    <input type="date" class="form-control" name="TransactionDate" placeholder="Transaction date">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="AmountExcludingTax" class="col-sm-4 control-label">Amount (no tax)</label>
+                                <div class="col-sm-8">
+                                    <input type="number" class="form-control" name="AmountExcludingTax">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="TaxAmount" class="col-sm-4 control-label">Tax amount</label>
+                                <div class="col-sm-8">
+                                    <input type="number" class="form-control" name="TaxAmount">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="TransactionAmount" class="col-sm-4 control-label">Transaction amount</label>
+                                <div class="col-sm-8">
+                                    <input type="number" class="form-control" name="TransactionAmount">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="OutstandingBalance" class="col-sm-4 control-label">Outstanding balance</label>
+                                <div class="col-sm-8">
+                                    <input type="number" class="form-control" name="OutstandingBalance">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label for="SupplierName" class="col-sm-4 control-label">Supplier</label>
+                                <div class="col-sm-8">
+                                    <input type="text" class="form-control" name="SupplierName" readonly>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label for="TransactionTypeID" class="col-sm-4 control-label">Transaction type</label>
+                                <div class="col-sm-8">
+                                    <select class="form-control" id="TransactionTypeID" name="TransactionTypeID" data-text="TransactionTypeName">
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="PaymentMethodID" class="col-sm-4 control-label">Payment method</label>
+                                <div class="col-sm-8">
+                                    <select class="form-control" id="PaymentMethodID" name="PaymentMethodID" data-text="PaymentMethodName">
+                                        <option value="null">N/A</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="FinalizationDate" class="col-sm-4 control-label">Finalization date</label>
+                                <div class="col-sm-8">
+                                    <input type="date" class="form-control" name="FinalizationDate">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="IsFinalized" class="col-sm-4 control-label">Finalized</label>
+                                <div class="col-sm-8">
+                                    <input type="checkbox" class="form-control" name="IsFinalized" value="true" readonly="readonly">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+                <!-- End Bootstrap form -->
+            </div>
+            <div class="modal-footer">
+                <button id="save-supplier-transaction" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
+                <button id="cancel-supplier-transaction-edit" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Bootstrap modal -->

samples/databases/wide-world-importers/wwi-app/Views/Shared/_SupplierTransactionsTable.cshtml

@@ -0,0 +1,14 @@
+<table id="supplierTransactions" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Amount</th>
+            <th>Finalized</th>
+            <th>Supplier</th>
+            <th>Type</th>
+            <th>Payment method</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody></tbody>
+</table>

samples/databases/wide-world-importers/wwi-app/Views/Shared/_TemporalSlider.cshtml

@@ -0,0 +1,17 @@
+<link href="~/lib/jquery-ui/jquery-ui.css" rel="stylesheet" />
+<link href="~/lib/jquery-ui/jquery-ui.structure.css" rel="stylesheet" />
+<link href="~/lib/jquery-ui/jquery-ui.theme.css" rel="stylesheet" />
+<!-- JQuery slider for temporal -->
+<div class="panel panel-default">
+    <div class="panel-heading">Time travel</div>
+    <div class="panel-body row">
+        <div class="col-md-10">
+            <div id="slider">
+            </div>
+        </div>
+        <div class="col-md-2">
+            <input id="snapshot" type="date" class="form-control" value='@DateTime.Now.ToString("yyyy-MM-dd")'>
+        </div>
+    </div>
+</div>
+<!-- End JQuery slider for temporal -->

samples/databases/wide-world-importers/wwi-app/Views/Shared/_ValidationScriptsPartial.cshtml

@@ -0,0 +1,18 @@
+<environment names="Development">
+    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
+    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
+</environment>
+<environment names="Staging,Production">
+    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"
+            asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
+            asp-fallback-test="window.jQuery && window.jQuery.validator"
+            crossorigin="anonymous"
+            integrity="sha384-Fnqn3nxp3506LP/7Y3j/25BlWeA3PXTyT1l78LjECcPaKCV12TsZP7yyMxOe/G/k">
+    </script>
+    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"
+            asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
+            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
+            crossorigin="anonymous"
+            integrity="sha384-JrXK+k53HACyavUKOsL+NkmSesD2P+73eDMrbTtTk0h4RmOF8hF8apPlkp26JlyH">
+    </script>
+</environment>

samples/databases/wide-world-importers/wwi-app/Views/_ViewImports.cshtml

@@ -0,0 +1,2 @@
+@using wwi_app
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

samples/databases/wide-world-importers/wwi-app/Views/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}

samples/databases/wide-world-importers/wwi-app/appsettings.json

@@ -0,0 +1,5 @@
+{
+  "ConnectionStrings": {
+    "WWI": "Server=.;Database=WideWorldImporters;User=WebApi;Password=Sp1d3rman!"
+  }
+}

samples/databases/wide-world-importers/wwi-app/bower.json

@@ -0,0 +1,18 @@
+{
+  "name": "asp.net",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "3.3.7",
+    "jquery": "2.2.0",
+    "jquery-validation": "1.14.0",
+    "jquery-validation-unobtrusive": "3.2.6",
+    "datatables": "DataTables#1.10.16",
+    "webcomponentsjs": "v1.0.22",
+    "toastr": "2.1.3",
+    "o.js": "v0.3.7",
+    "d3": "v5.0.0"
+  },
+  "resolutions": {
+    "d3": "v5.0.0"
+  }
+}

samples/databases/wide-world-importers/wwi-app/bundleconfig.json

@@ -0,0 +1,24 @@
+// Configure bundling and minification for the project.
+// More info at https://go.microsoft.com/fwlink/?LinkId=808241
+[
+  {
+    "outputFileName": "wwwroot/css/site.min.css",
+    // An array of relative input file paths. Globbing patterns supported
+    "inputFiles": [
+      "wwwroot/css/site.css"
+    ]
+  },
+  {
+    "outputFileName": "wwwroot/js/site.min.js",
+    "inputFiles": [
+      "wwwroot/js/site.js"
+    ],
+    // Optionally specify minification options
+    "minify": {
+      "enabled": true,
+      "renameLocals": true
+    },
+    // Optionally generate .map file
+    "sourceMap": false
+  }
+]

samples/databases/wide-world-importers/wwi-app/wwi-app.csproj

@@ -0,0 +1,67 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+  <PropertyGroup>
+    <TargetFramework>netcoreapp2.0</TargetFramework>
+    <!-- PackageTargetFallback>$(PackageTargetFallback);portable-net45+win8+wp8+wpa81;</PackageTargetFallback -->
+    <SignAssembly>false</SignAssembly>
+    <AssemblyOriginatorKeyFile>hrkljush.snk</AssemblyOriginatorKeyFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Remove="Areas\**" />
+    <Compile Remove="SqlServerRestApi\**" />
+    <Compile Remove="wwwroot\public\**" />
+    <Content Remove="Areas\**" />
+    <Content Remove="SqlServerRestApi\**" />
+    <Content Remove="wwwroot\public\**" />
+    <EmbeddedResource Remove="Areas\**" />
+    <EmbeddedResource Remove="SqlServerRestApi\**" />
+    <EmbeddedResource Remove="wwwroot\public\**" />
+    <None Remove="Areas\**" />
+    <None Remove="SqlServerRestApi\**" />
+    <None Remove="wwwroot\public\**" />
+  </ItemGroup>
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore" Version="2.0.2" />
+    <PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="2.0.3" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.3" />
+    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.0.2" />
+    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="2.0.1" />
+    <PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="2.0.2" />
+    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.3" />
+    <PackageReference Include="Newtonsoft.Json" Version="11.0.2" />
+    <PackageReference Include="Sql-Server-Rest-Api" Version="0.8.3" />
+  </ItemGroup>
+  <ItemGroup>
+    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.1" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Update="Controllers\ODataController.tt">
+      <LastGenOutput>ODataController.cs</LastGenOutput>
+      <Generator>TextTemplatingFileGenerator</Generator>
+    </None>
+    <None Update="Controllers\TableController.tt">
+      <LastGenOutput>TableController.cs</LastGenOutput>
+      <Generator>TextTemplatingFileGenerator</Generator>
+    </None>
+  </ItemGroup>
+  <ItemGroup>
+    <Service Include="{508349b6-6b84-4df5-91f0-309beebad82d}" />
+  </ItemGroup>
+  <ItemGroup>
+    <Compile Update="Controllers\ODataController.cs">
+      <DependentUpon>ODataController.tt</DependentUpon>
+      <DesignTime>True</DesignTime>
+      <AutoGen>True</AutoGen>
+    </Compile>
+    <Compile Update="Controllers\TableController.cs">
+      <DependentUpon>TableController.tt</DependentUpon>
+      <DesignTime>True</DesignTime>
+      <AutoGen>True</AutoGen>
+    </Compile>
+  </ItemGroup>
+  <ItemGroup>
+    <Folder Include="wwwroot\lib\dtodata\" />
+    <Folder Include="wwwroot\lib\jquery-ui\" />
+    <Folder Include="wwwroot\lib\nvd3-new\" />
+    <Folder Include="wwwroot\lib\nvd3\" />
+  </ItemGroup>
+</Project>

samples/databases/wide-world-importers/wwi-app/wwwroot/css/site.css

@@ -0,0 +1,49 @@
+body {
+    padding-top: 50px;
+    padding-bottom: 20px;
+}
+
+/* Wrapping element */
+/* Set some basic padding to keep content from hitting the edges */
+.body-content {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+/* Set widths on the form inputs since otherwise they're 100% wide */
+input,
+select,
+textarea {
+    max-width: 280px;
+}
+
+/* Carousel */
+.carousel-caption p {
+    font-size: 20px;
+    line-height: 1.4;
+}
+
+/* Make .svg files in the carousel display properly in older browsers */
+.carousel-inner .item img[src$=".svg"] {
+    width: 100%;
+}
+
+/* Hide/rearrange for smaller screens */
+@media screen and (max-width: 767px) {
+    /* Hide captions */
+    .carousel-caption {
+        display: none;
+    }
+}
+
+button#add {
+    margin-top: 15px;
+}
+
+div.rhs-search {
+    margin-top: 10px;
+}
+
+.tab-content {
+    margin-top: 15px
+}

samples/databases/wide-world-importers/wwi-app/wwwroot/css/site.min.css

@@ -0,0 +1 @@
+body{padding-top:50px;padding-bottom:20px}.body-content{padding-left:15px;padding-right:15px}input,select,textarea{max-width:280px}.carousel-caption p{font-size:20px;line-height:1.4}.carousel-inner .item img[src$=".svg"]{width:100%}@media screen and (max-width:767px){.carousel-caption{display:none}}

samples/databases/wide-world-importers/wwi-app/wwwroot/images/banner1.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="11.7431in" height="3.70835in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 18376 5803"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#56B4D9}
+    .fil1 {fill:white}
+    .fil2 {fill:white;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <polygon class="fil0" points="0,0 18376,0 18376,5803 0,5803 "/>
+  <g id="_2172112272768">
+   <path class="fil1" d="M7974 999l-16 0 0 1193 16 0 0 -1193zm1347 872l-29 0 -116 -390c-6,-20 -9,-37 -10,-49l-1 0c-1,10 -4,26 -11,48l-123 391 -30 0 -154 -519 40 0 118 416c6,19 9,34 12,46l1 0c1,-9 6,-24 13,-46l128 -416 18 0 118 416c5,19 9,35 11,46l1 0c2,-7 3,-14 6,-23l122 -439 38 0 -152 519zm233 -464c-7,0 -13,-2 -19,-8 -5,-5 -8,-12 -8,-20 0,-8 3,-14 8,-19 6,-5 12,-8 19,-8 8,0 14,3 20,7 6,5 8,12 8,20 0,8 -2,14 -8,20 -5,5 -12,8 -20,8l0 0zm-16 464l0 -370 33 0 0 370 -33 0zm391 0l0 -215c0,-90 -32,-134 -97,-134 -35,0 -65,13 -88,39 -23,26 -34,59 -34,97l0 213 -33 0 0 -370 33 0 0 67 1 0c27,-51 70,-76 127,-76 40,0 71,13 92,40 21,26 32,64 32,114l0 225 -33 0zm394 0l0 -67 -1 0c-12,23 -30,42 -54,56 -23,13 -50,20 -80,20 -45,0 -83,-16 -111,-50 -29,-33 -44,-79 -44,-138 0,-59 16,-108 48,-145 31,-37 72,-55 122,-55 56,0 95,22 119,68l1 0 0 -238 34 0 0 549 -34 0zm0 -225c0,-35 -11,-64 -32,-88 -22,-24 -52,-36 -89,-36 -38,0 -71,15 -96,45 -25,29 -38,70 -38,123 0,51 12,90 34,118 23,28 53,42 88,42 43,0 75,-13 99,-39 23,-27 34,-58 34,-96l0 -69zm288 234c-54,0 -97,-17 -128,-53 -32,-36 -48,-82 -48,-139 0,-61 17,-110 50,-144 33,-35 76,-52 130,-52 53,0 94,17 125,51 31,35 46,83 46,144 0,57 -16,104 -47,140 -31,36 -74,53 -128,53l0 0zm2 -358c-43,0 -78,15 -104,44 -26,30 -39,70 -39,123 0,48 13,87 38,117 25,29 60,44 104,44 45,0 79,-15 103,-43 24,-29 36,-70 36,-121 0,-53 -12,-93 -36,-122 -24,-28 -58,-42 -102,-42l0 0zm566 349l-31 0 -81 -279c-2,-8 -4,-18 -6,-31l-2 0c0,5 -2,15 -7,30l-90 280 -31 0 -112 -370 37 0 86 295c2,8 4,18 5,32l3 0c0,-7 3,-18 7,-32l94 -295 23 0 84 295c2,7 3,18 5,32l3 0c0,-7 2,-18 6,-32l88 -295 34 0 -115 370 0 0zm155 -16l0 -40c12,11 28,19 46,26 17,6 33,9 46,9 58,0 87,-24 87,-71 0,-17 -6,-31 -19,-42 -13,-12 -34,-24 -62,-36 -36,-16 -61,-32 -75,-48 -14,-17 -22,-37 -22,-60 0,-31 12,-55 35,-74 23,-18 51,-27 85,-27 32,0 59,6 82,19l0 38c-27,-18 -56,-27 -85,-27 -25,0 -44,6 -59,19 -15,13 -23,29 -23,49 0,18 5,32 14,43 10,11 30,24 63,38 38,17 65,34 79,48 15,15 22,35 22,60 0,29 -11,53 -33,73 -22,19 -53,28 -92,28 -35,0 -65,-8 -89,-25l0 0zm1292 16l0 -519 36 0 0 487 208 0 0 32 -244 0zm336 -464c-7,0 -14,-2 -19,-8 -6,-5 -9,-12 -9,-20 0,-8 3,-14 9,-19 5,-5 12,-8 19,-8 7,0 14,3 19,7 6,5 9,12 9,20 0,8 -3,14 -8,20 -6,5 -13,8 -20,8l0 0zm-17 464l0 -370 34 0 0 370 -34 0zm391 0l0 -215c0,-90 -32,-134 -96,-134 -36,0 -65,13 -88,39 -23,26 -35,59 -35,97l0 213 -33 0 0 -370 33 0 0 67 2 0c27,-51 69,-76 127,-76 40,0 70,13 92,40 21,26 31,64 31,114l0 225 -33 0zm376 0l0 -67 -1 0c-26,51 -66,76 -120,76 -87,0 -131,-55 -131,-165l0 -214 34 0 0 206c0,50 8,86 25,109 16,23 42,34 78,34 34,0 62,-13 83,-38 22,-25 32,-59 32,-101l0 -210 34 0 0 370 -34 0zm254 -181l121 181 -43 0 -97 -156 -2 0 -13 21c-1,2 -4,6 -6,9l-82 126 -40 0 123 -181 -121 -189 39 0 82 132c11,18 18,28 20,32l1 0 19 -30 86 -134 39 0 -126 189 0 0zm1381 190c-74,0 -132,-24 -176,-73 -43,-49 -65,-112 -65,-190 0,-83 22,-149 67,-199 45,-50 106,-75 183,-75 70,0 127,24 170,72 44,48 65,111 65,189 0,86 -22,153 -66,203 -45,49 -104,73 -178,73l0 0zm3 -504c-60,0 -110,22 -149,66 -39,43 -58,100 -58,171 0,72 18,129 55,171 37,42 86,63 148,63 64,0 115,-21 152,-62 38,-42 56,-101 56,-175 0,-74 -18,-131 -54,-172 -37,-41 -87,-62 -150,-62l0 0zm318 477l0 -41c37,24 75,35 113,35 40,0 71,-8 92,-25 21,-17 32,-40 32,-70 0,-27 -8,-48 -22,-64 -14,-16 -44,-37 -91,-64 -53,-31 -86,-57 -100,-77 -14,-21 -21,-45 -21,-72 0,-36 14,-68 42,-93 29,-26 67,-39 114,-39 31,0 62,6 93,16l0 38c-30,-14 -63,-21 -97,-21 -36,0 -63,9 -84,27 -21,18 -31,40 -31,68 0,26 7,48 21,63 14,16 45,37 92,64 48,28 80,52 96,74 16,21 24,46 24,73 0,40 -13,73 -41,98 -28,25 -67,37 -117,37 -18,0 -39,-2 -62,-8 -23,-6 -41,-12 -53,-19l0 0zm653 18l-120 -198c-7,-12 -14,-24 -19,-36l-2 0c-6,13 -13,25 -21,36l-121 198 -43 0 164 -261 -154 -258 43 0 116 195c6,10 12,22 19,35l1 0 19 -35 116 -195 41 0 -155 257 159 262 -43 0z"/>
+   <path class="fil2" d="M2012 1859l0 -74c8,8 18,14 30,20 12,6 24,11 37,15 13,4 26,7 40,10 13,2 25,3 36,3 39,0 67,-7 86,-21 19,-15 29,-35 29,-62 0,-14 -3,-27 -10,-38 -6,-10 -15,-20 -26,-29 -11,-9 -24,-17 -40,-25 -15,-8 -31,-17 -49,-26 -19,-9 -36,-19 -52,-28 -16,-10 -30,-21 -42,-33 -12,-11 -22,-24 -28,-39 -7,-15 -11,-32 -11,-52 0,-25 6,-46 16,-64 11,-18 25,-33 42,-44 18,-12 38,-21 60,-26 22,-6 45,-9 68,-9 53,0 91,6 115,19l0 71c-31,-22 -72,-33 -121,-33 -14,0 -28,1 -41,4 -14,3 -26,8 -37,14 -11,6 -19,15 -26,25 -7,10 -10,23 -10,37 0,14 2,26 8,36 5,10 12,19 22,27 10,8 22,16 36,24 15,7 31,16 50,25 19,9 37,19 54,30 17,10 32,22 45,34 13,13 23,27 31,43 8,15 11,33 11,52 0,27 -5,49 -15,67 -10,19 -24,34 -42,45 -17,11 -38,20 -60,25 -23,5 -47,7 -73,7 -8,0 -18,0 -31,-2 -12,-1 -25,-3 -38,-6 -13,-2 -25,-6 -37,-9 -11,-4 -20,-9 -27,-13z"/>
+   <path id="1" class="fil2" d="M2657 1889c-75,0 -136,-25 -182,-75 -45,-49 -68,-114 -68,-194 0,-87 23,-155 70,-206 46,-51 110,-77 189,-77 74,0 133,25 178,75 46,49 68,114 68,195 0,87 -23,156 -69,206 -11,12 -23,23 -35,32l150 107 -114 0 -100 -75c-26,8 -55,12 -87,12zm5 -495c-56,0 -102,20 -137,60 -35,41 -52,94 -52,160 0,66 17,119 51,159 34,40 79,60 133,60 59,0 105,-19 139,-57 34,-39 51,-92 51,-161 0,-71 -17,-125 -49,-163 -33,-39 -79,-58 -136,-58z"/>
+   <polygon id="2" class="fil2" points="3294,1880 3017,1880 3017,1346 3080,1346 3080,1824 3294,1824 "/>
+   <path id="3" class="fil2" d="M3561 1859l0 -74c8,8 18,14 30,20 12,6 24,11 37,15 13,4 26,7 40,10 13,2 25,3 36,3 39,0 67,-7 86,-21 19,-15 29,-35 29,-62 0,-14 -3,-27 -10,-38 -6,-10 -15,-20 -26,-29 -11,-9 -24,-17 -40,-25 -15,-8 -31,-17 -49,-26 -19,-9 -36,-19 -52,-28 -16,-10 -30,-21 -42,-33 -12,-11 -22,-24 -28,-39 -7,-15 -11,-32 -11,-52 0,-25 6,-46 16,-64 11,-18 25,-33 42,-44 18,-12 38,-21 60,-26 22,-6 45,-9 68,-9 53,0 91,6 115,19l0 71c-31,-22 -72,-33 -121,-33 -14,0 -28,1 -41,4 -14,3 -26,8 -37,14 -11,6 -19,15 -26,25 -7,10 -10,23 -10,37 0,14 2,26 8,36 5,10 12,19 22,27 10,8 22,16 36,24 15,7 31,16 50,25 19,9 37,19 54,30 17,10 32,22 45,34 13,13 23,27 31,43 8,15 11,33 11,52 0,27 -5,49 -15,67 -10,19 -24,34 -42,45 -17,11 -38,20 -60,25 -23,5 -47,7 -73,7 -8,0 -18,0 -31,-2 -12,-1 -25,-3 -38,-6 -13,-2 -25,-6 -37,-9 -11,-4 -20,-9 -27,-13z"/>
+   <path id="4" class="fil2" d="M4289 1705l-269 0c1,42 13,75 34,98 22,23 52,35 91,35 43,0 82,-14 118,-43l0 58c-33,24 -78,36 -133,36 -54,0 -96,-17 -127,-52 -31,-34 -46,-83 -46,-146 0,-59 17,-108 50,-145 34,-37 76,-56 126,-56 50,0 88,16 115,48 28,33 41,77 41,135l0 32zm-62 -52c0,-35 -9,-63 -26,-82 -16,-20 -40,-30 -70,-30 -28,0 -53,11 -73,31 -20,21 -32,48 -37,81l206 0z"/>
+   <path id="5" class="fil2" d="M4581 1561c-11,-8 -26,-13 -46,-13 -26,0 -48,13 -66,37 -17,25 -26,58 -26,101l0 194 -61 0 0 -381 61 0 0 78 2 0c8,-26 22,-47 39,-62 18,-15 38,-23 60,-23 16,0 28,2 37,5l0 64z"/>
+   <path id="6" class="fil2" d="M4947 1499l-152 381 -60 0 -144 -381 67 0 97 277c7,20 11,38 13,53l1 0c3,-19 7,-36 12,-51l102 -279 64 0z"/>
+   <path id="7" class="fil2" d="M5319 1705l-269 0c1,42 12,75 34,98 22,23 52,35 91,35 43,0 82,-14 118,-43l0 58c-33,24 -78,36 -133,36 -54,0 -96,-17 -127,-52 -31,-34 -46,-83 -46,-146 0,-59 17,-108 50,-145 34,-37 76,-56 126,-56 50,0 88,16 115,48 28,33 41,77 41,135l0 32zm-62 -52c0,-35 -9,-63 -26,-82 -16,-20 -40,-30 -70,-30 -28,0 -53,11 -73,31 -20,21 -32,48 -37,81l206 0z"/>
+   <path id="8" class="fil2" d="M5611 1561c-11,-8 -26,-13 -46,-13 -26,0 -48,13 -66,37 -17,25 -26,58 -26,101l0 194 -61 0 0 -381 61 0 0 78 2 0c8,-26 21,-47 39,-62 18,-15 38,-23 60,-23 16,0 28,2 37,5l0 64z"/>
+   <path id="9" class="fil2" d="M6112 1486c0,-16 -2,-31 -7,-43 -6,-12 -13,-22 -21,-30 -9,-8 -20,-14 -31,-18 -12,-4 -25,-6 -39,-6 -12,0 -24,1 -35,5 -12,3 -23,7 -34,13 -10,6 -21,13 -31,21 -10,8 -19,16 -28,26l0 -65c17,-17 36,-30 58,-39 21,-8 47,-13 77,-13 22,0 42,3 61,10 19,6 35,15 48,27 14,13 25,28 33,45 7,18 11,39 11,62 0,21 -2,40 -7,57 -5,17 -12,34 -22,49 -10,15 -22,29 -37,43 -15,14 -32,28 -53,43 -25,18 -45,33 -61,46 -17,12 -30,24 -39,35 -10,11 -17,22 -20,33 -4,11 -6,24 -6,39l266 0 0 54 -330 0 0 -26c0,-23 3,-43 8,-60 5,-18 13,-34 24,-50 12,-16 27,-31 45,-47 19,-16 41,-33 68,-53 19,-14 36,-27 49,-40 13,-12 23,-25 31,-38 8,-12 14,-25 17,-38 4,-13 5,-27 5,-42z"/>
+   <path id="10" class="fil2" d="M6616 1611c0,45 -4,84 -12,119 -8,34 -20,64 -35,87 -15,24 -34,42 -57,54 -22,13 -47,19 -75,19 -27,0 -51,-6 -72,-18 -21,-12 -39,-29 -53,-52 -15,-22 -26,-50 -33,-83 -7,-33 -11,-71 -11,-113 0,-47 4,-88 12,-124 7,-36 19,-65 34,-90 15,-24 34,-42 56,-55 23,-12 49,-18 78,-18 112,0 168,91 168,274zm-63 6c0,-152 -36,-228 -108,-228 -76,0 -115,77 -115,232 0,144 38,217 113,217 73,0 110,-74 110,-221z"/>
+   <path id="11" class="fil2" d="M6917 1880l-61 0 0 -461c-5,4 -12,10 -21,16 -9,6 -19,12 -30,18 -12,6 -24,11 -36,17 -13,5 -25,9 -37,12l0 -62c13,-4 28,-9 43,-15 15,-6 30,-13 44,-21 15,-8 28,-16 41,-25 13,-8 24,-17 34,-25l23 0 0 546z"/>
+   <path id="12" class="fil2" d="M7435 1381c-8,15 -18,32 -30,53 -11,21 -24,45 -36,72 -13,26 -27,54 -40,85 -14,30 -26,61 -38,93 -11,33 -22,65 -30,99 -9,33 -16,65 -20,97l-65 0c4,-31 11,-64 20,-97 10,-33 20,-66 32,-98 12,-32 24,-62 38,-92 13,-29 26,-57 38,-81 12,-25 24,-47 34,-66 10,-19 19,-34 25,-45l-268 0 0 -55 340 0 0 35z"/>
+  </g>
+ </g>
+</svg>

samples/databases/wide-world-importers/wwi-app/wwwroot/images/banner2.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="11.7431in" height="3.70835in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 17438 5507"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil4 {fill:black}
+    .fil6 {fill:#0071BC}
+    .fil7 {fill:#29ABE2}
+    .fil11 {fill:#353630}
+    .fil0 {fill:#68217A}
+    .fil8 {fill:#B3B3B3}
+    .fil1 {fill:#E44D26}
+    .fil9 {fill:#E6E6E6}
+    .fil3 {fill:#EBEBEB}
+    .fil10 {fill:#F0DB4F}
+    .fil2 {fill:#F16529}
+    .fil5 {fill:white}
+    .fil12 {fill:white;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <polygon class="fil0" points="0,0 17438,0 17438,5507 0,5507 "/>
+  <g id="_2172112335616">
+   <polygon class="fil1" points="9567,2031 9478,1036 10454,1036 10365,2031 9965,2142 "/>
+   <polygon class="fil2" points="9966,2057 10289,1968 10365,1117 9966,1117 "/>
+   <polygon class="fil3" points="9966,1486 9804,1486 9793,1361 9966,1361 9966,1239 9966,1239 9660,1239 9663,1272 9693,1609 9966,1609 "/>
+   <polygon class="fil3" points="9966,1804 9965,1804 9829,1767 9821,1670 9755,1670 9698,1670 9715,1861 9965,1931 9966,1931 "/>
+   <path class="fil4" d="M9569 765l62 0 0 62 57 0 0 -62 62 0 0 186 -62 0 0 -62 -57 0 0 62 -62 0 0 -186zm263 62l-55 0 0 -62 171 0 0 62 -54 0 0 124 -62 0 0 -124zm143 -62l65 0 40 65 40 -65 64 0 0 186 -61 0 0 -92 -43 66 -1 0 -43 -66 0 92 -61 0 0 -186 0 0zm240 0l62 0 0 125 88 0 0 61 -150 0 0 -186 0 0z"/>
+   <polygon class="fil5" points="9966,1486 9966,1609 10116,1609 10102,1767 9966,1804 9966,1931 10216,1861 10218,1841 10246,1519 10249,1486 10216,1486 "/>
+   <polygon class="fil5" points="9966,1239 9966,1315 9966,1361 9966,1361 10260,1361 10260,1361 10260,1361 10263,1334 10268,1272 10271,1239 "/>
+   <polygon class="fil4" points="11897,854 11897,790 11745,790 11745,976 11897,976 11897,912 11809,912 11809,854 "/>
+   <polygon class="fil4" points="12111,790 11960,790 11960,855 12023,912 11960,912 11960,976 12111,976 12111,914 12054,854 12111,854 "/>
+   <polygon class="fil4" points="12331,790 12180,790 12180,855 12240,912 12180,912 12180,976 12331,976 12331,914 12271,854 12331,854 "/>
+   <polygon class="fil6" points="11639,2056 11550,1060 12526,1060 12437,2056 12037,2167 "/>
+   <polygon class="fil7" points="12039,2082 12361,1993 12437,1143 12039,1143 "/>
+   <polygon class="fil8" points="11753,1509 11764,1631 12039,1509 12039,1387 "/>
+   <polygon class="fil9" points="12343,1256 12039,1387 12039,1509 12333,1378 "/>
+   <polygon class="fil9" points="12039,1828 12038,1828 11902,1792 11893,1694 11770,1694 11787,1886 12038,1956 12039,1955 "/>
+   <polygon class="fil5" points="12039,1509 12039,1631 12188,1631 12174,1790 12039,1828 12039,1955 12289,1886 12322,1509 "/>
+   <polygon class="fil9" points="12039,1509 11753,1509 11764,1631 12039,1631 "/>
+   <polygon class="fil9" points="12039,1378 12039,1256 12038,1256 11732,1256 11743,1378 "/>
+   <polygon class="fil5" points="12039,1256 12039,1377 12039,1378 12333,1378 12343,1256 "/>
+   <rect class="fil10" x="13495" y="983" width="1071" height="1071"/>
+   <path class="fil11" d="M14214 1819c22,35 50,61 100,61 41,0 68,-20 68,-49 0,-35 -28,-47 -73,-67l-26 -11c-72,-31 -120,-70 -120,-151 0,-76 57,-133 147,-133 64,0 110,22 143,80l-78 51c-18,-31 -36,-44 -65,-44 -30,0 -48,19 -48,44 0,30 18,42 62,61l25 10c85,37 134,74 134,158 0,91 -72,141 -167,141 -94,0 -154,-45 -184,-103l82 -48 0 0zm-355 9c16,28 30,52 65,52 33,0 53,-13 53,-63l0 -343 101 0 0 344c0,104 -61,151 -150,151 -81,0 -127,-41 -151,-91l82 -50 0 0z"/>
+   <rect class="fil5" x="8390" y="933" width="15.2935" height="1131.91"/>
+  </g>
+  <path class="fil12" d="M2685 1757l0 -360c0,-9 2,-34 4,-75l-1 0c-7,20 -13,34 -18,45l-181 390 -11 0 -181 -388c-6,-13 -12,-29 -17,-48l-1 0c1,23 2,45 2,68l0 368 -35 0 0 -507 33 0 189 408c1,3 2,6 4,10 1,4 3,8 4,12 2,6 5,13 8,20l2 0 4 -11c0,-1 4,-12 12,-33l186 -406 31 0 0 507 -34 0z"/>
+  <path id="1" class="fil12" d="M2987 1766c-52,0 -94,-17 -125,-52 -31,-35 -46,-80 -46,-136 0,-60 16,-107 48,-141 32,-34 75,-51 127,-51 52,0 93,17 123,51 30,33 45,80 45,140 0,56 -16,102 -46,137 -31,35 -73,52 -126,52zm3 -350c-43,0 -77,14 -102,43 -25,29 -38,69 -38,120 0,47 12,85 37,114 25,29 59,43 101,43 44,0 78,-14 101,-42 24,-29 36,-68 36,-118 0,-52 -12,-91 -36,-119 -23,-27 -56,-41 -99,-41z"/>
+  <path id="2" class="fil12" d="M3505 1757l0 -66 -1 0c-12,23 -29,41 -52,55 -23,13 -49,20 -78,20 -45,0 -81,-16 -110,-49 -28,-32 -42,-77 -42,-135 0,-58 16,-105 46,-142 31,-36 71,-54 120,-54 54,0 93,22 116,67l1 0 0 -232 33 0 0 536 -33 0zm0 -220c0,-34 -10,-62 -32,-86 -21,-23 -50,-35 -86,-35 -38,0 -69,14 -94,44 -24,29 -37,69 -37,120 0,50 11,88 34,115 22,28 51,41 86,41 41,0 73,-13 95,-38 23,-26 34,-57 34,-94l0 -67z"/>
+  <path id="3" class="fil12" d="M3662 1577c0,50 11,89 34,117 23,28 55,42 95,42 40,0 80,-15 119,-45l0 35c-38,27 -80,40 -126,40 -47,0 -84,-17 -113,-50 -29,-34 -43,-81 -43,-142 0,-53 15,-97 45,-134 30,-36 69,-54 117,-54 45,0 80,16 104,48 24,31 36,74 36,129l0 14 -268 0zm234 -29c-2,-42 -12,-74 -30,-97 -19,-24 -45,-35 -77,-35 -34,0 -62,11 -85,34 -22,23 -36,55 -41,98l233 0z"/>
+  <path id="4" class="fil12" d="M4190 1429c-11,-8 -23,-12 -38,-12 -28,0 -52,15 -72,45 -19,29 -29,71 -29,125l0 170 -32 0 0 -362 32 0 0 80 2 0c8,-27 21,-49 39,-64 18,-15 39,-23 62,-23 14,0 26,2 36,6l0 35z"/>
+  <path id="5" class="fil12" d="M4503 1757l0 -211c0,-87 -32,-130 -95,-130 -34,0 -63,13 -86,38 -22,26 -33,57 -33,95l0 208 -33 0 0 -362 33 0 0 66 1 0c27,-50 68,-75 124,-75 39,0 69,13 90,39 21,26 31,63 31,112l0 220 -32 0z"/>
+  <path id="6" class="fil12" d="M5149 1757l-30 0 -79 -273c-2,-7 -4,-18 -6,-30l-1 0c-1,5 -3,15 -7,29l-89 274 -30 0 -110 -362 36 0 85 289c2,7 3,18 5,30l2 0c1,-7 3,-17 7,-30l92 -289 22 0 82 289c2,7 4,17 5,30l3 0c0,-7 2,-17 6,-30l86 -289 34 0 -113 362z"/>
+  <path id="7" class="fil12" d="M5340 1577c0,50 12,89 35,117 23,28 54,42 94,42 41,0 80,-15 119,-45l0 35c-37,27 -79,40 -125,40 -47,0 -85,-17 -114,-50 -28,-34 -43,-81 -43,-142 0,-53 15,-97 45,-134 30,-36 70,-54 118,-54 45,0 79,16 103,48 24,31 36,74 36,129l0 14 -268 0zm234 -29c-1,-42 -11,-74 -30,-97 -18,-24 -44,-35 -77,-35 -34,0 -62,11 -84,34 -22,23 -36,55 -41,98l232 0z"/>
+  <path id="8" class="fil12" d="M5732 1693l-1 0 0 64 -33 0 0 -536 33 0 0 249 1 0c13,-27 32,-48 56,-62 24,-15 51,-22 79,-22 46,0 82,16 108,48 26,31 39,74 39,129 0,61 -15,109 -45,147 -30,37 -69,56 -117,56 -54,0 -94,-24 -120,-73zm-1 -135l0 46c0,36 11,67 34,93 23,26 53,39 90,39 37,0 67,-16 90,-47 23,-32 35,-74 35,-125 0,-46 -11,-81 -32,-108 -21,-27 -49,-40 -85,-40 -42,0 -75,14 -98,42 -23,29 -34,62 -34,100z"/>
+  <path id="9" class="fil12" d="M6518 1757l0 -72 -1 0c-12,24 -28,44 -50,59 -22,15 -47,22 -74,22 -34,0 -61,-10 -81,-29 -20,-19 -30,-44 -30,-73 0,-63 41,-102 125,-115l111 -16c0,-78 -29,-117 -87,-117 -40,0 -79,16 -117,48l0 -39c14,-11 32,-20 55,-27 23,-8 45,-12 65,-12 37,0 66,12 86,35 21,23 31,57 31,101l0 235 -33 0zm-99 -180c-38,5 -65,14 -80,26 -16,12 -23,32 -23,59 0,22 7,39 21,53 14,14 34,21 60,21 35,0 64,-13 87,-39 23,-25 34,-59 34,-99l0 -36 -99 15z"/>
+  <path id="10" class="fil12" d="M6694 1693l-2 0 0 231 -32 0 0 -529 32 0 0 75 2 0c13,-27 31,-48 56,-62 24,-15 50,-22 79,-22 46,0 82,16 108,48 26,31 39,74 39,129 0,61 -15,109 -45,147 -29,37 -68,56 -117,56 -54,0 -94,-24 -120,-73zm-2 -135l0 46c0,36 12,67 35,93 23,26 53,39 90,39 37,0 67,-16 90,-47 23,-32 35,-74 35,-125 0,-46 -11,-81 -32,-108 -21,-27 -50,-40 -85,-40 -42,0 -75,14 -98,42 -23,29 -35,62 -35,100z"/>
+  <path id="11" class="fil12" d="M7099 1693l-1 0 0 231 -33 0 0 -529 33 0 0 75 1 0c13,-27 32,-48 56,-62 24,-15 51,-22 80,-22 46,0 82,16 107,48 26,31 39,74 39,129 0,61 -15,109 -44,147 -30,37 -69,56 -117,56 -55,0 -95,-24 -121,-73zm-1 -135l0 46c0,36 11,67 34,93 23,26 53,39 90,39 37,0 68,-16 91,-47 23,-32 34,-74 34,-125 0,-46 -10,-81 -32,-108 -21,-27 -49,-40 -84,-40 -43,0 -75,14 -98,42 -23,29 -35,62 -35,100z"/>
+  <path id="12" class="fil12" d="M7452 1741l0 -39c13,11 27,19 45,25 17,6 32,9 45,9 57,0 85,-23 85,-69 0,-16 -6,-30 -18,-41 -13,-12 -33,-23 -61,-35 -35,-16 -59,-31 -73,-47 -14,-16 -21,-36 -21,-59 0,-30 11,-53 33,-72 23,-18 51,-27 84,-27 31,0 57,6 80,19l0 37c-27,-17 -55,-26 -84,-26 -24,0 -43,6 -57,18 -15,13 -22,29 -22,49 0,17 4,31 13,42 10,10 30,23 61,37 38,17 64,32 78,47 14,14 21,34 21,58 0,28 -11,52 -32,71 -22,19 -52,28 -89,28 -35,0 -64,-8 -88,-25z"/>
+ </g>
+</svg>

samples/databases/wide-world-importers/wwi-app/wwwroot/images/banner3.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="11.7431in" height="3.70835in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 16626 5250"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#7FBA00}
+    .fil1 {fill:white;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <polygon class="fil0" points="0,0 16626,0 16626,5250 0,5250 "/>
+  <path class="fil1" d="M3162 1651l-304 -412c-6,-8 -11,-16 -16,-25l-5 -7 -1 0c0,7 1,14 1,23l0 421 -36 0 0 -509 28 0 301 408c6,9 14,20 21,33l2 0c-1,-17 -2,-31 -2,-43l0 -398 36 0 0 509 -25 0z"/>
+  <path id="1" class="fil1" d="M3318 1471c0,50 12,89 35,117 23,28 54,42 95,42 40,0 80,-15 119,-45l0 35c-38,27 -80,40 -126,40 -47,0 -85,-17 -114,-51 -29,-33 -43,-81 -43,-142 0,-53 15,-98 45,-134 30,-36 70,-55 118,-55 45,0 80,16 104,48 24,32 36,75 36,130l0 15 -269 0zm235 -30c-1,-42 -11,-75 -30,-98 -19,-23 -45,-35 -77,-35 -35,0 -63,12 -85,35 -23,22 -36,55 -41,98l233 0z"/>
+  <path id="2" class="fil1" d="M3986 1651l-31 0 -79 -274c-2,-8 -4,-18 -6,-31l-1 0c-1,6 -3,16 -7,30l-89 275 -31 0 -110 -364 37 0 84 291c2,7 4,17 5,30l3 0c1,-7 3,-17 7,-30l92 -291 23 0 82 291c2,6 4,17 5,30l3 0c0,-7 2,-17 6,-30l86 -291 34 0 -113 364z"/>
+  <path id="3" class="fil1" d="M9529 1651l0 -509 127 0c85,0 149,21 193,63 44,42 66,103 66,184 0,78 -23,141 -70,189 -48,49 -113,73 -196,73l-120 0zm35 -477l0 445 80 0c76,0 134,-20 174,-59 41,-39 61,-95 61,-169 0,-145 -76,-217 -228,-217l-87 0z"/>
+  <path id="4" class="fil1" d="M10229 1651l0 -73 -1 0c-12,25 -28,45 -51,60 -22,14 -46,22 -73,22 -35,0 -62,-10 -82,-29 -20,-20 -30,-44 -30,-74 0,-63 41,-102 126,-115l111 -17c0,-78 -29,-117 -88,-117 -40,0 -79,16 -117,48l0 -39c14,-11 32,-20 55,-27 23,-8 45,-12 66,-12 37,0 66,12 86,35 21,23 31,57 31,101l0 237 -33 0zm-100 -181c-38,5 -65,14 -80,26 -15,13 -23,32 -23,60 0,21 7,39 21,53 15,14 35,21 60,21 35,0 64,-13 88,-39 23,-26 34,-59 34,-100l0 -36 -100 15z"/>
+  <path id="5" class="fil1" d="M10515 1646c-17,8 -32,12 -47,12 -54,0 -81,-32 -81,-96l0 -245 -66 0 0 -30 66 0 0 -94c5,-2 11,-4 16,-6 6,-2 11,-3 17,-5l0 105 95 0 0 30 -95 0 0 240c0,25 4,43 11,55 8,11 22,17 41,17 13,0 28,-5 43,-14l0 31z"/>
+  <path id="6" class="fil1" d="M10805 1651l0 -73 -1 0c-12,25 -29,45 -51,60 -22,14 -47,22 -74,22 -34,0 -62,-10 -82,-29 -20,-20 -30,-44 -30,-74 0,-63 42,-102 126,-115l112 -17c0,-78 -29,-117 -88,-117 -40,0 -79,16 -117,48l0 -39c13,-11 32,-20 55,-27 23,-8 45,-12 65,-12 38,0 67,12 87,35 21,23 31,57 31,101l0 237 -33 0zm-100 -181c-38,5 -65,14 -80,26 -16,13 -24,32 -24,60 0,21 8,39 22,53 14,14 34,21 60,21 35,0 64,-13 87,-39 23,-26 35,-59 35,-100l0 -36 -100 15z"/>
+  <path id="7" class="fil1" d="M11595 1651l0 -362c0,-8 1,-33 4,-75l-1 0c-8,20 -14,34 -19,45l-181 392 -11 0 -182 -390c-6,-13 -12,-29 -17,-48l-2 0c2,23 3,45 3,68l0 370 -35 0 0 -509 32 0 190 410c2,2 3,6 4,10 2,4 3,8 5,12 2,6 5,13 7,20l2 0 4 -11c1,-1 5,-12 12,-34l188 -407 31 0 0 509 -34 0z"/>
+  <path id="8" class="fil1" d="M11970 1651l0 -73 -1 0c-12,25 -29,45 -51,60 -22,14 -47,22 -74,22 -34,0 -62,-10 -82,-29 -20,-20 -30,-44 -30,-74 0,-63 42,-102 126,-115l112 -17c0,-78 -29,-117 -88,-117 -40,0 -79,16 -117,48l0 -39c13,-11 32,-20 55,-27 23,-8 45,-12 65,-12 38,0 67,12 87,35 21,23 31,57 31,101l0 237 -33 0zm-100 -181c-38,5 -65,14 -80,26 -16,13 -24,32 -24,60 0,21 8,39 22,53 14,14 34,21 60,21 35,0 64,-13 87,-39 23,-26 35,-59 35,-100l0 -36 -100 15z"/>
+  <path id="9" class="fil1" d="M12093 1635l0 -39c13,10 28,19 45,25 18,6 33,9 46,9 57,0 85,-23 85,-70 0,-16 -6,-30 -19,-41 -12,-12 -33,-23 -61,-35 -35,-15 -59,-31 -73,-47 -14,-17 -21,-36 -21,-60 0,-29 11,-53 34,-71 22,-19 50,-28 83,-28 32,0 58,7 81,20l0 37c-27,-18 -55,-27 -84,-27 -24,0 -43,6 -58,19 -15,12 -22,28 -22,48 0,18 4,32 14,42 9,11 29,24 61,38 38,17 64,32 78,47 14,15 21,34 21,58 0,29 -11,53 -32,72 -22,19 -52,28 -90,28 -35,0 -64,-8 -88,-25z"/>
+  <polygon id="10" class="fil1" points="12603,1651 12429,1471 12427,1471 12427,1651 12395,1651 12395,1112 12427,1112 12427,1460 12429,1460 12594,1287 12636,1287 12464,1463 12650,1651 "/>
+  <path id="11" class="fil1" d="M12733 1196c-7,0 -13,-3 -18,-8 -6,-5 -8,-12 -8,-20 0,-8 2,-14 8,-19 5,-5 12,-7 18,-7 8,0 14,2 20,7 5,4 8,11 8,19 0,7 -3,14 -8,19 -5,6 -12,9 -20,9zm-16 455l0 -364 33 0 0 364 -33 0z"/>
+  <path id="12" class="fil1" d="M13114 1651l0 -212c0,-87 -32,-131 -95,-131 -35,0 -63,13 -86,39 -22,25 -34,57 -34,95l0 209 -32 0 0 -364 32 0 0 66 2 0c26,-50 68,-75 124,-75 39,0 69,13 90,40 21,26 32,63 32,112l0 221 -33 0z"/>
+  <path id="13" class="fil1" d="M13547 1624c0,68 -15,119 -45,150 -30,32 -76,48 -139,48 -35,0 -71,-9 -108,-28l0 -34c38,21 74,32 109,32 100,0 150,-53 150,-159l0 -47 -1 0c-29,49 -72,74 -131,74 -45,0 -82,-16 -110,-49 -28,-32 -42,-77 -42,-135 0,-59 15,-106 46,-143 30,-36 70,-55 120,-55 54,0 93,22 117,67l1 0 0 -58 33 0 0 337zm-33 -197c0,-32 -11,-60 -32,-84 -22,-23 -50,-35 -85,-35 -40,0 -72,15 -97,45 -24,30 -36,70 -36,120 0,49 11,88 33,116 23,27 52,41 89,41 39,0 70,-13 93,-38 24,-25 35,-56 35,-93l0 -72z"/>
+  <path id="14" class="fil1" d="M4354 1630l0 -70c8,7 18,14 29,19 11,6 23,11 36,15 12,4 25,7 37,9 13,2 24,3 35,3 37,0 64,-7 82,-21 18,-13 27,-33 27,-58 0,-14 -3,-26 -9,-36 -6,-10 -14,-20 -25,-28 -10,-9 -23,-17 -38,-24 -14,-8 -30,-16 -47,-25 -17,-9 -34,-18 -49,-27 -16,-9 -29,-19 -41,-31 -11,-11 -20,-23 -26,-37 -7,-14 -10,-31 -10,-50 0,-23 5,-43 15,-60 10,-18 24,-32 40,-43 17,-11 36,-19 57,-25 21,-5 43,-8 65,-8 50,0 87,6 110,18l0 67c-31,-21 -69,-31 -116,-31 -13,0 -26,1 -39,4 -13,3 -25,7 -35,13 -10,7 -19,15 -25,24 -7,10 -10,22 -10,36 0,13 3,24 8,34 4,9 12,18 21,25 10,8 21,16 35,23 13,8 29,16 47,24 18,9 35,19 52,29 16,10 30,21 43,33 12,12 22,25 29,40 7,15 11,31 11,50 0,25 -5,47 -15,64 -10,18 -23,32 -40,43 -16,11 -36,18 -57,23 -22,5 -45,8 -69,8 -8,0 -18,-1 -30,-2 -12,-2 -24,-4 -36,-6 -13,-3 -24,-6 -35,-9 -11,-4 -20,-8 -27,-13z"/>
+  <path id="15" class="fil1" d="M4970 1660c-72,0 -130,-24 -174,-72 -43,-47 -65,-109 -65,-186 0,-82 22,-147 66,-196 45,-49 105,-73 181,-73 71,0 127,24 170,71 43,47 65,109 65,186 0,83 -22,149 -66,197 -11,12 -22,22 -34,30l143 103 -108 0 -96 -72c-25,8 -52,12 -82,12zm4 -473c-53,0 -97,19 -130,58 -34,39 -50,89 -50,152 0,63 16,113 48,152 33,38 76,57 128,57 56,0 100,-18 132,-55 32,-36 48,-87 48,-153 0,-67 -15,-119 -47,-156 -31,-37 -74,-55 -129,-55z"/>
+  <polygon id="16" class="fil1" points="5577,1651 5313,1651 5313,1142 5373,1142 5373,1597 5577,1597 "/>
+  <polygon id="17" class="fil1" points="5902,1822 5849,1822 5849,1095 5902,1095 "/>
+  <path id="18" class="fil1" d="M6359 1468c0,61 -13,108 -39,141 -25,34 -60,51 -102,51 -20,0 -37,-3 -49,-9l0 -59c12,9 29,14 49,14 54,0 81,-46 81,-137l0 -327 60 0 0 326z"/>
+  <path id="19" class="fil1" d="M6464 1630l0 -70c8,7 18,14 29,19 11,6 23,11 36,15 12,4 25,7 37,9 13,2 24,3 35,3 37,0 64,-7 82,-21 18,-13 27,-33 27,-58 0,-14 -3,-26 -9,-36 -6,-10 -14,-20 -25,-28 -10,-9 -23,-17 -37,-24 -15,-8 -31,-16 -48,-25 -17,-9 -34,-18 -49,-27 -16,-9 -29,-19 -40,-31 -12,-11 -21,-23 -27,-37 -7,-14 -10,-31 -10,-50 0,-23 5,-43 15,-60 10,-18 24,-32 40,-43 17,-11 36,-19 57,-25 21,-5 43,-8 65,-8 50,0 87,6 110,18l0 67c-30,-21 -69,-31 -116,-31 -13,0 -26,1 -39,4 -13,3 -25,7 -35,13 -10,7 -19,15 -25,24 -6,10 -10,22 -10,36 0,13 3,24 8,34 5,9 12,18 21,25 10,8 21,16 35,23 13,8 29,16 47,24 18,9 35,19 52,29 16,10 31,21 43,33 12,12 22,25 29,40 7,15 11,31 11,50 0,25 -5,47 -15,64 -10,18 -23,32 -40,43 -16,11 -36,18 -57,23 -22,5 -45,8 -69,8 -8,0 -18,-1 -30,-2 -12,-2 -24,-4 -36,-6 -13,-3 -24,-6 -35,-9 -11,-4 -20,-8 -27,-13z"/>
+  <path id="20" class="fil1" d="M7080 1660c-72,0 -130,-24 -174,-72 -43,-47 -65,-109 -65,-186 0,-82 22,-147 67,-196 44,-49 104,-73 181,-73 70,0 127,24 169,71 43,47 65,109 65,186 0,83 -22,149 -66,197 -44,48 -103,73 -177,73zm4 -473c-53,0 -97,19 -130,58 -34,39 -50,89 -50,152 0,63 16,113 49,152 32,38 75,57 127,57 56,0 100,-18 132,-55 32,-36 48,-87 48,-153 0,-67 -15,-119 -46,-156 -32,-37 -75,-55 -130,-55z"/>
+  <path id="21" class="fil1" d="M7834 1651l-73 0 -263 -406c-6,-10 -12,-21 -16,-32l-2 0c2,11 3,34 3,70l0 368 -60 0 0 -509 78 0 255 399c10,17 17,28 20,34l2 0c-3,-14 -4,-39 -4,-75l0 -358 60 0 0 509z"/>
+  <path id="22" class="fil1" d="M8532 1651l-71 0 -85 -143c-8,-13 -16,-24 -23,-34 -8,-9 -15,-17 -23,-23 -7,-6 -16,-10 -25,-13 -8,-2 -18,-4 -30,-4l-49 0 0 217 -59 0 0 -509 152 0c22,0 43,2 61,8 19,6 36,14 49,25 14,12 25,26 33,43 8,17 12,36 12,59 0,18 -3,34 -8,49 -6,15 -13,28 -23,40 -10,11 -22,21 -36,29 -14,9 -29,15 -46,19l0 2c8,4 16,8 22,13 6,5 12,10 18,17 5,7 11,14 17,23 5,8 11,18 18,29l96 153zm-306 -455l0 184 81 0c15,0 29,-2 42,-6 12,-5 23,-11 33,-20 9,-8 16,-19 21,-31 6,-12 8,-26 8,-41 0,-27 -9,-48 -26,-64 -18,-15 -44,-22 -77,-22l-82 0z"/>
+  <polygon id="23" class="fil1" points="8866,1651 8602,1651 8602,1142 8662,1142 8662,1597 8866,1597 "/>
+  <path id="24" class="fil1" d="M8920 1630l0 -70c9,7 18,14 29,19 12,6 24,11 36,15 12,4 25,7 37,9 13,2 25,3 35,3 37,0 64,-7 83,-21 18,-13 27,-33 27,-58 0,-14 -3,-26 -9,-36 -6,-10 -15,-20 -25,-28 -11,-9 -24,-17 -38,-24 -15,-8 -30,-16 -47,-25 -18,-9 -35,-18 -50,-27 -15,-9 -29,-19 -40,-31 -12,-11 -20,-23 -27,-37 -7,-14 -10,-31 -10,-50 0,-23 5,-43 16,-60 10,-18 23,-32 40,-43 16,-11 35,-19 56,-25 21,-5 43,-8 65,-8 50,0 87,6 110,18l0 67c-30,-21 -69,-31 -116,-31 -13,0 -26,1 -39,4 -13,3 -25,7 -35,13 -10,7 -18,15 -25,24 -6,10 -9,22 -9,36 0,13 2,24 7,34 5,9 12,18 22,25 9,8 21,16 34,23 14,8 30,16 47,24 19,9 36,19 52,29 17,10 31,21 43,33 12,12 22,25 29,40 8,15 11,31 11,50 0,25 -5,47 -14,64 -10,18 -24,32 -40,43 -17,11 -36,18 -58,23 -22,5 -45,8 -69,8 -8,0 -18,-1 -30,-2 -12,-2 -24,-4 -36,-6 -12,-3 -24,-6 -35,-9 -11,-4 -20,-8 -27,-13z"/>
+ </g>
+</svg>

samples/databases/wide-world-importers/wwi-app/wwwroot/js/BuyingGroups.js

@@ -0,0 +1,82 @@
+$(() => {
+    var $table =
+        $("#buyingGroups")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/BuyingGroups",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "BuyingGroupName" },
+                    {
+                        data: "BuyingGroupID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        },
+                        width: "100px"
+                    },
+                    {
+                        data: "BuyingGroupID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        },
+                        width: "100px"
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('BuyingGroups')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the buying group.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('BuyingGroups')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The buying group is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the buying group.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#BuyingGroupID", $form).val();
+            var model = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('BuyingGroups').find(id).put(model);
+            } else {
+                request = o('BuyingGroups').post(model);
+            }
+
+            request
+                .save()
+                .then(e => {
+                    toastr.success('The buying group is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the buying group.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Cities.js

@@ -0,0 +1,97 @@
+$(() => {
+    var $table =
+        $("#cities")
+            .DataTable({
+                serverSide: true,
+                processing: true,
+                ajax: {
+                    url: "/Table/Cities",
+                    data: function (d) {
+                        if ($("#cities").data("$systemat") !== null)
+                            d.$systemat = $("#cities").data("$systemat");
+                    }
+                },
+                columns: [
+                    { data: "CityName" },
+                    { data: "LatestRecordedPopulation", type: "numeric", defaultContent: "" },
+                    { data: "StateProvinceName", defaultContent: "" },
+                    {
+                        data: "CityID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        },
+                        width: "100px"
+                    },
+                    {
+                        data: "CityID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        },
+                        width: "100px"
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    o('StateProvinces')
+        .select('StateProvinceID,StateProvinceName')
+        .get(provinces => $("#StateProvinceID",$form).view(provinces) );
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('Cities')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the city.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            try {
+                var id = e.target.attributes["data-id"].value;
+                o('Cities')
+                    .find(id).remove()
+                    .save()
+                    .then(model => {
+                        toastr.success('The city is successfully deleted.');
+                        $table.ajax.reload();
+                    })
+                    .fail(e => toastr.error('An error occured while trying to delete the city.'));
+            } catch (ex) {
+                alert(ex);
+            }
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#CityID", $form).val();
+            var city = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('Cities').find(id).put(city);
+            } else {
+                request = o('Cities').post(city);
+            }
+
+            request
+                .save()
+                .then(model => {
+                    toastr.success('The city is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the city.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Colors.js

@@ -0,0 +1,82 @@
+$(() => {
+    var $table =
+        $("#colors")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/Colors",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "ColorName" },
+                    {
+                        data: "ColorID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        },
+                        width: "100px"
+                    },
+                    {
+                        data: "ColorID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        },
+                        width: "100px"
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('Colors')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the color.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('Colors')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The color is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the color.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#ColorID", $form).val();
+            var model = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('Colors').find(id).put(model);
+            } else {
+                request = o('Colors').post(model);
+            }
+
+            request
+                .save()
+                .then(e => {
+                    toastr.success('The color is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the color.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Countries.js

@@ -0,0 +1,94 @@
+$(() => {
+    var $table =
+        $("#countries")
+            .DataTable({
+                serverSide: true,
+                processing: true,
+                ajax: {
+                    url: "/Table/Countries",
+                    data: function (d) {
+                        if ($("#countries").data("$systemat") !== null)
+                            d.$systemat = $("#countries").data("$systemat");
+                    }
+                },
+                "columns": [
+                    { data: "FormalName" },
+                    { data: "Subregion", defaultContent: "" },
+                    { data: "Region", defaultContent: "" },
+                    { data: "Continent", defaultContent: "" },
+                    { data: "LatestRecordedPopulation", type: "numeric", defaultContent: "" },
+                    {
+                        data: "CountryID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        }
+                    },
+                    {
+                        data: "CountryID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        }
+                    }
+                ]
+            });
+
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('Countries')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the country.'));
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            try {
+                var id = e.target.attributes["data-id"].value;
+                o('Countries')
+                    .find(id).remove()
+                    .save()
+                    .then(model => {
+                        toastr.success('The country is successfully deleted.');
+                        $table.ajax.reload();
+                    })
+                    .fail(e => toastr.error('An error occured while trying to delete the country.'));
+            } catch (ex) {
+                alert(ex);
+            }
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#CountryID", $form).val();
+            var city = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('Countries').find(id).put(city);
+            } else {
+                request = o('Countries').post(city);
+            }
+
+            request
+                .save()
+                .then(model => {
+                    toastr.success('The country is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the country.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/CustomerCategories.js

@@ -0,0 +1,82 @@
+$(() => {
+    var $table =
+        $("#customerCategories")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/CustomerCategories",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "CustomerCategoryName" },
+                    {
+                        data: "CustomerCategoryID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        },
+                        width: "100px"
+                    },
+                    {
+                        data: "CustomerCategoryID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        },
+                        width: "100px"
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('CustomerCategories')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the customer category.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('CustomerCategories')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The customer category is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the customer category.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#CustomerCategoryID", $form).val();
+            var model = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('CustomerCategories').find(id).put(model);
+            } else {
+                request = o('CustomerCategories').post(model);
+            }
+
+            request
+                .save()
+                .then(e => {
+                    toastr.success('The customer category is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the customer category.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/CustomerTransactions.Edit.js

@@ -0,0 +1,46 @@
+$(() => {
+    
+    var $table = $("#customerTransactions").DataTable();
+    var $form = $("#EditCustomerTransactionForm");
+    var $dlg = $("#modalCustomerTransactionDialog");
+
+    o('TransactionTypes')
+        .select('TransactionTypeID,TransactionTypeName')
+        .get(list => $("#TransactionTypeID", $dlg).view(list));
+
+    o('PaymentMethods')
+        .select('PaymentMethodID,PaymentMethodName')
+        .get(list => $("#PaymentMethodID", $dlg).view(list));
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('CustomerTransactions')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the supplier transaction.'));
+        });
+
+    $("button#save-customer-transaction").on("click",
+        e => {
+            var id = $("#CustomerTransactionID", $form).val();
+            var state = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+
+            o('CustomerTransactions')
+                .find(id)
+                .put(state)
+                .save()
+                .then(model => {
+                    toastr.success('The customer transaction is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => {
+                    toastr.error('An error occured while trying to save the customer transaction.');
+                    console.error(e);
+                });
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/CustomerTransactions.Table.js

@@ -0,0 +1,24 @@
+$(() => {
+    $("#customerTransactions")
+        .DataTable({
+            ajax: "/Table/CustomerTransactions",
+            serverSide: true,
+            processing: true,
+            "columns": [
+                { data: "TransactionDate" },
+                { data: "TransactionAmount", defaultContent: "" },
+                { data: "IsFinalized", defaultContent: "" },
+                { data: "CustomerName", defaultContent: "" },
+                { data: "TransactionTypeName", defaultContent: "" },
+                { data: "PaymentMethodName", defaultContent: "" },
+                {
+                    data: "CustomerTransactionID",
+                    "sortable": false,
+                    "searchable": false,
+                    "render": function (data) {
+                        return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalCustomerTransactionDialog"> Edit</button>';
+                    }
+                }
+            ]
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/CustomerTransactions.js

@@ -0,0 +1 @@
+

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Customers.CustomerTransactionsTable.js

@@ -0,0 +1,27 @@
+$(() => {
+    $("#customerTransactions")
+        .DataTable({
+            ajax: {
+                url: "/OData/CustomerTransactions?$top=0",
+                dataSrc: "value"
+            },
+            columns: [
+                { data: "TransactionDate" },
+                { data: "TransactionAmount", defaultContent: "" },
+                { data: "IsFinalized", defaultContent: "" },
+                { data: "CustomerName", defaultContent: "", visible: false },
+                { data: "TransactionTypeName", defaultContent: "" },
+                { data: "PaymentMethodName", defaultContent: "" },
+                {
+                    data: "CustomerTransactionID",
+                    sortable: false,
+                    searchable: false,
+                    render: function (data) {
+                        return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalCustomerTransactionDialog"> Edit</button>';
+                    },
+                    width: "100px"
+
+                }
+            ]
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Customers.InvoicesTable.js

@@ -0,0 +1,25 @@
+$(() => {
+    $("#invoices")
+        .DataTable({
+            ajax: {
+                url: "/OData/Invoices?$top=0",
+                dataSrc: "value"
+            },
+            columns: [
+                { data: "InvoiceDate" },
+                { data: "CustomerPurchaseOrderNumber", defaultContent: "" },
+                { data: "CustomerName", defaultContent: "", visible: false },
+                { data: "SalesPersonName", defaultContent: "" },
+                { data: "ContactName", defaultContent: "" },
+                { data: "ContactPhone", defaultContent: "" },
+                {
+                    data: "InvoiceID",
+                    sortable: false,
+                    searchable: false,
+                    render: function (data) {
+                        return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalInvoiceDialog"> Edit</button>';
+                    }
+                }
+            ]
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Customers.SalesOrdersTable.js

@@ -0,0 +1,25 @@
+$(() => {
+        $("#orders")
+            .DataTable({
+                ajax: {
+                    url: "/OData/SalesOrders?$top=0",
+                    dataSrc: "value"
+                },
+                columns: [
+                    { data: "OrderDate" },
+                    { data: "CustomerPurchaseOrderNumber", defaultContent: "" },
+                    { data: "CustomerName", defaultContent: "", visible: false },
+                    { data: "ExpectedDeliveryDate", defaultContent: "" },
+                    { data: "PhoneNumber", defaultContent: "" },
+                    { data: "SalesPerson", defaultContent: "" },
+                    {
+                        data: "OrderID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        }
+                    }
+                ]
+            });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Customers.js

@@ -0,0 +1,114 @@
+$(() => {
+    var $table =
+        $("#customers")
+            .DataTable({
+                ajax: "/Table/Customers",
+                serverSide: true,
+                processing: true,
+                columns: [
+                    { data: "CustomerName" },
+                    { data: "CustomerCategoryName", defaultContent: "" },
+                    { data: "PhoneNumber", defaultContent: "" },
+                    { data: "FaxNumber", defaultContent: "" },
+                    { data: "BuyingGroupName", defaultContent: "" },
+                    {
+                        data: "CustomerID",
+                        sortable: false,
+                        searchable: false,
+                        render: function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        }
+                    }
+                ]
+            });
+
+    var $formCustomer = $("#EditCustomerForm");
+    
+    o('CustomerCategories')
+        .select('CustomerCategoryID,CustomerCategoryName')
+        .get(categories => $("#CustomerCategoryID", $formCustomer).view(categories));
+
+    o('BuyingGroups')
+        .select('BuyingGroupID,BuyingGroupName')
+        .get(buyingGroups => $("#BuyingGroupID", $formCustomer).view(buyingGroups));
+
+    var $formOrder = $("#EditOrderForm");
+
+    $table.on("click", "button.edit",
+        e => {
+            $formCustomer[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('Customers')
+                .find(id)
+                .get()
+                .then(model => {
+                    $("body").trigger("open-customer-edit");
+                    $formCustomer.view(model.data);
+                    var $orders = $("#orders").DataTable();
+                    $orders.ajax.url("/OData/SalesOrders?$filter=CustomerID eq " + id);
+                    $orders.ajax.reload();
+                    var $customerTransactions = $("#customerTransactions").DataTable();
+                    $customerTransactions.ajax.url("/OData/CustomerTransactions?$filter=CustomerID eq " + id);
+                    $customerTransactions.ajax.reload();
+                    var $invoices = $("#invoices").DataTable();
+                    $invoices.ajax.url("/OData/Invoices?$filter=CustomerID eq " + id);
+                    $invoices.ajax.reload();
+                })
+                .fail(e =>
+                    toastr.error('An error occured while trying to get the customer.')
+                );
+        });
+    
+    $("button#cancel-customer-edit").on("click",
+        e => {
+            $("body").trigger("close-customer-edit");
+        });
+
+    $("button#save-customer").on("click",
+        e => {
+            var id = $("#CustomerID", $formCustomer).val();
+            var state = $formCustomer.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('Customers').find(id).put(state);
+            } else {
+                request = o('Customers').post(state);
+            }
+
+            request
+                .save()
+                .then(model => {
+                    $table.ajax.reload();
+                    $("body").trigger("close-customer-edit");
+                    toastr.success('The customer is successfully saved.');
+                })
+                .fail(e => toastr.error('An error occured while trying to save the customer.'));
+        }
+    );
+
+    // Transition rules
+    $("body")
+        .on("open-customer-edit", e => {
+            var $orders = $("#orders").DataTable();
+            $orders.clear().draw();
+            $(".customer-list").addClass("hidden");
+            $(".customer-edit").removeClass("hidden");
+        })
+        .on("close-customer-edit", e => {
+            $(".customer-edit").addClass("hidden");
+            $(".customer-list").removeClass("hidden");
+            window.scrollTo(0, 0);
+            $formCustomer[0].reset();
+        })
+        .on("open-order-edit", e => {
+            $(".order-list").addClass("hidden");
+            $(".order-edit").removeClass("hidden");
+            window.scrollTo(0, 0);
+        })
+        .on("close-order-edit", e => {
+            $(".order-list").removeClass("hidden");
+            $(".order-edit").addClass("hidden");
+            window.scrollTo(0, 0);
+            $formOrder[0].reset();
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Dashboard.js

@@ -0,0 +1,85 @@
+$(() => {
+    
+    $.ajax('/odata/Customers?$apply=(groupby(PostalCity),aggregate(CustomerID with sum as Total))&$orderby=CustomerID with sum desc&$top=5', { dataType: 'json' })
+        .done(data => {
+            $("#part1 table tbody tr").view(data.value);
+        });
+
+    $.ajax('/odata/SalesOrderLines?$apply=(groupby(ColorName),aggregate(Quantity mul UnitPrice with sum as Total))', { dataType: 'json' })
+        .done(data => {
+
+            nv.addGraph(function () {
+                var chart = nv.models.pieChart()
+                    .x(function (d) { return d.ColorName; })
+                    .y(function (d) { return d.Total; })
+                    .labelType("percent")
+                    .labelThreshold(0.15)
+                    .height(200)
+                    .showLabels(true);
+
+                d3.select("#part2 svg")
+                    .datum(data.value)
+                    .transition().duration(350)
+                    .call(chart);
+
+                return chart;
+            });
+        });
+
+    $.ajax('/odata/PurchaseOrderLines?$apply=(groupby(ColorName),aggregate(OrderedOuters mul ExpectedUnitPricePerOuter with sum as Total))', { dataType: 'json' })
+        .done(data => {
+
+            nv.addGraph(function () {
+                var chart = nv.models.pieChart()
+                    .x(function (d) { return d.ColorName })
+                    .y(function (d) { return d.Total })
+                    .labelType("value")
+                    .labelThreshold(.05)
+                    .height(200)
+                    .showLabels(true)
+                    .donut(true);
+
+                d3.select("#part3 svg")
+                    .datum(data.value)
+                    .transition().duration(350)
+                    .call(chart);
+
+                return chart;
+            });
+
+        });
+
+
+    $.ajax('/odata/SalesOrders?$apply=(groupby(OrderDate),aggregate(OrderID%20with%20sum%20as%20Total))&$orderby=OrderDate%20desc&$filter=OrderDate lt \'2016-07-04\'', { dataType: 'json' })
+        .done(data => {
+
+            nv.addGraph(function () {
+
+                var chart = nv.models.lineChart()
+                    .margin({ right: 100 })
+                    .x(function (d) { return new Date(d.OrderDate).getTime() })   //We can modify the data accessor functions...
+                    .y(function (d) { return d.Total })   //...in case your data is formatted differently.
+                    .useInteractiveGuideline(true)    //Tooltips which show all data points. Very nice!
+                    .rightAlignYAxis(true)      //Let's move the y-axis to the right side.
+                    .height(300)
+                    .showXAxis(true)
+                    .showYAxis(true)
+
+                //Format x-axis labels with custom function.
+                chart.xAxis
+                    .tickFormat(function (d) {
+                        return d3.time.format('%x')(new Date(d))
+                    });
+
+                d3.select("#part4 svg")
+                    .datum([{
+                        values: data.value,
+                        key: 'Number of sales orders',
+                        color: '#2ca02c' }])
+                    .call(chart);
+
+                return chart;
+            });
+
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Deals.js

@@ -0,0 +1,87 @@
+$(() => {
+    var $table =
+        $("#deals")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/SpecialDeals",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "DealDescription", defaultContent: "" },
+                    { data: "StartDate", defaultContent: "" },
+                    { data: "EndDate", defaultContent: "" },
+                    { data: "DiscountAmount", defaultContent: "" },
+                    { data: "UnitPrice", defaultContent: "" },
+                    { data: "BuyingGroupName", defaultContent: "" },
+                    {
+                        data: "SpecialDealID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        }
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    o('CustomerCategories')
+        .select('CustomerCategoryID,CustomerCategoryName')
+        .get(categories => $("#CustomerCategoryID", $dlg).view(categories));
+
+    o('BuyingGroups')
+        .select('BuyingGroupID,BuyingGroupName')
+        .get(buyingGroups => $("#BuyingGroupID", $dlg).view(buyingGroups));
+
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('SpecialDeals')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the special deal.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('SpecialDeals')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The special deal is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the special deal.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#SpecialDealID", $form).val();
+            var state = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true, useNullAsEmptyString: true });
+
+            o('SpecialDeals')
+                .find(id)
+                .put(state)
+                .save()
+                .then(model => {
+                    $table.ajax.reload();
+                    $dlg.modal('hide');
+                    $form[0].reset();
+                    toastr.success('The deal is successfully saved.');
+                })
+                .fail(e =>
+                    toastr.error('An error occured while trying to save the deal.')
+                );
+        }
+    );
+
+    $("button#cancel").on("click", e => $dlg.modal('hide') );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/DeliveryMethods.js

@@ -0,0 +1,80 @@
+$(() => {
+    var $table =
+        $("#deliveryMethods")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/DeliveryMethods",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "DeliveryMethodName" },
+                    {
+                        data: "DeliveryMethodID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        }
+                    },
+                    {
+                        data: "DeliveryMethodID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        }
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('DeliveryMethods')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the delivery method.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('DeliveryMethods')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The delivery method is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the delivery method.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#DeliveryMethodID", $form).val();
+            var model = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('DeliveryMethods').find(id).put(model);
+            } else {
+                request = o('DeliveryMethods').post(model);
+            }
+
+            request
+                .save()
+                .then(e => {
+                    toastr.success('The delivery method is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the delivery method.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Invoices.Edit.js

@@ -0,0 +1,46 @@
+$(() => {
+
+    var $invoices = $("#invoices").DataTable();
+    var $formInvoiceEdit = $("#EditInvoiceForm");
+    var $dlgInvoiceEdit = $("#modalInvoiceDialog");
+
+    o('DeliveryMethods')
+        .select('DeliveryMethodID,DeliveryMethodName')
+        .get(list => $("#DeliveryMethodID", $dlgInvoiceEdit).view(list));
+
+    $invoices.on("click", "button.edit",
+        e => {
+            $formInvoiceEdit[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('Invoices')
+                .find(id)
+                .get()
+                .then(model => {
+                    $formInvoiceEdit.view(model.data);
+                    $dlgInvoiceEdit.modal('show');
+                })
+                .fail(e => toastr.error('An error occured while trying to get the invoice.'));
+        });
+    
+    $("button#save-invoice").on("click",
+        e => {
+            var id = $("#InvoiceID", $formInvoiceEdit).val();
+            var state = $formInvoiceEdit.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('Invoices').find(id).put(state);
+            } else {
+                request = o('Invoices').post(state);
+            }
+
+            request
+                .save()
+                .then(model => {
+                    toastr.success('The invoice is successfully saved.');
+                    $dlgInvoiceEdit.modal('hide');
+                    $invoices.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the invoice.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Invoices.Table.js

@@ -0,0 +1,24 @@
+$(() => {
+    $("#invoices")
+        .DataTable({
+            ajax: "/Table/Invoices",
+            serverSide: true,
+            processing: true,
+            columns: [
+                { data: "InvoiceDate" },
+                { data: "CustomerPurchaseOrderNumber", defaultContent: "" },
+                { data: "CustomerName", defaultContent: "" },
+                { data: "SalesPersonName", defaultContent: "" },
+                { data: "ContactName", defaultContent: "" },
+                { data: "ContactPhone", defaultContent: "" },
+                {
+                    data: "InvoiceID",
+                    sortable: false,
+                    searchable: false,
+                    render: function (data) {
+                        return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalInvoiceDialog"> Edit</button>';
+                    }
+                }
+            ]
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Invoices.js

@@ -0,0 +1,3 @@
+/// Code is placed in the following files: 
+/// <reference path="invoices.table.js" />
+/// <reference path="invoices.edit.js" />

samples/databases/wide-world-importers/wwi-app/wwwroot/js/PackageTypes.js

@@ -0,0 +1,82 @@
+$(() => {
+    var $table =
+        $("#packageTypes")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/PackageTypes",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "PackageTypeName" },
+                    {
+                        data: "PackageTypeID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        },
+                        width: "100px"
+                    },
+                    {
+                        data: "PackageTypeID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        },
+                        width: "100px"
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('PackageTypes')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the package type.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('PackageTypes')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The package type is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the package type.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#PackageTypeID", $form).val();
+            var model = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('PackageTypes').find(id).put(model);
+            } else {
+                request = o('PackageTypes').post(model);
+            }
+
+            request
+                .save()
+                .then(e => {
+                    toastr.success('The package type is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the package type.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/PaymentMethods.js

@@ -0,0 +1,80 @@
+$(() => {
+    var $table =
+        $("#paymentMethods")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/PaymentMethods",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "PaymentMethodName" },
+                    {
+                        data: "PaymentMethodID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        }
+                    },
+                    {
+                        data: "PaymentMethodID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        }
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('PaymentMethods')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the payment method.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('PaymentMethods')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The payment method is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the payment method.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#PaymentMethodID", $form).val();
+            var model = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('PaymentMethods').find(id).put(model);
+            } else {
+                request = o('PaymentMethods').post(model);
+            }
+
+            request
+                .save()
+                .then(e => {
+                    toastr.success('The payment method is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the payment method.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/PurchaseOrders.Edit.js

@@ -0,0 +1,73 @@
+$(() => {
+
+    var $table = $("#orders").DataTable();
+    var $orderLines =
+        $("#orderLines")
+            .DataTable({
+                ajax: {
+                    url: "/OData/PurchaseOrderLines?$filter=PurchaseOrderLineID eq -1",
+                    dataSrc: "value"
+                },
+                columns: [
+                    { data: "Description" },
+                    { data: "OrderedOuters", defaultContent: "" },
+                    { data: "ExpectedUnitPricePerOuter", defaultContent: "" },
+                    { data: "ReceivedOuters", defaultContent: "" },
+                    { data: "ProductName", defaultContent: "" },
+                    { data: "IsOrderLineFinalized", defaultContent: "" },
+                    { data: "PackageTypeName", defaultContent: "" }
+                ]
+            });
+
+    var $formOrder = $("#EditPurchaseOrderForm");
+
+    o('DeliveryMethods')
+        .select('DeliveryMethodID,DeliveryMethodName')
+        .get(list => $("#DeliveryMethodID", $formOrder).view(list));
+
+    $("button#add").on("click", e => $formOrder[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $formOrder[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('PurchaseOrders')
+                .find(id)
+                .get()
+                .then(model => {
+                    $orderLines.clear().draw();
+                    $("body").trigger("open-order-edit");
+                    $formOrder.view(model.data);
+                    $orderLines.ajax.url("/OData/PurchaseOrderLines?$top=100&$filter=PurchaseOrderID eq " + id);
+                    $orderLines.ajax.reload();
+                })
+                .fail(e => {
+                    toastr.error('An error occured while trying to get the purchase order.');
+                });
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#PurchaseOrderID", $formOrder).val();
+            var state = $formOrder.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('PurchaseOrders').find(id).put(state);
+            } else {
+                request = o('PurchaseOrders').post(state);
+            }
+
+            request
+                .save()
+                .then(model => {
+                    toastr.success('The purchase order is successfully saved.');
+                    $table.ajax.reload();
+                    $("body").trigger("close-order-edit");
+                })
+                .fail(e => toastr.error('An error occured while trying to save the purchase order.'));
+        });
+    $("button#cancel").on("click",
+        e => {
+            $("body").trigger("close-order-edit");
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/PurchaseOrders.Table.js

@@ -0,0 +1,25 @@
+$(() => {
+    var $table =
+        $("#orders")
+            .DataTable({
+                ajax: "/Table/PurchaseOrders",
+                serverSide: true,
+                processing: true,
+                columns: [
+                    { data: "OrderDate" },
+                    { data: "SupplierReference", defaultContent: "" },
+                    { data: "ExpectedDeliveryDate", defaultContent: "" },
+                    { data: "ContactName", defaultContent: "" },
+                    { data: "ContactPhone", defaultContent: "" },
+                    { data: "IsOrderFinalized", defaultContent: "" },
+                    {
+                        data: "PurchaseOrderID",
+                        sortable: false,
+                        searchable: false,
+                        render: function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit"> Edit</button>';
+                        }
+                    }
+                ]
+            });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/PurchaseOrders.js

@@ -0,0 +1,15 @@
+$(() => {
+    // Transition rules
+    $("body")
+        .on("open-order-edit", e => {
+            $(".order-list").addClass("hidden");
+            $(".order-edit").removeClass("hidden");
+            window.scrollTo(0, 0);
+        })
+        .on("close-order-edit", e => {
+            $(".order-list").removeClass("hidden");
+            $(".order-edit").addClass("hidden");
+            window.scrollTo(0, 0);
+            $("#EditPurchaseOrderForm")[0].reset();
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/SalesOrders.Edit.js

@@ -0,0 +1,73 @@
+$(() => {
+    var $table = $("#orders").DataTable();
+    var $formOrder = $("#EditOrderForm");
+    var $orderLines =
+        $("#orderLines")
+            .DataTable({
+                ajax: {
+                    url: "/OData/SalesOrderLines?$top=0",
+                    dataSrc: "value"
+                },
+                columns: [
+                    { data: "Description" },
+                    { data: "Quantity", defaultContent: "" },
+                    { data: "UnitPrice", defaultContent: "" },
+                    { data: "TaxRate", defaultContent: "" },
+                    { data: "ProductName", defaultContent: "" },
+                    { data: "ColorName", defaultContent: "" },
+                    { data: "PackageTypeName", defaultContent: "" }
+                ]
+            });
+
+    $table.on("click", "button.edit",
+        e => {
+            e.preventDefault();
+            $formOrder[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('SalesOrders')
+                .find(id)
+                .get()
+                .then(model => {
+                    $orderLines.clear().draw();
+                    $("body").trigger("open-order-edit");
+                    $formOrder.view(model.data);
+                    $orderLines.ajax.url("/OData/SalesOrderLines?$filter=OrderID eq " + id);
+                    $orderLines.ajax.reload();
+                })
+                .fail(e => {
+                    toastr.error('An error occured while trying to get the sales order.');
+                    console.error(e);
+                });
+        });
+    
+    $("button#save-order").on("click",
+        e => {
+            var id = $("#OrderID", $formOrder).val();
+            var state = $formOrder.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('SalesOrders').find(id).put(state);
+            } else {
+                request = o('SalesOrders').post(state);
+            }
+
+            request
+                .save()
+                .then(model => {
+                    toastr.success('The sales order is successfully saved.');
+                    $table.ajax.reload();
+                    $("body").trigger("close-order-edit");
+                    $formOrder[0].reset();
+                })
+                .fail(e => {
+                    toastr.error('An error occured while trying to save the sales order.');
+                    console.error(e);
+                });
+        });
+
+    $("button#cancel-order-edit").on("click",
+        e => {
+            $("body").trigger("close-order-edit");
+            $formOrder[0].reset();
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/SalesOrders.Table.js

@@ -0,0 +1,24 @@
+$(() => {
+        $("#orders")
+            .DataTable({
+                ajax: "/Table/SalesOrders",
+                serverSide: true,
+                processing: true,
+                columns: [
+                    { data: "OrderDate" },
+                    { data: "CustomerPurchaseOrderNumber", defaultContent: "" },
+                    { data: "CustomerName", defaultContent: "" },
+                    { data: "ExpectedDeliveryDate", defaultContent: "" },
+                    { data: "PhoneNumber", defaultContent: "" },
+                    { data: "SalesPerson", defaultContent: "" },
+                    {
+                        data: "OrderID",
+                        sortable: false,
+                        searchable: false,
+                        render: function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit"> Edit</button>';
+                        }
+                    }
+                ]
+            });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/SalesOrders.js

@@ -0,0 +1,14 @@
+$(() => {
+    // Transition rules
+    $("body")
+        .on("open-order-edit", e => {
+            $(".order-list").addClass("hidden");
+            $(".order-edit").removeClass("hidden");
+            window.scrollTo(0, 0);
+        })
+        .on("close-order-edit", e => {
+            $(".order-list").removeClass("hidden");
+            $(".order-edit").addClass("hidden");
+            window.scrollTo(0, 0);
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/StateProvinces.js

@@ -0,0 +1,93 @@
+$(() => {
+    var $table =
+        $("#stateProvinces")
+            .DataTable({
+                serverSide: true,
+                processing: true,
+                ajax: {
+                    url: "/Table/StateProvinces",
+                    data: function (d) {
+                        if ($("#stateProvinces").data("$systemat") !== null)
+                            d.$systemat = $("#stateProvinces").data("$systemat");
+                    }
+                },
+                columns: [
+                    { data: "StateProvinceName" },
+                    { data: "StateProvinceCode" },
+                    { data: "SalesTerritory", defaultContent: "" },
+                    { data: "LatestRecordedPopulation", type: "numeric", defaultContent: "" },
+                    { data: "CountryName", defaultContent: "" },
+                    {
+                        data: "StateProvinceID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        }
+                    },
+                    {
+                        data: "StateProvinceID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete"><span class="glyphicon glyphicon-trash"></span> Delete</button>';
+                        }
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    o('Countries')
+        .select('CountryID,CountryName')
+        .get(countries => $("#CountryID", $form).view(countries));
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('StateProvinces')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the state.'));
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('StateProvinces')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The state is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the state.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#StateProvinceID", $form).val();
+            var state = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('StateProvinces').find(id).put(state);
+            } else {
+                request = o('StateProvinces').post(state);
+            }
+
+            request
+                .save()
+                .then(model => {
+                    toastr.success('The state is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the state.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/StockGroups.js

@@ -0,0 +1,82 @@
+$(() => {
+    var $table =
+        $("#stockGroups")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/StockGroups",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "StockGroupName" },
+                    {
+                        data: "StockGroupID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        },
+                        width: "100px"
+                    },
+                    {
+                        data: "StockGroupID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        },
+                        width: "100px"
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('StockGroups')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the stock group.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('StockGroups')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The stock group is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the stock group.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#StockGroupID", $form).val();
+            var model = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('StockGroups').find(id).put(model);
+            } else {
+                request = o('StockGroups').post(model);
+            }
+
+            request
+                .save()
+                .then(e => {
+                    toastr.success('The stock group is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the stock group.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/StockItems.Edit.js

@@ -0,0 +1,62 @@
+$(() => {
+    var $table = $("#stockItems").DataTable();
+    var $form = $("#EditStockItemForm");
+    var $dlg = $("#modalStockItemDialog");
+
+    o('PackageTypes')
+        .select('PackageTypeID,PackageTypeName')
+        .get(packageTypes => {
+            $("#UnitPackageID", $form).view(packageTypes);
+            $("#OuterPackageID", $form).view(packageTypes);
+        });
+
+    o('Colors')
+        .select('ColorID,ColorName')
+        .get(colors => $("#ColorID", $form).view(colors));
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('StockItems')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the stock item.'));
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('StockItems')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The stock item is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the stock item.'));
+        });
+
+    $("button#save-stock-item").on("click",
+        e => {
+            var id = $("#StockItemID", $form).val();
+            var state = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('StockItems').find(id).put(state);
+            } else {
+                request = o('StockItems').post(state);
+            }
+
+            request
+                .save()
+                .then(model => {
+                    toastr.success('The stock item is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the stock item.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/StockItems.Table.js

@@ -0,0 +1,37 @@
+$(() => {
+    $("#stockItems")
+        .DataTable({
+            serverSide: true,
+            processing: true,
+            ajax: {
+                url: "/Table/StockItems",
+                data: function (d) {
+                    if ($("#stockItems").data("$systemat") !== null)
+                        d.$systemat = $("#stockItems").data("$systemat");
+                }
+            },
+            columns: [
+                { data: "StockItemName" },
+                { data: "SupplierName", defaultContent: "" },
+                { data: "UnitPrice", defaultContent: "" },
+                { data: "TaxRate", defaultContent: "" },
+                { data: "RecommendedRetailPrice", defaultContent: "" },
+                {
+                    data: "StockItemID",
+                    "sortable": false,
+                    "searchable": false,
+                    "render": function (data) {
+                        return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalStockItemDialog"> Edit</button>';
+                    }
+                },
+                {
+                    data: "StockItemID",
+                    "sortable": false,
+                    "searchable": false,
+                    "render": function (data) {
+                        return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete"><span class="glyphicon glyphicon-trash"></span> Delete</button>';
+                    }
+                }
+            ]
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/StockItems.js

@@ -0,0 +1 @@
+

samples/databases/wide-world-importers/wwi-app/wwwroot/js/SupplierCategories.js

@@ -0,0 +1,82 @@
+$(() => {
+    var $table =
+        $("#supplierCategories")
+            .DataTable({
+                "ajax": {
+                    "url": "/OData/SupplierCategories",
+                    "dataSrc": "value"
+                },
+                "columns": [
+                    { data: "SupplierCategoryName" },
+                    {
+                        data: "SupplierCategoryID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalDialog"> Edit</button>';
+                        },
+                        width: "100px"
+                    },
+                    {
+                        data: "SupplierCategoryID",
+                        "sortable": false,
+                        "searchable": false,
+                        "render": function (data) {
+                            return '<button data-id="' + data + '" class="btn btn-danger btn-sm delete glyphicon glyphicon-trash"> Delete</button>';
+                        },
+                        width: "100px"
+                    }
+                ]
+            });
+
+    var $form = $("#EditForm");
+    var $dlg = $("#modalDialog");
+
+    $("button#add").on("click", e => $form[0].reset());
+
+    $table.on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('SupplierCategories')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the supplier category.') );
+        });
+
+    $table.on("click", "button.delete",
+        e => {
+            var id = e.target.attributes["data-id"].value;
+            o('SupplierCategories')
+                .find(id).remove()
+                .save()
+                .then(model => {
+                    toastr.success('The supplier category is successfully deleted.');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to delete the supplier category.'));
+        });
+
+    $("button#save").on("click",
+        e => {
+            var id = $("#SupplierCategoryID", $form).val();
+            var model = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+            var request;
+            if (id) {
+                request = o('SupplierCategories').find(id).put(model);
+            } else {
+                request = o('SupplierCategories').post(model);
+            }
+
+            request
+                .save()
+                .then(e => {
+                    toastr.success('The supplier category is successfully saved.');
+                    $dlg.modal('hide');
+                    $table.ajax.reload();
+                })
+                .fail(e => toastr.error('An error occured while trying to save the supplier category.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/SupplierTransactions.Edit.js

@@ -0,0 +1,40 @@
+$(() => {
+    
+    var $form = $("#EditSupplierTransactionForm");
+    var $dlg = $("#modalSupplierTransactionDialog");
+
+    o('TransactionTypes')
+        .select('TransactionTypeID,TransactionTypeName')
+        .get(list => $("#TransactionTypeID", $dlg).view(list));
+
+    o('PaymentMethods')
+        .select('PaymentMethodID,PaymentMethodName')
+        .get(list => $("#PaymentMethodID", $dlg).view(list));
+
+    $("#supplierTransactions").DataTable().on("click", "button.edit",
+        e => {
+            $form[0].reset();
+            var id = e.target.attributes["data-id"].value;
+            o('SupplierTransactions')
+                .find(id)
+                .get()
+                .then(model => $form.view(model.data))
+                .fail(e => toastr.error('An error occured while trying to get the supplier transaction.'));
+        });
+
+    $("button#save-supplier-transaction").on("click",
+        e => {
+            var id = $("#SupplierTransactionID", $form).val();
+            var state = $form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true });
+
+            o('SupplierTransactions').find(id).put(state)
+            .save()
+            .then(model => {
+                toastr.success('The supplier transaction is successfully saved.');
+                $dlg.modal('hide');
+                $("#supplierTransactions").DataTable().ajax.reload();
+            })
+            .fail(e => toastr.error('An error occured while trying to save the supplier transaction.'));
+        }
+    );
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/SupplierTransactions.Table.js

@@ -0,0 +1,24 @@
+$(() => {
+    $("#supplierTransactions")
+        .DataTable({
+            ajax: "/Table/SupplierTransactions",
+            serverSide: true,
+            processing: true,
+            columns: [
+                { data: "TransactionDate" },
+                { data: "TransactionAmount", defaultContent: "" },
+                { data: "IsFinalized", defaultContent: "" },
+                { data: "SupplierName", defaultContent: "" },
+                { data: "TransactionTypeName", defaultContent: "" },
+                { data: "PaymentMethodName", defaultContent: "" },
+                {
+                    data: "SupplierTransactionID",
+                    sortable: false,
+                    searchable: false,
+                    render: function (data) {
+                        return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit" data-toggle="modal" data-target="#modalSupplierTransactionDialog"> Edit</button>';
+                    }
+                }
+            ]
+        });
+});

samples/databases/wide-world-importers/wwi-app/wwwroot/js/SupplierTransactions.js

@@ -0,0 +1 @@
+

samples/databases/wide-world-importers/wwi-app/wwwroot/js/Suppliers.PurchaseOrderTable.js

@@ -0,0 +1,22 @@
+$(() => {
+    $("#orders").DataTable({
+        ajax: { url: "/OData/PurchaseOrders?$top=0", dataSrc: "value" },
+        processing: true,
+        columns: [
+            { data: "OrderDate" },
+            { data: "SupplierReference", defaultContent: "", visible: false },
+            { data: "ExpectedDeliveryDate", defaultContent: "" },
+            { data: "ContactName", defaultContent: "" },
+            { data: "ContactPhone", defaultContent: "" },
+            { data: "IsOrderFinalized", defaultContent: "" },
+            {
+                data: "PurchaseOrderID",
+                sortable: false,
+                searchable: false,
+                render: function (data) {
+                    return '<button data-id="' + data + '" class="btn btn-primary btn-sm edit glyphicon glyphicon-edit"> Edit</button>';
+                }
+            }
+        ]
+    });
+});