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

<%@ 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

<%@ 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

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

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

Class Page

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

namespace Test
{

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

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

namespace Test
{

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

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.

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