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.
- DotNetNuke.dll
- DotNetNuke.Web.dll
- System.Net.Http.dll
- System.Net.Http.formatting.dll
- System.Web.Http.dll
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:
- public class ProfilePropertyController: DnnApiController {
- TestTableDataContext db = new TestTableDataContext();
- [HttpGet]
- [AllowAnonymous]
- public IEnumerable < ProfilePropertyDefinition > ProfileProperty() {
- return db.ProfilePropertyDefinitions;
- }
- }
- public class RouteMapper: IServiceRouteMapper {
- public void RegisterRoutes(IMapRoute mapRouteManager) {
- mapRouteManager.MapHttpRoute("MyServicesTest", "default", "{controller}/{action}", new[] {
- "MyServicesTest"
- });
- }
- }
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:
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
- <script>
- $(document).ready(function() {
- var carsDataSource = new kendo.data.DataSource({
- transport: {
- read: {
- url: "/DesktopModules/MyServicesTest/API/ProfileProperty/ProfileProperty",
- dataType: "json",
- type: "GET",
- contentType: "application/json; charset=utf-8",
- },
- },
- shema: {
- model: {
- id: "PropertyDefinitionID",
- field: {
- PropertyCategory: {
- editable: false,
- nullable: false,
- type: "string"
- },
- PropertyName: {
- editable: false,
- nullable: false,
- type: "string"
- },
- }
- }
- }
- });
- $("#grid").kendoGrid({
- dataSource: carsDataSource,
- height: "500px",
- pageable: {
- refresh: true,
- pageSizes: true,
- buttonCount: 5
- },
- columns: [{
- field: "PropertyCategory ",
- title: "Type "
- },
- {
- field: "PropertyName",
- title: "Name"
- },
- {
- field: "ViewOrder",
- title: "SortOrder",
- template: " < input value = '#=ViewOrder#' data - bind = 'value:ViewOrder' type = 'number' data - role = 'numerictextbox' / > ",
- },
- {
- title: "HelpText",
- template: " < input id = 'txt_help' value = '' / > ",
- },
- {
- title: "FieldDescription",
- template: " < input id = 'txt_description' value = '' / > ",
- },
- {
- title: "Activate",
- width: "70px",
- template: " < input id = 'txt_activate'type = 'checkbox' / > "
- },
- { command: ["edit", "destroy"] }
- ],
- toolbar: ["create"],
- editable: "popup",
- });
-
- <div class="main-content">
- <div id="grid"></div>
- </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.