Working With Kendo Window Using ASP.NET WEB API

Main Objective of this Article

This article shows how to work with Kendo window using the ASP.NET WEB API.

Requirements

  • Visual Studio 2010 and above
  • Fiddler/Postman for testing

Before going through this article ensure that you have a basic understanding of the MVC Architecture, ASP.NET Web API and jQuery.

Create one WEB API application as shown in Figure 1 and 2,

  
                                                               Figure 1 
 
  
                                         Figure 2 

Create Controller: Create an empty controller as in the following figure 3: 

  
                                                         Figure 3  
  1. [RoutePrefix("api/Kendo")]  
  2. public class WindowController : ApiController  
  3. {  
  4.     [HttpGet]  
  5.     [Route("Window")]  
  6.     public HttpResponseMessage WindowContent()  
  7.     {  
  8.         return Request.CreateResponse(HttpStatusCode.OK, "Hello this is Kendo Window", Configuration.Formatters.JsonFormatter);  
  9.     }  
  10. }  

The above controller will return the simple ”Hello this is Kendo window” as a response for the request.

Test the API using POSTMAN/Fiddler:

URI: /api/Kendo/Window

Type: GET

API Response as in the following figure 4,
 
 
                                                   Figure 4 

Consume the API service in Kendo Window

Create one HTML page in the project.

Here is my design: 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <style type="text/css">  
  18.     @media print 
  19.    {  
  20.         body * 
  21.         {  
  22.             display: none;  
  23.         }  
  24.   
  25.         body .window-prototype 
  26.         {  
  27.             display: block;  
  28.         }  
  29.     }  
  30. </style>  
  31. <body>  
  32.     <div id="print" class="window-prototype"></div>  
  33.     <button onclick="OpenOrderEntry()">Click</button>  
  34.     <script>  
  35. function OpenOrderEntry() 
  36.    {  
  37.      var dialog = $(".window-prototype").kendoWindow
  38.          ({  
  39.             width: "1300px",  
  40.             height: "280px",  
  41.             modal: false,  
  42.             content: "api/Kendo/Window",     
  43.             resizable: true,  
  44.             actions: ["Minimize", "Maximize", "Close"],  
  45.             title: "Kendo Window"  
  46.          }).data("kendoWindow").open();  
  47.       
  48.   
  49.   
  50. }  
  51.     </script>  
  52. </body>  
  53. </html>  
Result in Browser
 
  
 

I hope you enjoyed this article. Your valuable feedback, question, or comments about this article are always welcome.
 
Read more articles on ASP.NET: