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

![](/files/MXQDGYdGrPy0kXbhfAYe)

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.


---

# 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/introduction.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.