Before going through this article ensure that you have a basic Knowledge of MVC Architecture and ASP.NET Web API.
Let we start with creating a REST service using WEB API.
Just create a WEB API project in Visual Studio as shown in Figures 1 and 2:
![]()
Figure 1
![]()
Figure 2
Creating a Model Classes
Right-click on the model folder and create a class, in my case I named it Product.
Write the following code in the Product.cs model class.
- public class Product {
- [Key]
- [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
- public int ProductID {
- get;
- set;
- }
- [Required]
- public string ProductName {
- get;
- set;
- }
- [Required]
- public string UnitPrice {
- get;
- set;
- }
- }
Here I am using Entity Framework Code first technique so we need to create the context class.
Right-click on the model folder and create one more class, in my case I named it ProductContext.
Write the following code in ProductContext class.
- public class ProductContext: DbContext {
- public ProductContext(): base("name=TestConnection") {}
- public DbSet < Product > Products {
- get;
- set;
- }
- }
Scaffolding the WEB API Controller Class
Note: Before doing Scaffolding build your application once.
Right-click on Controller folder then selelct Add--> Controller and create a WEB API class as shown in 3 and 4.
![]()
Figure 3
![]()
Figure 4
The preceding procedure will scaffold the REST full service in the ProductsController.cs.
You will get some pre-defined HTTP GET, POST, PUT and DELETE requests/responses in the products Controller. Modify the code based on your application requirements. For this example I didn't modify the code.
Now the REST services are created , it's time to create a Kendo UI List View to consume the services.
Before implementing the service in the Kendo UI once check that in Postman / Fiddler.
Creating a Kendo List View with Remote Binding
Create a HMTL page in your project, in my case I named it KendoList.html.
Desgin in KendoList.html
JavaScipt with MVVM Model
- $(document).ready(function() {
- var viewModel = kendo.observable({
- isVisible: true,
- ProductName: '',
- UnitPrice: '',
- products: new kendo.data.DataSource({
- batch: true,
- transport: {
- read: {
- url: "api/Products",
- dataType: "json"
- },
- parameterMap: function(options, operation) {
- if (operation !== "read" && options.models) {
- return {
- models: kendo.stringify(options.models)
- };
- }
- }
- },
- schema: {
- model: {
- id: "ProductID",
- }
- },
- }),
- InsertProduct: function(e) {
- e.preventDefault()
- $.ajax({
- type: "POST",
- url: 'api/Products',
- data: {
- ProductName: $("#ProductName").val(),
- UnitPrice: $("#UnitPrice").val()
- },
- })
- }
- });
- kendo.bind($("#example"), viewModel);
- })
Result in a browser![]()
Figure 5
To show the structure of the Kendo list I already inserted one product into it.
We will start to add one more new product as shown in 6 and 7.
![]()
Figure 6
![]()
Figure 7
Check the table in your SQL database:
![]()
Yes, the records are inserted into the table.
That's it, I hope you have enjoyed this article, thank you.
Happy Coding.