Introduction

About WebMAP: WebForms to Web MVC

WebMAP: WebForms to Web MVC is a tool designed to convert APS .NET (WebForms) apps based on C# to a modern web architecture:

• Business logic source code is converted to ASP.NET Core.

• The user interface (UI) rendered as HTML using Angular, JavaScript, and KendoUI.

For VB.Net, contact us for alternatives.

Code Conversions

Here is an example of the very first WebForms application any programmer would do. The program consists of a form and a button that changes the text. The comparison side by side with the converted app shows minimum alterations:

The emphasis of WebMap: WebForms to Web MVC is the transparency for the developer from the original application to the converted one, which is also reflected in the following example code from C# to WebMAP.

Source code DefaultPage.aspx.cs:

namespace WebApplication1
{
    public partial class _Default : Page
    {
        protected void btn1_Click(object sender, EventArgs e)
        {
            this.lbl1.Text = "Hello World";
        }
    }
}

Converted code DefaultPage.aspx.cs:

namespace WebApplication1
{
    [Observable]
    public partial class _Default : Mobilize.Web.UI.Controls.Page
    {
        protected void btn1_Click(object sender, EventArgs e)
        {
            this.lbl1.Text = "Hello World";
        }
    }
}

The automation of web processes is clear for the user, thanks to internal libraries such as Weaving, that provides functions to interact with the BackEnd/CoreServices. So, the converted code does not add unnecessary complexity and maintains its similarity to the original.

The UI represents a new challenge to convert, and so, we tackle this problem by converting the System.Web.UI into an Angular component divided into three main files:

1. HTML

2. CSS

3. TypeScript

For this same example, the form called DefaultPage.aspx is converted as:

Source code DefaultPage.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <div class="jumbotron">
        <h3>
            <asp:Label runat="server" ID="lbl1" Text="My first Sample"></asp:Label>
        </h3>
        <asp:Button runat="server" ID="btn1" Text="Click Me" OnClick="btn1_Click"></asp:Button>
    </div>

</asp:Content>

Every control declared inside the DefaultPage.aspx file will have its corresponding HTML tag as is the case with Button.

Converted code default-page.component.html

<div *ngIf='model' class='WebApplication1__Default'>
   <ng-template #MainContent let-model='model'>
      <div class="jumbotron">
         <h3>
            <wm-label id="lbl1" [model]="model.lbl1" class="lbl1">
               My first Sample
            </wm-label>
         </h3>
         <wm-button id="btn1" [model]="model.btn1" class="btn1" text="Click Me" [eventsContext]="this" wmClientClick>
         </wm-button>
      </div>
   </ng-template>
</div>

Now, let's take a look at the .css file that pairs with the default-page.component.html file:

Converted code default-page.component.ts

import { Component, ChangeDetectorRef, ElementRef, Output, Renderer2, ViewEncapsulation, ViewChild, TemplateRef} from "@angular/core";
import { EventData, dataTransfer} from "@mobilize/base-components";
import { PageComponent} from "@mobilize/webforms-components";
import { WebMapService} from "@mobilize/angularclient";
@Component({
   selector : "web-application1-default-page",
   styleUrls : ["./default-page.component.css"],
   templateUrl : "./default-page.component.html",
   encapsulation : ViewEncapsulation.None
})
@dataTransfer(["frmWebApplication1_Default"])
export class DefaultPageComponent extends PageComponent {
   @ViewChild('MainContent')
   MainContent : TemplateRef <any>;
   protected webServices : WebMapService;
   constructor (wmservice : WebMapService,changeDetector : ChangeDetectorRef,render2 : Renderer2,elem : ElementRef) {
      super(wmservice,changeDetector,render2,elem);
   }
}

Now you have covered the basics of what WebMAP: WebForms to Web ASP conversion looks like. Let's proceed with a further explanation of how to run a full conversion process and run the output application by yourself.