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">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
<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>
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
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
Catch exc As Exception
' Module failed to load.
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("background-image", "url(" + DotNetNuke.Common.Globals.ApplicationPath + "/images/edit.gif)")
editLink.Title = "Edit product"
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
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)
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.
From the Host menu, select Module Definitions. Make sure Edit mode is selected.
Select Create New Module from the Module Definitions flip-out menu.
In the Create New Module screen, select/enter the following settings:
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.