How and where to add JQuery in Module project in DotnetNuke(DNN)?

Question

I am beginner in DotnetNuke. I am creating a project which provide a Module that can be add in DotnetNuke based website.

I have configured www.dnndev.me in my IIS server and created project in DesktopModule folder of it. I can create, build and add my module to www.dnndev.me successfully but I don't know where to add JQuery in Solution Explorer of my module project.

1- Where should I add my JS and CSS files? I have tried by adding a folders "Assets", "Assets/CSS", "Assets/JS" and put my files there in my solution explorer.

2- How to include JS/CSS files in ascx page? I have tired by following

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="View.ascx.cs" Inherits="CustomerDemo.Modules.CustomerDemo.View" %>
<dnn:DnnCssInclude runat="server" FilePath="~/DesktopModules/CustomerDemo/Assets/JS/fullcalendar.min.js" />
<dnn:DnnCssInclude runat="server" FilePath="~/DesktopModules/CustomerDemo/Assets/JS/jquery-ui-timepicker-addon.js" />

By above way .js shows in my source of webpage but it doesn't call. But if I try by following way, it works

<script type="text/javascript">
    $(document).ready(function () { $.getScript("http://www.dnndev.me/DesktopModules/CustomerDemo/Assets/JS//jquery-ui-timepicker-addon.js?_=1483026285109", function () {
            if ($('.mmdd').length > 0) {
               $(".mmdd ").datetimepicker();
            }
        });
    });
</script>

Can anybody please suggest me how and where to place .js and '.css' files and how to include them in project?

I am using: Visual Studio 2015 & DotnetNuke 8 Commnunity

File path confusion:

This is my physical location of folder when I open by Right Click--> Open with folder explorer

F:\websites\dnndev.me\DesktopModules\CustomerDemo\CustomerDemo\Assets

But when I drag CSS or JS file from file explorer to ascx design page, it use this location: "~\DesktopModules\CustomerDemo\Assets\file.css"

you can see that the physical path has 2 folder of CustomerDemo and the file dragged from solution explorer having path with only 1 CustomerDemo folder.

I don't understand this mechanism. Which one should I use? Can somebody clear my mind for this?

I have tried this way as one of the suggestion but it looks like I am missing something

score 0 · Answer 1 · answered Dec 30 '16 at 14:55

0

Use the DnnJsInclude control of the Client Resource Management for registering scripts instead of the DnnCssInclude.

In your .ascx:

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/CustomerDemo/Assets/JS/fullcalendar.min.js" />

OR in your code behind, you could instead use the ClientResourceManager API:

protected void Page_PreRender(object sender, EventArgs e)
{
    ClientResourceManager.RegisterScript(this.Page, base.ControlPath + "/Assets/JS/fullcalendar.min.js", 100);
    ClientResourceManager.RegisterScript(this.Page, base.ControlPath + "/Assets/JS/jquery-ui-timepicker-addon.js", 100);
    ClientResourceManager.RegisterStyleSheet(this.Page, base.ControlPath + "/Assets/CSS/module.css", 100);
}

answered Dec 30 '16 at 14:55

Fix It Scotty

2,852
11
12

Hi, Thanks. I have another File path confusion in that context. I have added more information in my question. It is about file location of CSS and JS. That can be one of reason for not adding files. Can you please guide me for it? – Nanji Mange Jan 02 '17 at 04:51
Can you please guide me? I am damn stuck as none of my JS works as expected. – Nanji Mange Jan 04 '17 at 14:25
Nanji, use the base.ControlPath to get the relative path to the ascx like I did in the above example. If you have the Client Resource Management settings turned off in Host > Host Settings, then you should be able to inpect the page and look if your script includes have the correct path. – Fix It Scotty Jan 04 '17 at 16:13
I have tried your way. It looks like I am missing something. I have added screenshot of Pre-Render event and references. Can you please guide me to add reference here?(How and where) – Nanji Mange Jan 05 '17 at 04:48
Nanji, you are missing a reference to DotNetNuke.Web.Client. – Fix It Scotty Jan 05 '17 at 15:29

How and where to add JQuery in Module project in DotnetNuke(DNN)?

1 Answers1