(VB) DNN 5 module development tutorial - part 4: The view control

4. June 2010 19:45

To C# version

A DotNetNuke module usually contains several user controls; view, edit and settings. We will start by creating our view control. As I mentioned in part 2 of this series, the view control is what is displayed to your visitors. The Products view control will be a list of product items belonging to the module instance.
Open ViewProducts.ascx. Delete all content of the file and replace it with this:

<%@ Control language="vb" Inherits="SipidCode.Modules.Products.ViewProducts" AutoEventWireup="false" Explicit="True" Codebehind="ViewProducts.ascx.vb" %>
<asp:ListView ID="ProductList" runat="server">
 <LayoutTemplate>
  <div class="sc-productlist-container">
   <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
  </div>
 </LayoutTemplate>
 <ItemTemplate>
  <asp:Panel ID="ProductContainer" runat="server" CssClass="sc-product-container">
   <asp:Label ID="ProductName" runat="server" CssClass="sc-product-name" Text='<%# Eval("Name") %>'></asp:Label>
   <asp:Label ID="ProductDescription" runat="server" CssClass="sc-product-description" Text='<%# Eval("Description") %>'></asp:Label>
  </asp:Panel>
 </ItemTemplate>
</asp:ListView>

Open ViewProducts.ascx.vb and replace the Page_Load method with the following:

Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
 Try
  Dim controller As New ProductsController
  Dim products As List(Of ProductsInfo)
  ' Get the product list.
  products = controller.GetProducts(ModuleId)
  ' Bind the product list to the ListView control.
  ProductList.DataSource = products
  ProductList.DataBind()
 Catch exc As Exception
  ' Module failed to load.
  ProcessModuleLoadException(Me, exc)
 End Try
End Sub

Delete the method lstContent_ItemDataBound.
Add the method ProductList_ItemDataBound, looking like this:

Protected Sub ProductList_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewItemEventArgs) Handles ProductList.ItemDataBound
 If e.Item.ItemType = ListViewItemType.DataItem Then
  Dim prod As ProductsInfo = DirectCast(DirectCast(e.Item, ListViewDataItem).DataItem, ProductsInfo)

  If Me.PortalSettings.UserMode = DotNetNuke.Entities.Portals.PortalSettings.Mode.Edit Then
   Dim prodContainer As Panel
   Dim editLink As New HtmlAnchor

   prodContainer = CType(e.Item.FindControl("ProductContainer"), Panel)
   editLink.HRef = EditUrl("ItemId", prod.ItemId.ToString(), "EditItem")
   editLink.Style.Add("width", "16px")
   editLink.Style.Add("height", "16px")
   editLink.Style.Add("display", "inline-block")
   editLink.Style.Add("background-image", "url(" + DotNetNuke.Common.Globals.ApplicationPath + "/images/edit.gif)")
   editLink.Title = "Edit product"
   prodContainer.Controls.AddAt(0, editLink)
  End If
 End If
End Sub

In ProductList_ItemDataBound we check if the module is viewed in edit mode. In that case we add a link to the edit page (which we have not created a control for yet). The URL to the edit page is created by calling the EditUrl method (defined in PortalModuleBase).

This particular variant of the method will return an URL with the query string parameter "ItemId" carrying the value of the curent product item. The last method parameter will tell the edit page to show the edit control registered with the key "EditItem". You will learn more about that in the next part.

By adding edit links to the items in the list we have created a way to edit existing items, but how about creating new items then?
The ViewProducts class implements the interface IActionable, which defines the property ModuleActions. Look in the region “Optional Interfaces” for the implementation. The property returns a ModuleActionCollection object containing the actions that can be performed on the module. Each action is represented by an icon (or an entry in the module title flip-out menu) when the module is viewed in edit mode.
You can return several actions for a module, but for now we are content with the “add content” action we got from the template.
We will just make one small adjustment: locate the call to EditUrl() and give it the string "EditItem" as parameter. The property implementation should then look like this:

Public ReadOnly Property ModuleActions() As Entities.Modules.Actions.ModuleActionCollection Implements Entities.Modules.IActionable.ModuleActions
 Get
  Dim Actions As New Entities.Modules.Actions.ModuleActionCollection
  Actions.Add(GetNextActionID, Localization.GetString(Entities.Modules.Actions.ModuleActionType.AddContent, LocalResourceFile), Entities.Modules.Actions.ModuleActionType.AddContent, "", "", EditUrl("EditItem"), False, Security.SecurityAccessLevel.Edit, True, False)
  Return Actions
 End Get
End Property

In part 3 we made a lot of changes in the data layer. Due to this there is a lot of broken code in the EditProducts and Settings controls. To sidestep this we just delete the broken code for now and create working code in coming posts.
In EditProducts.ascx.vb, delete the contents of methods Page_Load, cmdUpdate_Click and cmdDelete_Click. Now we should be able to successfully compile the project again and are ready to try out the view in DotNetNuke.
We are going to set up the module manually in the system so we can run it, so open your browser and point it to your local DotNetNuke installation. Log in with the Host account.

We begin with setting up the database, so select SQL from the Host menu. In Visual Studio, open the file 01.00.00.SqlDataProvider. Copy all text and paste it into DotNetNuke. Make sure Run as Script is checked and click Execute

Execute SQL

From the Host menu, select Module Definitions. Make sure Edit mode is selected.

Edit mode selection

Select Create New Module from the Module Definitions flip-out menu.

Module definition menu

In the Create New Module screen, select/enter the following settings:

Create module screen

Then click Create Module.

You should now be able to add the module Products to a page. Go ahead and try it.
There will of course not be any products in the list, since we have not defined any yet. As you can see there is an Add Content link in the module (corresponding to the module's action we looked at earlier in this post.), but there is no Edit control so it will only lead to a blank page.
In the next post we will create that Edit control so we can put some products into the list.

Tags: , , ,

DotNetNuke | Modules | Tutorials

Comments are closed

About the addict

Johan Seppäläinen lives in Uppsala, Sweden. He spends most of his days working as a systems architect/developer, specialized in solutions built on Microsoft platforms.
Occasionally there is time for some recreational coding, when he pursues optimal solutions and code zen, mainly in C#. When he is not writing in this blog, that is.