• June 24, 2022

How to create ASP.NET Web API using multivalue .NET Provider

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework.

In this tutorial, you will use Rocket U2 Toolkit for .NET v2.1.0 BETA and ASP.NET Web API to create a web API that returns a list of customers from Rocket U2 UniVerse Database.





Rocket U2 Database

  • U2 Toolkit for .NET v2.1.0 BETA +
  • U2 UniVerse or UniData Databases


  • Visual Studio 2013 Update 2 RC
  • NET Framework 4.5
  • Entity Framework 5.0 (Install-Package Entity Framework -Version 5.0.0)


  • JavaScript/HTML5
  • Knockout.js


Create Server Explorer Connection using Multi-value .NET Provider and Multi-Value Visual Studio


On the View menu, click Server Explorer
Right Click Data Connections->Add Connection…
Click “Change Data Source” and Select “U2 Database”


In U2 Add Connection Dialog, provide connection string parameters and click “Test Connection”


You can new connection node added to Server Explorer. If it is Native Connection, “Native” word is added in connection node.


Expand “U2Files” and “Stored Procedures”


Create Web API Project

Start Visual Studio and select New Project from the Start page. Or, from the File menu, select New and then Project.

In the Templates pane, select Installed Templates and expand the Visual C# node. Under Visual C#, select Web. In the list of project templates, select ASP.NET Web Application. Name the project “CustomerApp” and click OK.


Select Web API and uncheck “create remote resource”. Select Ok.


Adding ADO.NET Entity Data Model

Right click on Project and Select Add New Item.


On Right hand side, select “Data” and on left hand side select “ADO.NET Entity Data Model”. In the Name field , enter Customer. Select “Add” button


Select “EF Designer from database” and select “Next”


Select connection string and select “Yes” for sensitive data


Select Entity Framework 5.0 .
Note : v2.1.1 will include Entity Framework 6.0 functionality.


Select “Customer” File/Table and press “Finish”



Create Web API Controller using ADO.NET Entity Data Model

Right click on Controller and Add New Controller.


Select “Web API 2 OData Controller – Empty” and select “Add”


Rebuild the project. Build->Build solution
Type CustomerController


Insert the following code in CustomerController.cs file

public class CustomerController : ApiController
private Entities db = new Entities();
public IEnumerable GetAllCustomers()
return db.CUSTOMERs;;

public IHttpActionResult GetCustomer(int id)
var customer = db.CUSTOMERs.FirstOrDefault((p) => p.CUSTID == id);
if (customer == null)
return NotFound();
return Ok(customer);


Test Web API

Rebuild the project
Run CustomerApp
In the URL, type http://localhost:56733/api/Customer
You will see JSON data.

In Browser


Save in a file

fig17 - Copy

Calling the Web API with JavaScript/HTML5/MVVM Knockout.js

In this section, we’ll add an HTML page that uses AJAX to call the web API. We’ll use jQuery to make the AJAX calls and also to update the page with the results. We will use MVVM Knockout.js to display data on the page.

In Solution Explorer, right-click the project and select Add, then select New Item.
In the Add New Item dialog, select the Web node under Visual C#, and then select the HTML Page item. Name the page “index.html”.


Adding knockout.js Reference

A JavaScript MVVM library to help you create rich, dynamic user interfaces with clean maintainable code
To refer knockoutjs, run the following command in the Package Manager Console
PM> Install-Package knockoutjs

Create Knockout Model Class

var customermodel = function customermodelfunction(CUSTID, FNAME, LNAME, PRODID, BUY_DATE) {
var self = this;


Create Knockout View Model Class

var CustomerViewModel = function () {
var self = this;
selectedCustomer = ko.observable();
self.customers = ko.observableArray([]);
self.getCustomers = function () {

var url = “api/customer”;

$.getJSON(url, function (data) {
$.each(data, function (key, val) {
self.customers.push(new customermodel(val[“CUSTID”], val[“FNAME”], val[“LNAME”], val[“PRODID”], val[“BUY_DATE”]));


Completed Code in index.html file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="background-color: #00FFFF">
    <title>U2 Toolkit for .NET</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/knockout-3.1.0.js"></script>
            Building Data Driven  Web Appliation using Web API, Java Script, Knockout.js and HTML5
            Single-Value : CUSTID, FNAME, LNAME
            <br />
            Multi-Value  : PRODID, BUY_DATE

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/knockout-3.1.0.js"></script>


        <button type="submit" data-bind="click: getCustomers">Load</button>
        <table border="1" style="width:300px">

            <tbody data-bind="foreach: customers">
                    <td data-bind="text: CUSTID"></td>
                    <td data-bind="text: FNAME"></td>
                    <td data-bind="text: LNAME"></td>
                    <td data-bind="text: PRODID"></td>
                    <td data-bind="text: BUY_DATE"></td>




        var customermodel = function customermodelfunction(CUSTID, FNAME, LNAME, PRODID, BUY_DATE) {
            var self = this;
            self.CUSTID = CUSTID;
            self.FNAME = FNAME;
            self.LNAME = LNAME;
            self.PRODID = PRODID;
            self.BUY_DATE = BUY_DATE;


        var CustomerViewModel = function () {
            var self = this;
            selectedCustomer = ko.observable();
            self.customers = ko.observableArray([]);
            self.getCustomers = function () {

                var url = "api/customer";

                $.getJSON(url, function (data) {
                    $.each(data, function (key, val) {
                        self.customers.push(new customermodel(val["CUSTID"], val["FNAME"], val["LNAME"], val["PRODID"], val["BUY_DATE"]));




        ko.applyBindings(new CustomerViewModel());



Running the Application

Press F5 to start debugging the application. The web page should look like the following:


Source Code

– Email : u2askus@rocketsoftware.com
– Download : https://github.com/RocketSoftware/u2-servers-lab/tree/master/U2-Toolkit


Contact us to learn more about Rocket MultiValue Solutions.

Rocket Software 160 Posts

Rocket Software empowers organizations to create legendary impact in the world through innovation in legacy technologies. With deep expertise in IBM Z, IBM Power, and database and connectivity solutions, Rocket solutions power tens of thousands of global businesses, solving real problems and making real-world impact. With more than 70% of the world’s IT workload running on legacy platforms, Rocket helps companies and public-sector organizations innovate using the technology and data they already have, so they can always be ready for what comes next. Rocket customers include 44 of the Fortune 50, representing industries including Banking and Finance, Healthcare, Manufacturing, Transportation and Logistics, Retail and Insurance. A Bain Capital portfolio company, Rocket is headquartered in the Boston area with centers of excellence strategically located throughout North America, Europe, Asia, and Australia.


Leave a Comment

Your email address will not be published.