DNN Guide: DNN and jQuery Development

A Comprehensive Guide: DNN and jQuery Development

What Is jQuery and Why Do I Want to Use It?

DNN or DotNetNuke, first introduced in February 2009 as DotNetNuke Professional Edition, is a web content management system and application framework. Unlike WordPress that's written in PHP, the DNN platform is written in C#. However, it has already existed in the past as a VB.Net project. Apart from Microsoft .Net, one can also use DNN and jQuery functionality together.

For the sake of those who don't know what jQuery functionality means, we'll talk about everything you need to know about it in this article, including how you can use it on your DNN platform. jQuery, initially released in 2006 by the jQuery team, is a JavaScript library created to help simplify HTML Dom tree traversal. Apart from that, it's also designed to make event handling, Ajax, and CSS animation easy. Since jQuery was created, it has so far attracted tens of millions of people from across the world.

According to a recent study, about 73% of the world's popular websites utilize jQuery. Surely, you'll agree with us that there are several types of JavaScript libraries. However, among them all, jQuery remains the most widely deployed library. To be precise, it's more in use about three to four times more than other JavaScript libraries.

Although you can always make use of other JavaScript libraries such as Angular in DNN, we'll only be talking about the jQuery functionality for the sake of this post.

Make the most of your DNN cms by using jquery

DNN and jQuery Functionality

Before moving forward, it's worth noting that DNN is one of the few CMS that loads very fast. Apart from that, DNN also makes use of jQuery by default. With that, it means there won't be any reason to register a script or run a call through to the CDN.

Furthermore, you'll be able to use the jQuery functionality on DNN by doing the following. First, you need to open up the View.ascx file. In case you don't know, it is located in the Visual Studio. From there, navigate to the Code view. You'll see a DIV on the left, which you can always use to add tasks. Similarly, you'll also see a DIV on the right of the Code view. This time around, you'll only be able to use that for listing out the added tasks. Also, on the right, you'll see some placeholder information in the Task List DIV. Now, all that is required is to write some jQuery, using the functionality on the DNN, for the tasks to start showing up.

jQuery is already included in DNN by default

How to Install jQuery on DotNetNuke

In case you're making use of DNN 4.9.1 and higher versions, it's worth noting that jQuery is already included in DNN by default. That said, to install jQuery on DotNetNuke, you need to first locate the last closing </div> tag. And beneath it, you can start a script block. If you're a front end developer, you will surely find this interesting. However, if you're just a starter, all you need to do to install jQuery on DotNetNuke (DNN) and start a script block is to include the code: <script type =”text/javascript”></script>

With that, the next thing to do to install jquery on DotNetNuke is to add some jQuery code. The purpose of that is to help fetch the JSON. Speaking of jQuery, it has a method, more of a short-hand AJAX, which it uses to fetch JSON. Next, ensure you update your script block to look like the following code:

That's about how you can install jQuery on DotNetNuke. However, you'll be able to gain more insight regarding that here.

<;script type="text/javascript">
$.getJSON(
"/DesktopModules/MyFirstModule/API/ModuleTask/GetTasks?moduleId=416",
function (result) {
var parsedTaskJSONObject = jQuery.parseJSON(result);
console.log(parsedTaskJSONObject);
});
<;/script>

Getting the absolute best results from your jQuery applications

Tips to Integrate jQuery on DotNetNuke

As mentioned earlier, DNN utilizes jQuery by default. Even at that, as a DotNetNuke developer, there are several tips that you need to follow, to be able to integrate jQuery easily into their modules. And that's what I'm about to share with you below.

1- Ensure You Call

To integrate your jQuery in DNN, you need to make a call. The essence of that is to prevent other client scripts and libraries from running errors. Since they can be utilizing the $ sign for a JavaScript class, you need to make a call like this; [jQuery.noConflict(); documentation].

2- Reduce Page Load Time

Admittedly, DNN offers a fast load time when you use it with jQuery. However, to make it even better, you need to utilize the jQuery hosted option. With that, even when the hosted source is finding it difficult to host the library, you can rest assured that the page load time won't be affected.

2- For Manual Addition Of jQuery

In case you manually added your jQuery in DNN, ensure you first load the library in the header. If you don't do that, the jQuery might end up not loading before other libraries try to make use of it.

3- Identify The jQuery Source Code

Earlier, I mentioned that you need to make a call using jQuery.noConflict();. However, it's worth noting that not all jQuery plugins support the long-form calling. As such, you should try and check the source code to avoid running errors.

Top 5 Benefits of DNN as A CMS Platform

Clarity WordPress Experts

Just like WordPress, the CMS platform also offers its users with a lot of benefits. Let's have a quick look at some of them below:

1- User-friendly
One of the benefits of using DNN is that it offers its users the ability to work seamlessly. Irrespective of who you are, the platform will provide you the ease of use. With that, it means you don't have to have pre-existing or programming knowledge of the DotNetNuke before using it.
2- Mobile website support
In this new age, where most people prefer to have access to any information on the go, creating a mobile-friendly website is a must - and DNN offers that. In case you don't know, the platform has a unique utility, called the DNN evoq. It makes use of its amazing templates to design responsive websites that meet users' needs.
3- Ready-made e-commerce Solution
Another benefit of DNN is that it features a built-in e-commerce solution, for several services. They include digital downloads, sales of physical goods, and events. Furthermore, the platforms work with the likes of Paypal, Google Checkout, and a few other popular payment gateways.
4- High Performance
By using DNN, you won't have to worry about slow load time, as it loads websites quickly for visitors. Well, the CMS platform can do that because it packs some amazing features. They include page caching, module caching, and web farms. Furthermore, DNN also brings the best out of SEO.
5- Cost-effectiveness and Security
To start with, the DNN platform is cost-effective, irrespective of its version that you're opting for. Furthermore, it also has several security measures in place, which it uses to protect its users.