Main Objective of this Article

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

Requirements

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>
  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">
  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. }
  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();
  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: