Custom technique, Action Menu, Navigation, Module path reference - Part 1
Yesterday, i post about DNN Quick Module Management. It's a simple module that show you about some DNN capabilities (including ClientAPI). Now, many of my friends ask me that can DNN module be built with C# language ?
The answer is YES.
There are many ways to create DNN module. You can use DNN Templates (both C# and VB are available). Or you can create DNN module just like ASP .NET Web Application Project as usual. You can seperate DNN module project from it's source and manage with your own Visual Source Safe. Ok, stop speaking, just show me what you are talking about ! :)
First, i'm gonna create my simple UI like this :
You see, there are a couple things that i'm gonna cover in this tutorial :
- How to add custom drop down action menu (eg. "Goto Page2", "Goto Page3"). This custom dropdown action menu also will render as link button as you see above (look at below the module, you see a link "Goto Page2" and "Goto Page3")
- How to refer to a relative path to your module directory (like the Vista image)
- How to navigate between one .ascx to other .ascx in one module.
Let's DNN rock !
You know, there are many ways to create DNN module. What i'm gonna tell you is another technique that usually i use in every module development in my company. I'm gonna explain with a short way :
- Create a new folder under DesktopModules folder. Name it with MyModule folder.
- Create one .ascx (eg. name it with Injector.ascx) under MyModule folder. This Injector.ascx will act as control injector for every .ascx that you want to add into your module. This is the file that will be recognized by DNN Framework as a default View for MyModule module. Injector.ascx only have one PlaceHolder control. So, you have to put your PlaceHolder control onto Injector.ascx.
- Write code to handle control injection.
Suppose that you have opened your dotnetnuke web project. Just right click to DesktopModules folder, create a new folder and name it with MyModule folder.
Right click on MyModule folder, and click Add New Item. Choose Web User Control, name it with Injector.ascx (don't forget to choose Visual C# as a language from language drop down list)
Do the same thing, and add 3 more files. Name it each : Home.ascx, Page2.ascx, Page3.ascx (don't forget to choose Visual C# as a language)
By default your .ascx file will always be inherited from System.Web.UI.UserControl. Change it to DotNetNuke.Entities.Modules.PortalModuleBase for each file.
To save your time, just add this reference to your Injector.ascx.cs :
using DotNetNuke.Entities.Modules;
using DotNetNuke.Entities.Modules.Actions;
using DotNetNuke.Common;
Right below your class code, add this code :
private string m_ControlToLoad;
Then, add this functionality (i will explain it after code) :
private void LoadControlType()
{
PortalModuleBase objPMB = (PortalModuleBase) this.LoadControl(m_ControlToLoad);
if (objPMB != null)
{
objPMB.ModuleConfiguration = this.ModuleConfiguration;
objPMB.ID = System.IO.Path.GetFileNameWithoutExtension(m_ControlToLoad);
plhControl.Controls.Add(objPMB);
}
}
LoadControlType method is used to inject your other .ascx. First, you have to create one PortalModuleBase instance, and load a control based on m_ControlToLoad variable and cast it to PortalModuleBase object (that's why your .ascx should inherit from PortalModuleBase class). m_ControlToLoad only a string variable that used to keep your .ascx file name. You have to declare it as private right under your class.
This method also will check if objPMB is null. If it doesn't, then it will put ModuleConfiguration information to your PortalModuleBase instance (objPMB). Then, you set the ID property based on m_ControlToLoad value. You see that System.IO.Path.GetFileNameWithoutExtension is used because the PortalModuleBase ID is based on relative path on your module including filename without extension. This is only make sure that you load the appropriate module. Last, you inject your PortalModuleBase instance (objPMB) into your plhControl object.
After you add LoadControlType method, you have to create another method :
private void ReadQueryString()
{
string qs = string.Empty;
if (Request.QueryString["ControlType"] != null)
{
qs = Request.QueryString["ControlType"].ToString();
}
if (qs != string.Empty)
{
switch (qs.ToLower())
{
case "home":
m_ControlToLoad = "Home.ascx";
break;
case "page2":
m_ControlToLoad = "Page2.ascx";
break;
case "page3":
m_ControlToLoad = "Page3.ascx";
break;
default:
m_ControlToLoad = "Home.ascx";
break;
}
}
else
{
m_ControlToLoad = "Home.ascx";
}
}
ReadQueryString method is used to catch querystring name (in this case is ControlType) and check its value. You have to determine which page should be the default page that will load automatically if no querystring exist. In this case, i use Home.ascx as the default value.
Last, put your methods into Page_Init method like this :
protected void Page_Init(object sender, EventArgs e)
{
ReadQueryString();
LoadControlType();
}
Next step is register your module to DNN Framework. Go to your DotNetNuke website. Login as a Host. Then, go to Host --> Module Definitions. Choose Create New Modules. On Edit Module Definitions page, fill this information :
Module Name : MyModule
Folder Name : MyModule
Friendly Name : MyModule
Description : This is mymodule description (blah..blah..blah) :)
Click Update
Then, fill this information :
New Definition : MyModule
Click Add New Definition
Click Add Control
After that, you will see a Edit Module Control page. Fill this information :
Source : DesktopModules/MyModule/Injector.ascx
Type : View
Click Update
That's all !
Is that finished ? No. Not yet folks. :) Next, we will cover how to navigate between one .ascx to another and how to refer to your module folder path in second part.
Stay tune !
Go to Part 2.