Using ASP.NET Web API Framework
ASP.NET Web API is a framework for building web APIs on top of the .NET Framework. In this blog post we will show how to create a web service that returns a list of products and how to consume it and display the returned objects with the ShieldUI Grid widget.
The complete code for this example can be downloaded from here.
Creating the Web API project
The first step is to start Visual Studio 2013, then select New Project from the File menu and choose ASP.NET Web Application and press the OK button:
In the next step, choose Empty project and check the Web API checkbox, as shown below:
Adding a Model
Next, we create a model, which will contain the data of the application. The good news is that Web API will automatically serialize the model to JSON, XML or other formats. To create a Products model, right-click on the Models folder and choose Add->Class:
Then, add the following class:
namespace ProductsApplication.Models
{
public class Product
{
public int ID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}
}
Adding a Controller
In Solution Explorer, right-click the the Controllers folder. Select Add and then select Controller. This is demonstrated below:
Then, in the Add Scaffold dialog, select the Web API Controller - Empty. Click Add:
Then type the name of the controller. In our case, this is ProductsController:
Once this is done, go to the newly generated ProductsConntroller class and add a collection of products and a method which returns these products. The sample code below demonsrates one such approach:
public class ProductsController : ApiController
{
List<Product> products = new List<Product>
{
new Product { ID = 1, Name = "Ikura", Category = "Seafood", Price = 31.00M },
new Product { ID = 2, Name = "Chai", Category = "Beverages", Price = 18.00M },
new Product { ID = 3, Name = "Queso Cabrales", Category = "Dairy Products", Price = 21.00M },
new Product { ID = 4, Name = "Queso Manchego La Pastora", Category = "Dairy Products", Price = 30.00M },
new Product { ID = 5, Name = "Chang", Category = "Beverages", Price = 19.00M }
};
public IEnumerable<Product> GetAllProducts()
{
return products;
}
}
To call the GetAllProducts method you need to request the following URLs:
/api/products
More information about routing you can find here.
Consuming the Web API with shieldGrid
The shieldGrid is a JavaScript widget build on the top of the hmtl5 and css3 technology so we just need a simple html page:
You can download the shieldGrid related resources from this download page. In order to take advantage of the functionalities offered by our grid component, you will need to:
1. Include references to all required scripts:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" >
<link rel="stylesheet" type="text/css" href="css/all.min.css">
<script src="js/jquery-1.10.2.min.js" type="text/javascript"</script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>
2. Add the control declaration along with the desired properties.
<script type="text/javascript">
$(document).ready(function () {
$("#grid").shieldGrid({
dataSource: {
remote: {
read: {
url: "api/products"
},
cache: true
},
},
columns: [
{ field: "ID", width: "70px", title: "ID" },
{ field: "Name", title: "Name", width: "240px" },
{ field: "Category", title: "Category", width: "250px" },
{ field: "Price", title: "Price", forat: "{0:c}" }
]
});
});
</script>
When you open an Index.html page into the browser the result will be:
