DotNetNuke Module Development With Kendo UI and WEB API

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",//this is the HttpGet service
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, 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.