CodeGarden 10: The sixth annual Umbraco Developer Conference
June 23-25th 2010 - free ASP.NET MVC pre-conference. Register today!

Using the osMemberControls (v0.1 code set 39984)

Pages

The osMemberControls package is still in development but what has been developed can be easily extended to develop a complete membership package with a minimum of coding knowledge required.

Here I will detail the stpes to go through to get a system up and running. It includes the basic steps for setting up a member in Umbraco.

SETUP

Download the latest package

Either get the source code if you're comfortable compiling ti yourself or the latest package created by skiltz.

Install the package into using the Umbraco package manager

Create member types

Member Types describe the extra attributes you want your members to have (name, DoB, address etc).

Set “member can edit” to true will allow members to maintain these fields themselves. This would not be desirable for some fields e.g. you would not want a member to update an IsActive or DateJoined field.

Setting “show on profile” to true will mean this field is picked up by the memberProfile control

Create member group

Create different groups to determine different permissions within the site (paid members, unpaid members, public etc.)

Your site is then secured against these member groups by right clicking on the node you want secured, picking role based protection and then updating which roles should have access to a node.

TEMPLATES

There would be several different ways to configure the templates. This is the method I used:

Create a Membership document type and template. If you have a master document type that you inherit from for other document types then it would pay to do so here as well.

On the Membership template create a new content place holder and wrap it in a <form runat="server"> tag. Also include any formatting and extra umbraco fields that are common to all Membership pages here. here is an example template:

<%@ Master Language="C#" MasterPageFile="/masterpages/siteMaster.master" AutoEventWireup="true" %>

<asp:content ContentPlaceHolderId="MainBody" runat="server">
          <div id="middlecontent">
                <img src="/images/welcome_bg.png" width="923" height="26" alt=" " />
                    <div>
                    <h2><umbraco:Item ID="Item1" field="PageHeader" runat="server"></umbraco:Item></h2>
                    <umbraco:Item ID="Item2" field="bodyText" runat="server"></umbraco:Item>
                    <form id="aspnetForm" runat="server">
                            <asp:ContentPlaceHolder Id="MembershipControl" runat="server">
                                <!-- Insert default "MembershipControl" markup here -->
                            </asp:ContentPlaceHolder>
                    </form> 
                    </div>
                <img src="/images/welcome-bottom_bg.png" width="923" height="18" alt=" " />
          </div>

</asp:content>

Create membership templates

Now it is just a matter of creating templates for each of the membership controls you want (login, registration, profile, logout etc).

Go to your Membership document type and select each of the newly created templates into the Allowed templates section.

Create pages as required for login, registration etc based on the Membership document type and change the template on the properties page.

Drop the macro for each type of membership page onto the approriate template

Modifying the templates

Login
-    Not implemented yet. Add <asp:login id="login1" runat="server" /> to UserControls/osmemberControls/MemberLogin.ascx

Registration
-    No ability for single table registration yet
-    Work around: add properties to Generic Properties page that want included in registration if you want to avoid using the wizard

Profile + Logout

-    Work without any modification

CSS

The ASP.NET membership controls, by default, render in a table based layout. If you are using the package and not modifying the source code then you will not be able to change this.

Here is some example CSS for styling the controls in their defautl table based mode:

/* membership */
#aspnetForm table
{
    margin-left:30px;
}
#aspnetForm table tr td
{
    vertical-align:top;
}
#aspnetForm table tr td label
{
    padding-top:3px;
    display:inline-block;
    width:125px;
    text-align:left;
    white-space: nowrap;
    color:#898989;
}
#aspnetForm table tr td input, #aspnetForm table tr td textarea {
 border: 1px solid #006;
}