• 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.

 

 

Prerequisite

 

Rocket U2 Database

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

 Microsoft

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

Others

  • JavaScript/HTML5
  • Knockout.js

 

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

Add-ins

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

fig1

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

fig2

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

fig3

Expand “U2Files” and “Stored Procedures”

fig4

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.

fig5

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

fig6

Adding ADO.NET Entity Data Model

Right click on Project and Select Add New Item.

fig7

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

fig8

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

fig9

Select connection string and select “Yes” for sensitive data

fig10

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

fig11

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

fig12

fig13

Create Web API Controller using ADO.NET Entity Data Model

Right click on Controller and Add New Controller.

fig14

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

fig15

Rebuild the project. Build->Build solution
Type CustomerController

fig16

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

fig17a

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”.

fig18

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;
self.CUSTID = CUSTID;
self.FNAME = FNAME;
self.LNAME = LNAME;
self.PRODID = PRODID;
self.BUY_DATE = BUY_DATE;

}

Create Knockout View Model Class


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

self.customers.removeAll();
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">
<head>
    <title>U2 Toolkit for .NET</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/knockout-3.1.0.js"></script>
</head>
<body>
    <hgroup>
        <h1>
            Building Data Driven  Web Appliation using Web API, Java Script, Knockout.js and HTML5
        </h1>
        <h4>
            Single-Value : CUSTID, FNAME, LNAME
            <br />
            Multi-Value  : PRODID, BUY_DATE
        </h4>
    </hgroup>

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

    <form>

        <button type="submit" data-bind="click: getCustomers">Load</button>
        <table border="1" style="width:300px">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>FNAME</th>
                    <th>LNAME</th>
                    <th>PRODID</th>
                    <th>BUY_DATE</th>

                </tr>
            </thead>
            <tbody data-bind="foreach: customers">
                <tr>
                    <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>

                </tr>
            </tbody>
        </table>

    </form>

    <script>

        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 () {

                self.customers.removeAll();
                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());

    </script>

</body>
</html>

Running the Application

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

fig19

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.

0 Comments

Leave a Comment

Your email address will not be published.