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

Answer 1

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);
}