DotNetNuke 5.4 Cookbook

Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS Create and customize your own DotNetNuke website with blog, forums, newsletters, wikis and many more popular website features Learn custom module development and rich content management with sample code and tips Provides samples of styling and skinning a DotNetNuke portal Offers advanced programming tips combining DNN with AJAX and JQuery Part of Packt’s Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

Read more about this book

(For more resources on DotNetNuke, see here.)

Introduction

One of the powerful features of DNN is the variety of flexible and reusable controls that are available for custom module development. These include many of the web controls seen on the core DNN pages. In this article, we will see how to add these web controls to custom modules and tie them to the tables in the database.

In general, using these controls requires four simple steps:

• Adding the control code to the View or Edit .ascx file
• Adding a new property to the info object that will supply the values for the control
• Binding the control to the values
• Capturing the value from the control and saving to the database (if Edit page)

Adding web controls to your Toolbox

If you frequently use the visual editor in the development tool to layout your pages, this short recipe will show you how to add the DNN web controls to the Toolbox.

How to do it…

1. Launch the Development Tool.
2. Change the editor to Design mode.
3. Make sure the toolbox is displayed.
4. Right-click on the toolbox and select Choose Items….
5. Click on the Browse button.
6. Navigate to the /bin folder within the DNN source (DNNSource/website/bin).

   
7. Select the DotNetNuke.Webcontrols.dll and click on Open.
8. Make sure the DNN controls are checked and click on OK.
9. The web controls will now appear under the General section of the toolbox when you edit your code.

   

10. Next, we need to add a reference to DotNetNuke.WebUtility.dll. Right-click on the Employee project in the Solution Explorer and select Add Reference….
11. In the pop-up dialog, click on the Browse tab and navigate to the folder holding the DNN source files (for example, My DocumentsDNNSourceWebsitebin).
12. Select the file DotNetNuke.WebUtility.dll and click on OK.

Showing an e-mail link in a Datagrid

The Datagrid control is perfect for showing records from the database in a neatly formatted table. But the Datagrid can show many other types of information and in this recipe we will see how to display an e-mail hyperlink in a column.

Getting ready

In this recipe, we will extend the Datagrid.

In this recipe we are using a function to generate an e-mail address for our example. This keeps the recipe simple, but isn’t really practical. In a real production environment you would store this in the database as part of the Employee table.

How to do it…

1. Launch the Development Tool and load the Employee project.
2. Double-click to open the ViewEmployee.ascx file.
3. Locate the Datagrid in the code and add a new column just after the Salary column:

   <dnn:textcolumn datafield=”Salary” headertext=”Salary”/>

   <asp:TemplateColumn HeaderText=”Email Contact”>
   <itemtemplate>

   <asp:HyperLink id=”hlEmail”
   NavigateUrl='<%# “mailto:” & DataBinder.Eval
   (Container.DataItem,”ContactEmail”) %>’
   Text='<%# DataBinder.Eval
   (Container.DataItem,”ContactEmail”) %>’
   Target=”_new”
   runat=”server” />
   </ItemTemplate>
   </asp:TemplateColumn>

   </Columns>
   </asp:datagrid>

4. Next, open the EmployeeInfo.vb file.
5. Find the Public Properties section and add the read-only property EmailAddress to provide an e-mail address constructed from the employee name:

   ‘ public properties

   Public ReadOnly Property EmailAddress() As String
   Get
   Return _EmpFirstName.Substring(0, 1) + _EmpLastName +
   “@yourcompany.com”
   End Get
   End Property

6. Select Save All from the File menu.
7. To check the results, build and deploy the module to a development portal for testing.
8. Go to the ACME Employee page to see the list of employees. The new e-mail hyperlink will appear on the right-hand side.

   

   (Move the mouse over the image to enlarge.)

How it works…

In this recipe we saw the tasks to show an e-mail hyperlink in a Datagrid control:

• We took the Datagrid control and added a new template column holding an e-mail hyperlink control
• We added a new property to the EmployeeInfo object to provide an e-mail address for the Datagrid

Showing checkboxes in a Datagrid

An element that is useful to display in a Datagrid is a checkbox-like image to indicate the status of the database record. These are not functioning checkboxes but rather a visual indicator showing the data to be true or false.

The control works by having two images, one with a checkmark that is shown when the value is true. The other is an unchecked image that is shown when the value is false.

This recipe will work with any image indicating true or false. Checkbox-like images are used in other DNN modules so they are familiar to users, but you can experiment with your own images as well.

This recipe has two basic steps:

• We will create a new property of the EmployeeInfo object called NewHire. This property checks the date of hire from the database and returns true if the employee was hired less than 30 days ago.
• We will add a new column to the Datagrid that evaluates the NewHire property and shows one image if the NewHire is true and another image if the NewHire is false.

Getting ready

In this recipe we will extend the Datagrid.

How to do it…

1. Launch the Development Tool and load the Employee project.
2. Double-click to open the ViewEmployee.ascx file.
3. The first step is to add a new column to the Datagrid that will show the checkbox images. We will use the Eval function to check the NewHire function. Locate the Datagrid and add a new column just after the Salary column:

         <dnn:textcolumn datafield="Salary" headertext="Salary"/>

   <asp:TemplateColumn HeaderText=”New Hire”>
   <itemtemplate>
   <asp:Image Runat=”server” ID=”imgApproved”
   ImageUrl=”~/images/checked.gif” Visible='<%# DataBinder.Eval
   (Container.DataItem,”NewHire”)=”1″ %>’/>
   <asp:Image Runat=”server” ID=”imgNotApproved”
   ImageUrl=”~/images/unchecked.gif” Visible='<%# DataBinder.Eval
   (Container.DataItem,”NewHire”)=”0″ %>’/>
   </ItemTemplate>
   </asp:TemplateColumn>

   </Columns>
   </asp:datagrid>

4. Next, open the EmployeeInfo.vb file.
5. Find the Public Properties section and add the read-only property NewHire that returns true or false if the employee was hired in the last 30 days:

    ' public properties

   Public ReadOnly Property NewHire() As Boolean
   Get
   Return (Today() – _HireDate).Days < 30
   End Get
   End Property

6. Select Save All from the File menu.
7. To check the results, build and deploy the module to a development portal for testing.
8. Go to the ACME Employee page to see the list of employees. The new checkbox will appear on the right-hand side.

   

9. Although you cannot click on these checkboxes, they do provide a clear and easy to understand visual status for the records.

How it works…

In this recipe we saw the tasks to show checkbox images in a Datagrid control:

• We took the Datagrid control and added a new template column holding two image controls, one checked and the other unchecked.
• We added a new property to the EmployeeInfo object that returns true or false depending on the database record.
• We bound the property to the control so that if the property was true then the checked image was displayed. If the property was false the unchecked image was displayed.