help.axcms.netAxinom Logo
Save Save Chapter Send Feedback

Creating the Article Overview Page

The overview page is the starting point to implementing a GUI for a custom object.

Understanding the Extras Project

For all AxCMS.net extensions the so-called Extras project is used. All the files are in the AxCMSweb folder under AxCMSweb_Sample/Extras, and it has no application properties (no web.config, no global.asax, etc.). From that folder, all the project pages can access AxCMS.net infrastructure, and also the framework itself can access project pages (Configuration, Database access, etc.). We need to have at least the following references in the Extras folder:

  • System.Web
  • Axinom.Framework
  • AxCMS.BL
  • AxCMSweb
  • Axinom.AECMS.Backend
  • Business Logic Project (where, for example, the Article class is)

Creating a Custom Overview Page

Let’s add a new page and name it ArticleOverview.aspx. All pages in AxCMS.net 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 
<%@ Page Language="c#" CodeBehind="ArticleOverview.aspx.cs" AutoEventWireup="false"
    Inherits="Extras.ArticleOverview" %>

<%@ Register TagPrefix="AxMP" Namespace="Axinom.AECMS.Backend" Assembly="AxCMS.BL" %>
<%@ Register TagPrefix="Ax" Namespace="AxCMS.AxCMSweb.admin.templates" Assembly="AxCMSweb" %>
<%@ Register TagPrefix="AxCMS" TagName="BaseGridTemplate" Src="../admin/templates/BaseGridTemplate.ascx" %>
<AxMP:ContentContainer runat="server" ID="ctlContentContainer">
    <AxMP:Content id="Filter" runat="server">
        <AxCMS:Filter runat="server" ID="_filter"/>
    </AxMP:Content>
    <AxMP:Content id="List" runat="server">
        <AxCMS:BaseGridTemplate runat="server" ID="_grid"/>    
    </AxMP:Content>
</AxMP:ContentContainer>

You can see that a page consists of a filter and a grid. We will explain these parts later in this tutorial. In the browser the overview page looks like this:

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

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
    protected override string TemplateName
    {
        get{return @"..\admin\templates\OverviewCMSTemplate.ascx";}
    }

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

Overriding a Grid Helper Class

The next step is to create the ArticleOverviewHelper class that will extend the AxOverviewBaseHelper base class. The base class implements the interface I and declares all 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:

  • PageSize – Sets the length of the page (for example, 20 entries per page). If there are more entries, a pager will be shown at the bottom of the page.
  • GetColumnWidth – Defines array with the width string for each column. 
  • GetColumnNames – Sets the names for the internal columns (optional). 
  • GetHeaderContent – Definies array with column names.
  • GetSortOptions – Sets sorting keys for the columns. For each column there are 2 keys: for descending and ascending order. We will return to the topic of sorting again later in the tutorial.
  • GetDataSource – Gets the data for the grid. 
  • GridItemDataBound – Formats the output of the data from GetDataSource.

GetDataSource plays a very important role. It gets the necessary sorting, filter and the chosen page as a parameter and has to load and return the data. The return value is defined as an object, but actually it must be a collection class (ArrayList, ICollection or DataTable). List elements must implement the AxID property. So GetDataSource would look like this:






   public override object GetDataSource(int pageIndex, string sort, FilterParameters filter)
    {
        AxDbAdapter adapter = new AxDbAdapter(typeof(Article)); 
        return adapter.LoadAll();
      }

So we get the list with the articles from the database. All the parameters will be unused at the beginning. GridItemDataBound will be called out for each line.

e.Item.DataItem is one of the items in the list that comes from GetDataSource. We know that the objects in this list are of the article type, that’s why we convert them to articles.

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
protected override void GridItemDataBound(object sender, DataGridItemEventArgs e)
    {
        Article article = (Article) e.Item.DataItem;
        Label nameLabel = (Label) e.Item.FindControl("SortableLabel0");
        nameLabel.Text = HttpUtility.HtmlEncode(article.Name);
       
        Label priceLabel = (Label)e.Item.FindControl("SortableLabel1");
        priceLabel.Text = article.Price.ToString("c");
      }

You can see that every line of the grid has 10 predefined labels: SortableLabel0, …, SortableLabel9. We can fill the labels with the properties of our model class (Article). The number of columns to be shown will be counted automatically from the length of the array with the GetColumnWidth method.

With this action we have finished implementing the overview page.

In the subsequent articles we will add more features to this simple overview page (filter, sorting, activities, etc.) and add the page to the top menu.


Next article: Adding a Filter to Article Overview