Editor Template

Page Description

In this article, the step-by-step process of creating the following webpage will be described:

How to Create

Required Files and their General Structure

Since we are using the MVC Pattern (see "Architecture Pattern"), we require a Model file, a View file and a Controller file. For this example, we create a Controller "ExampleController.cs", a Model "XXX.cs" and the View file "XXX.cshtml", which will be explained in detail below.

Controller file

The Controller file "ExampleController.cs" is stored in the "Controllers" folder (together with all other Controllers of the project). The Controller class needs to inherit from the class "BaseController". Addtionally, the Key Words "[Authorize]" and "[AuthorizeRole]" are put above the Signature to include Authorization features. So in total, the outer part of the Controller class looks like this:

namespace Advantech.Ctos.Web.Controllers
{
    [Authorize]
    [AuthorizeRole]
    public class ExampleController : BaseController
    {
        ...
    }
    
}    

Model file

The Model file "XXX.cs" is stored in a new folder "Example" in the Business directory of the project. The Model class needs to inherit from the class "BaseModel". So in total, the outer part of the Model class looks like this:

namespace Advantech.Ctos.Business.Example
{
    public class XXX : ModelBase
    {
        ...
    }
    
}

View file

The View file "XXX.cshtml" is stored in a new folder "Example" in the "Views" folder of the project. The View files needs to be linked to the Model file which is why it needs to start with the following line:

@model Advantech.Ctos.Business.Example.XXX

Furthermore, it is divided into 2 sections: the Content section (containing the <div> tags, etc) and the Script section (containing the JavaScript functions).

The Content section should only work if the Model is not null, so it needs to be encapsulated by the following:

@if (Model != null)
{
    ...
}

The Script section is located outside of this if-statement and is identified by the following tag:

<script type="text/javascript">
    ...
</script>

So, in total, the View file looks like this:

@model Advantech.Ctos.Business.Example.XXX

@if (Model != null)
{
    ...
}

<script type="text/javascript">
    ...
</script>

Model Structure

In this context, "Model Structure" refers to the main components of the Model and their relation to each other without taking the methods of the Model into consideration. The Model Structure needs to match the View hierarchy.

View Structure

In this context, "View Structure" refers to the components of the Content section (without the Script section) of the View file. In the following, the single components will be described:

Page Title

The Page Title refers to the uppermost section of the webpage that contains the title of the webpage. It is identified by the class "content-title".

In this example, the title of the webpage is "Advantech Customers", so the code for the Page Title looks like this:

<div class="content-title">Advantech Customers</div>

Toolbar

The Toolbar refers to the section of the webpage that is located just below the Page Title and contains the buttons of the webpage. It is identified by the class "content-action" and the Buttons are recognized by the class "btn".

In this example, the webpage has 2 Buttons "Save" and "Delete"

<div class="content-action">
    <a id="btn-XXX" class="btn btn-XXX"> XXX</a>
</div>

Main Body

The Main Body refers to the main section of the webpage that contains the functionalities of the webpage. It is identified by the class "content-body".

In this example, the Main Body of this webpage consists of ..., which makes the code look like this:

<div class="content-body d-flex flex-row">
    <div>
        ...
    </div>
    <div>
        ...
    </div>
</div>