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”
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
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;
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:
Source Code
– Email : u2askus@rocketsoftware.com
– Download : https://github.com/RocketSoftware/u2-servers-lab/tree/master/U2-Toolkit
0 Comments