Custom Controls Project

The registration module supports the following three custom events that you can plug your own custom visual studio project and code into:
 
  1. RenderControl() This function will be called before the registration form populated (similar to the page load event), you can get some data here from the database and use it with your custom controls.  This function requires a custom UI control to be added to your form.
  2. SubmitControl() This function is called when you click the "Submit" button on the step 1 page.  In this function you can validate your custom control values and return a message to the user if the value(s) does not meet requirements.  This function requires a custom UI control to be added to your form.
  3. OnCheckoutComplete() This function is called when you click the "Submit" button on the confirm page.   This function is only called if the registration was successful.  This custom event can be used to do anything after the user successfully registers and an Invoice & Payment are created.  For example, you could use this event to call an external API to integrate with your ERP system or a CRM like SalesForce automation or Zendesk.
 
First you need to download the following example VS Project:

  Download MyCustomControls VS Project

 
 
Instruction How to use the Custom Controls Project
  • Download the sample Custom Controls Project "MyCustomControls" from the above link.
  • Go to your DNN root folder, and open the "Controls" folder. Create a new folder called "SmithRegPro" and create sub folder called "CustomControls" inside it.
  • Extract the project folder into the "CustomControls" folder, the end path will be like this: \Controls\SmithRegPro\CustomControls\MyCustomControls.
  • Open the solution file "MyCustomControls.sln" inside "MyCustomControls" folder using Visual Studio 2013 or 2015, you will have one project inside it called "MyCustomControls.csproj".
  • Let’s take a look at the project structure:
    • Right click on the project and select Properties – then choose Application tab, the most important setting in this page is the assembly name (keep this in mind we will use it later). Note: use .Net Framework 4 if you are targeting DNN 7, or optionally use .Net Framework 4.5.1 for DNN 8.
    • Now Open the Build tab and select All Configuration. You will find that the output path is "..\..\..\..\bin\" which points to the main DNN bin folder.
    • Now let’s open the references, we will have a couple of dll references that are located in the bin folder, the main ones are: "SmithFormBuilder, DotNetNuke, Newtonsoft.Json". If you right click on references and clicked "Manage NuGet Pacakges" you will find that there are asp.net MVC 4 package is installed (MVC, Razor, WebPages, and Infrastructure), we only use this package just for inside razor files (cshtml) Intellisense.
    • Now open the Description.xml inside the Xml folder. This xml file is used to configure the custom controls and events. Here we tell the registration module to look and execute the class "MyCustomControls.Controllers.CustomController".
    • You can find this class in "\Controllers\CustomController.cs" where you can modify the code as required. We also made the Repository class "\Data\Repository.cs" where you can use it to get data from SQL Server.
 
  • Use the visual studio project you downloaded above to create your own custom UI controls or execute a custom function.  The following items are supported:
    • UI Elements Only:
      1. Go to Setup > Template Editor > Custom Controls and drag your custom project to the registration form.
      2. Edit the Xml file to have the correct path to your cshtml file in the RazorFilePath element, TypeName for the name space of the assembly.
      3. Clear the OnCheckoutComplete function in the CS controller.
    • OnCheckoutComplete Only:
      1. Edit the Xml file so the RazorFilePath element have no path, edit the RegProName to have the Registration Name (Setup > Registration Name)
      2. Add your custom CS codes to the OnCheckoutComplete function.
    • Both UI & OnCheckoutComplete:
      1. Go to Setup > Template Editor > Custom Controls and drag your custom project to the registration form.
      2. Edit the Xml file to have the path to your chtml file in the RazorFilePath element, TypeName for the name space of the assembly, RegProName element is not required.
      3. Add your custom CS codes to the OnCheckoutComplete function.

Add Feedback