Using ASP.NET Templates

Applying Artisteer style to horizontal static menu
Creating a multilevel menu
Creating a vertical menu
Adding static content - method 1
Adding static content - method 2
Adding dynamic content

Utilizing Menus

Applying Artisteer active menu style to your horizontal static menu

Please use the following approach to create a menu and apply Artisteer styles to it:

Create a file called CustomMenu.ascx and add a menu with the following html structure:

<ul class="art-hmenu">
    <li>
        <a href="Default1.aspx" id="item1" runat="server">
            <span class="l"></span>
            <span class="r"></span>
            <span class="t">Default 1</span>
        </a>
    </li>
    <li>
        <a href="Default2.aspx" id="item2" runat="server">
            <span class="l"></span>
            <span class="r"></span>
            <span class="t">Default 2</span>
        </a>
    </li>
    <li>
        <a href="Default3.aspx" id="item3" runat="server">
            <span class="l"></span>
            <span class="r"></span>
            <span class="t">Default 3</span>
        </a>
    </li>
</ul>

where Default1.aspx, Default2.aspx, Default3.aspx are the content pages of your website.

Switch to your CustomMenu.ascx.cs code and loop through the controls to add "active" class to an anchor with href matching the current URL.

foreach (Control item in this.Controls)
{
    if (item is HtmlAnchor)
    {
        if (ResolveUrl(((HtmlAnchor)item).HRef).ToLower()
            == Page.Request.ServerVariables["URL"].ToLower())
        {
            ((HtmlAnchor) item).Attributes.Add("class", "active");
            break;
        }
    }
}

Creating a multilevel menu

Below are the steps to create a multilevel menu in your ASP.NET application:

Add a menu with the following structure:

<ul class="art-hmenu">
    <li>
        <a href="Default1.aspx" id="item1" runat="server">
            <span class="l"></span>
            <span class="r"></span>
            <span class="t">Default 1</span>
        </a>
        <ul>
            <li>
                <a href="Default1_1.aspx" id="item1_1" runat="server">Default 1-1</a>
                <ul>
                    <li>
                        <a href="Default1_1_1.aspx" id="item1_1_1" runat="server">Default 1-1-1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="Default1_2.aspx" id="item1_2" runat="server">Default 1-2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="Default2.aspx" id="item2" runat="server">
            <span class="l"></span>
            <span class="r"></span>
            <span class="t">Default 2</span>
        </a>
    </li>
    <li>
        <a href="Default3.aspx" id="item3" runat="server">
            <span class="l"></span>
            <span class="r"></span>
            <span class="t">Default 3</span>
        </a>
    </li>
</ul>

Notice the id values of the links. They should be specified properly to help identify and highlight top menu items when their subitem pages are displayed in browser.

On the code behind page add using statement for regular expressions:

using System.Text.RegularExpressions;

Write the following code within the Page_Load function:

foreach (Control item in this.Controls)
{
    if (item is HtmlAnchor)
    {
        if (ResolveUrl(((HtmlAnchor)item).HRef).ToLower()
            == Page.Request.ServerVariables["URL"].ToLower())
        {
            HtmlAnchor topItem = GetTopLevelItem(item);
            if (null != topItem)
            {
                topItem.Attributes.Add("class", "active");
                break;
            }
        }
    }
}

and another piece of code after the Page_Load function:

private HtmlAnchor GetTopLevelItem(Control item)
{
    if (Regex.IsMatch(item.ID, @"item\d{1,}$"))
        return item as HtmlAnchor;
    return FindControl(item.ID.Substring(0, item.ID.IndexOf("_"))) as HtmlAnchor;
}

Creating a vertical menu

To create a Vertical Menu, please add the following code block to the section:

<li>

Default 1

</a>

<ul>

<li>

<a href="Default1_1.aspx" id="item1_1" runat="server">Default 1-1

</a>

<ul>

<li>

<a href="Default1_1_1.aspx" id="item1_1_1" runat="server">Default 1-1-1

</a>

</li>

</ul>

</li>

<li>

<a href="Default1_2.aspx" id="item1_2" runat="server">Default 1-2

</a>

</li>

</ul>

</li>

<li>

Default 2

</a>

</li>

<li>

Default 3

</a>

</li>

</ul>

Adding static content to your project

Here are two different methods of adding articles to your application. Please feel free to choose the one you like best.

Method 1

Artisteer includes two sample articles into the exported Default.aspx page. Review their structure and use the same approach for your own articles:

<artisteer:Article ID="YourArticleID" Caption=" YourArticleCaption" runat="server">
    <ContentTemplate>
        Your article’s content is here...
    </ContentTemplate>
</artisteer:Article>

If your article contains ASP.NET controls, please open the code behind page and write:

YourArticleID.DataBind();

within the Page_Load function. After that you can access controls using the FindControl method, e.g:

TextBox tb = YourArticleID.ContentPlaceholder.Controls[0].FindControl("YourTextboxID") as TextBox;

Alternatively, you can open the exported App_Code\Article.cs file and add a custom method specifically for this purpose:

public Control GetControl(string id)
{
    if (null != this.ContentPlaceholder
        && null != this.ContentPlaceholder.Controls[0].FindControl(id))
    {
        return this.ContentPlaceholder.Controls[0].FindControl(id);
    }
    return null;
}

Then use this method to access controls in your code-behind, e.g:

Control c = YourArticleID.GetControl("YourTextboxID");

Method 2

Here is another way of working with the articles after you’ve exported your project from Artisteer:

Copy the generated design\Article.ascx file to the desired location in your project and rename it to reflect the name of your article (e.g. YourArticle.ascx).
Open YourArticle.ascx code for edit and replace the following placeholders:
```
<asp:placeholder runat="server" id="HeaderPlaceholder"/>
```
```
<asp:placeholder runat="server" id="ContentPlaceholder"/>
```
with the desired article title and content respectively.
Open a Web forms page (aspx) to which you want to add YourArticle.ascx user control and register the control by adding:
```
<%@ Register TagPrefix="art" TagName="YourArticle" Src="~/YourArticle.ascx" %>
```
Add the user control to the page by using the following line of code:
```
<art:YourArticle id="YourArticle1" runat="server" />
```

Adding dynamic content

Please, follow these steps to add content at run time to your page:

Insert the identical code block to your aspx page

<asp:Content ID="SheetContent" ContentPlaceHolderID="SheetContentPlaceHolder" 
Runat="Server">
    <asp:PlaceHolder ID="Content" runat="server" />
</asp:Content>

Edit the Code File like shown in the sample code block

Control ctl = LoadControl("~/design/Article.ascx");

PlaceHolder header = ctl.FindControl("HeaderPlaceholder") as PlaceHolder;

PlaceHolder content = ctl.FindControl("ContentPlaceholder") as PlaceHolder;

Literal lit = new Literal();
lit.Text = "Header Text";
Literal lit2 
= new Literal();
lit2.Text = "Content Text";
if (null != header && null 
!= content) {
    header.Controls.Add(lit);
    content.Controls.Add(lit2);

}
Content.Controls.Add(ctl);

The advantage of this method is that you can use any Controls by just adding them to the PlaceHolder Control Collection. Moreover, you don't have to copy any .ascx files.