# Pages and Master Pages

Master pages provide templates for other pages with shared layout and functionality. They allow creating a consistent look and behavior for all the pages or group of pages in then application. The master page defines placeholders for the content, which can be overridden by content pages.

The pages contain the content to display.

## Events and properties

* **Load event**

The load event is triggered at the first time when a page, master page is being loaded, and then the event is triggered after every user interaction.

* **PostLoad command**

The PreLoad command is triggered before the first-time load event is called, and every user method interaction.

* **IsPostBack**

Gets a value that indicates whether this instance is post-back. When a page is rendered the first time, the value is false and then the value keeps until the page is disposed.

* **IsForm**

Gets the value indicating whether this instance is form.

* **Parent**

Gets the parent control (master page) where page is contained.

## **Original example**

### **Html Master Page**

```html
<%@ Master Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MainPage.master.cs" Inherits="Test.MainPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../../CSS/global.css" rel="stylesheet" />

```

The **@Master** directive defines it as a master page.

The master page contains a placeholder tag **\<asp:ContentPlaceHolder>** for individual content.

The id="Content1" attribute identifies the placeholder, allowing many placeholders in the same master page.

## **Html Page**

```markup
<%@ Page Title="Test :: TestPage" Language="C#"  MasterPageFile="~/Pages/MainPage.master"  AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="Test.TestPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>

```

The **@Page** directive defines it as a standard content page.

The content page contains a content tag **\<asp:Content>** with a reference to the master page (ContentPlaceHolderId=" Content1").

## **Class Master Page**

```csharp
namespace Test
{
    public partial class Main : System.Web.UI.MasterPage
    {
```

Mater Page extends from System.Web.UI.MasterPage.

## **Class Page**

```csharp
namespace Test
{
    public partial class TestPage : System.Web.UI.Page
    {
        public MainPage Master { get { return (Test.MainPage)base.Master; } }

```

This page extends from System.Web.UI.Page.

## **Converted Page Sample**

Converted code generates four files:

### Cs class

```csharp
namespace Test
{

   [Observable]
   public partial class MainPage : Mobilize.Web.UI.MasterPage

```

Page cs file extends from Mobilize.Web.UI.Page.

```csharp
namespace Test
{

   [Observable]
   public partial class TestPage : Mobilize.Web.UI.Page
   {
       public MainPage Master { get { return (Test.MainPage)base.Master; } }

```

### Html

```html
<wm-usercontrol [model]="model"><div *ngIf="model && model.Visible" class="Test_WebsiteTest_MainPage">
    <div class="MainPage" [ngStyle]="setMyStyle()" [ngClass]="class" name="MainPage">
    </div>
</div></wm-usercontrol>

<wm-usercontrol [model]="model"><div *ngIf="model && model.Visible" class="Test_WebsiteTest_TestPage">
</div></wm-usercontrol>

```

The MasterPage html file contains an additional div element, which doesn’t exist in Page html file.

### TypeScript file

The ts file are generated same way for MasterPage and pages.

```typescript
import { Component, ChangeDetectorRef, ElementRef
, Output, Renderer2, ViewEncapsulation} from "@angular/core";
import { EventData, dataTransfer} from "@mobilize/base-components";
import { UserControlComponent, WebComponentsService
} from "@mobilize/winforms-components";
import { WebMapService} from "@mobilize/angularclient";
@Component({
   selector : "test-testpage",
   styleUrls : ["./testpage.component.css"],
   templateUrl : "./testpage.component.html",
   encapsulation : ViewEncapsulation.None
})
@dataTransfer(["defTest.TestPage"])
export class TestPageComponent extends UserControlComponent {

```

Additionally, a css file is generated.

## **Life cycle**

When a Web Forms page runs, the page goes through a life cycle in which it performs a series of processing steps. These include initialization, instantiating controls, restoring, and maintaining state, running event handler code, and rendering.

!\[Diagram

Description automatically generated]\(/files/gfCrYoHx0iNUjdpP1zhQ)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/webforms/desktop-compatibility-platform-dcp/pages-and-master-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.