# 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:

![](https://4139013925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEOm98BbzqckTUoLpXN%2Fuploads%2F7tt01iGe97L55JeKea2G%2F0?alt=media)

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:

```csharp
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:

```csharp
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](https://app.gitbook.com/@mobilizenet/s/webmap/winforms/fundamentals/glossary), 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

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

```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

```typescript
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.