help.axcms.net Axinom Logo

Creating the Article Detail Page

On the article detail page the user can set all article properties.

Creating the Detail Page

Let’s add a new page and name it ArticleDetail.aspx. All pages in AxCMS follow the MasterPages concept, which is based on the use of layout templates. There are 3 predefined AxCMS.net page templates:

  • Basic template (DefaultCMSTemplate.ascx)
  • Overview template (OverviewCMSTemplate.ascx)
  • Detail template (DetailCMSTemplate.ascx)

The choice of the right template will be defined in the code-behind file; ASPX file is kept as small as possible:

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
<%@ Page language="c#" Codebehind="ArticleDetail.aspx.cs" AutoEventWireup="false" Inherits="Extras.ArticleDetail" %>
<%@ Register TagPrefix="AxMP" namespace="Axinom.AECMS.Backend" assembly="AxCMS.BL" %>
<%@ Register TagPrefix="Ax" Namespace="AxCMS.AxCMSweb.admin.templates"  Assembly="AxCMSweb" %>
<AxMP:ContentContainer runat="server" ID="ctlContentContainer">
    <AxMP:Content id="Edit" runat="server">
        <table cellpadding="0" cellspacing="5" width="100%">
            <tr>
                <td colspan="2"><asp:Label id="headline" class="headline" runat="server">Article Detail</asp:Label></td>
            </tr>
            <tr>
                <td valign="top">
                    <Ax:AxinomPanel id="general" runat="server" width="100%" Headline="General">
                        <table cellpadding="0" cellspacing="5">
                            <tr>
                                <td>
                                    <asp:Literal runat="server">Name</asp:Literal>
                                </td>
                                <td>
                                    <asp:TextBox id="nameTextBox" runat="server" MaxLength="50" style="width: 250px;" />
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <asp:Literal runat="server">Description</asp:Literal>
                                </td>
                                <td>
                                    <asp:TextBox id="descriptionTextBox" runat="server" TextMode="Multiline" Rows="5" style="width: 250px;" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Literal runat="server">Price</asp:Literal>
                                </td>
                                <td>
                                    <asp:TextBox id="priceTextBox" runat="server" MaxLength="10" style="width: 100px;" />
                                </td>
                            </tr>                            
                        </table>
                    </Ax:AxinomPanel>
                </td>
            </tr>
    </AxMP:Content>
</AxMP:ContentContainer>

As you can see, the detail page consists of three textboxes (article name, description and price) and descriptive labels:

Implementing the Logic

The code-behind file class must extend the DetailCMSPage base class (parent class of all detail pages). First let’s set the names for the layout template and the CSS file. We will be using styles from CMS:









protected override string TemplateName
{
    get{return @"..\admin\templates\DetailCMSTemplate.ascx";}
}

protected override string CssPath
{
    get{return CMSConfigurationSettings.CMSApplicationVirtualPath + @"/admin/CSS/cms.css";}
}

The base class implements interface I and declares all the implementations as virtual. So we can overwrite those. All the overwritable methods are in the Helper region. Here is a list of the most important methods that can be overwritten:

  • CreateObject – Creates a new object and assigns it to your instance variable.
  • LoadObject – Loads the object being edited from the database. Returns true if the loading was successful.
  • SetDefaultObject – Fills object properties with default values.
  • BindObject – Assigns properties of the loaded object to the corresponding web controls.
  • ValidateFormular – Validates data in the input fields of the detail page.
  • ValidateObject – Validates data in object properties.
  • ReadObject – Reads your web controls and sets their values to the corresponding properties of the object being edited.
  • SaveObject – Saves the object being edited to the database.
  • DeleteObject – Deletes object being edited from the database.
  • ConfirmMessage – Adds user messages shown after saving.

LoadObject has a very important role. It gets the necessary object from the database. LoadObject looks like this:






protected override bool LoadObject()
{
    AxDbAdapter adapter = new AxDbAdapter(typeof(Article), Configuration.ConnectionManager);
    _article = (Article) adapter.Load(this.AxID);
    return _article!=null;
}

So we get the article object from the database. All the parameters will be unused at the beginning. BindObject will be called to bind article properties to corresponding web controls.

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
protected override void BindObject()
{
    base.BindObject ();

    if (this.Mode == DetailMode.Edit)
    {
        nameTextBox.Text = _article.Name;
        descriptionTextBox.Text = _article.Description;
        priceTextBox.Text = Math.Round(_article.Price, 2).ToString();
    }
}

Before saving the article, we need to read the article back from input fields and validate it.






protected override void ReadObject()
{
    _article.Name = nameTextBox.Text.Trim();
    _article.Description = descriptionTextBox.Text.Trim();
    _article.Price = Math.Round(Convert.ToDecimal(priceTextBox.Text.Trim()), 2);
}

We will validate it on 2 levels:

1) Input fields (ValidateFormular)

2) Object properties (ValidateObject)

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 

protected override bool ValidateFormular()
{
    bool result = true;
    try
    {
        Convert.ToDecimal(priceTextBox.Text.Trim());
    }
    catch(Exception)
    {
        result = false;
        this.AddMessage("Wrong input in the field Price");
    }

    return result;
}

protected override bool ValidateObject()
{
    bool result = true;
    if(_article.Price > 100m)  // business rule
    {
        this.AddMessage("Only the articles under 100 EUR may be sold through this catalog.");
        result = false;
    }
    return result;
}

When all preparations are done we can save the article and post the success message:

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
protected override void SaveObject()
{
    AxDbAdapter adapter = new AxDbAdapter(typeof(Article), Configuration.ConnectionManager);
    adapter.Save(_article);
}

protected override void ConfirmMessage()
{
    this.AddMessage("The Article was successfully saved.", MessageType.Hint);
}

Deleting an article is as easy as all methods described above. We just need to override the DeleteObject method:







protected override void DeleteObject()
{
    AxDbAdapter adapter = new AxDbAdapter(typeof(Article), Configuration.ConnectionManager);
    adapter.Delete(this.AxID);
            
    this.TransferBack("The Article was successfully deleted.");
}

 


Next article: Adding the Possibility to Classify Articles