Before starting this you should be experienced with working with DNN CMS module development and you should have some basic idea of WebApi.
Yes, we will start by creating a class library.
Here I am creating the WEB API using the simple class library, first I would like to explain that I am explaining DNN Module development with the WEB API.
Create a new class library project using Visual Studio with .NET Framework 4.0 or higher as in the following:
Add the following libraries to your project, set your output path to the root /bin folder.
Create your own controller class in your class library project.
Now I am trying to access my Microsoft SQL DB with LINQ to SQL to retrieve my table records in the service method.
In my case the code is:
  1. public class ProfilePropertyController: DnnApiController {
  2. TestTableDataContext db = new TestTableDataContext();
  3. [HttpGet]
  4. [AllowAnonymous]
  5. public IEnumerable < ProfilePropertyDefinition > ProfileProperty() {
  6. return db.ProfilePropertyDefinitions;
  7. }
  8. }
  9. public class RouteMapper: IServiceRouteMapper {
  10. public void RegisterRoutes(IMapRoute mapRouteManager) {
  11. mapRouteManager.MapHttpRoute("MyServicesTest", "default", "{controller}/{action}", new[] {
  12. "MyServicesTest"
  13. });
  14. }
  15. }
Now, it's time to check your service, using POSTMAN or Fiddler.
This is my endpoint, you will get a different one based on your project and controller Name.
Desktop Modules
If your service is working then you will get a response in JSON format like this:
That's it! The service was created.
It's time to consume the service in the DNN Module.
To install the DNN module template in Visual Studio, please go through this:
DotNetNuke Explained: Basic Module Development
Create a new empty DNN module using christoc's template in Visual Studio as in the following:
Open the view.ascx page.
Now I am trying to bind the HTTP get response in my Kendo Grid as in the following:
    1. <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
    2. <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
    3. <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
    4. <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
    5. <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
    6. <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
    7. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    8. <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
    9. <script>
    10. $(document).ready(function() {
    11. var carsDataSource = new kendo.data.DataSource({
    12. transport: {
    13. read: {
    14. url: "/DesktopModules/MyServicesTest/API/ProfileProperty/ProfileProperty", //this is the HttpGet service
    15. dataType: "json",
    16. type: "GET",
    17. contentType: "application/json; charset=utf-8",
    18. },
    19. },
    20. shema: {
    21. model: {
    22. id: "PropertyDefinitionID",
    23. field: {
    24. PropertyCategory: {
    25. editable: false,
    26. nullable: false,
    27. type: "string"
    28. },
    29. PropertyName: {
    30. editable: false,
    31. nullable: false,
    32. type: "string"
    33. },
    34. }
    35. }
    36. }
    37. });
    38. $("#grid").kendoGrid({
    39. dataSource: carsDataSource,
    40. height: "500px",
    41. pageable: {
    42. refresh: true,
    43. pageSizes: true,
    44. buttonCount: 5
    45. },
    46. columns: [{
    47. field: "PropertyCategory ",
    48. title: "Type "
    49. },
    50. {
    51. field: "PropertyName",
    52. title: "Name"
    53. },
    54. {
    55. field: "ViewOrder",
    56. title: "SortOrder",
    57. template: " < input value = '#=ViewOrder#' data - bind = 'value:ViewOrder' type = 'number' data - role = 'numerictextbox' / > ",
    58. },
    59. {
    60. title: "HelpText",
    61. template: " < input id = 'txt_help' value = '' / > ",
    62. },
    63. {
    64. title: "FieldDescription",
    65. template: " < input id = 'txt_description' value = '' / > ",
    66. },
    67. {
    68. title: "Activate",
    69. width: "70px",
    70. template: " < input id = 'txt_activate'type = 'checkbox' / > "
    71. },
    72. { command: ["edit", "destroy"] }
    73. ],
    74. toolbar: ["create"],
    75. editable: "popup",
    76. });
    78. <div class="main-content">
    79. <div id="grid"></div>
    80. </div>
    From the preceding design, I used to bind only two record properties, category and property name from my table, In the rest of the column I tried to insert the Kendo TextBox and Kendo checkboxes in the grid.
    Now your grid is populated. In the future, I will explain how to do create, update, and delete in a Kendo Grid using the Web API in DNN.
    That's it, enjoy coding.
    I have attached my DNN module source code and class library project for your reference.