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 API that
returns a list of products and how to consume the returned objects with
the ShieldUI Grid widget.
You can download the complete code here.
You can download the complete code 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:
1
2
3
4
5
6
7
8
9
10
| 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| 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.
/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:
1. Include references to all required scripts:
1
2
3
4
5
6
7
| <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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div id="grid" style="width: 500px; font-size: 13px"></div> <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:
Posted on Monday, January 13, 2014 4:30 AM
web api
| Back to top
