Migrate an ASP.NET Web Forms application to Windows Store app

  • Article

Introduction

In the past decade, a lot of web applications were written in ASP.NET Web Forms. It is no doubt that many developers want to port those applications to Windows Store app. This article provides some guidelines and a sample solution to simplify the migration process.

The sample ASP.NET Web Forms application

The sample ASP.NET Web Forms application is a typical news publishing application. It contains the following pages:

  • ·         Home page: Displays the latest news in each category, as well as a search control.
  • ·         News list page: Displays search results, or all news belonged to a category.
  • ·         Read page: Displays each new in detail. It also allows users to add comments if they’ve signed in.
  • ·         Login page: Allows users to login.
  • ·         Admin page: A backend page that is used to manage contents.
  • ·         Publish page: A backend page that allows administrators to publish news.

The application uses typical 3 tier architecture. On the backend, SQL Server database is used to store the news contents and membership/role data. Entity Framework is used to access the database. Business logic is implemented in C# in the same project (Note: in real world, business logic is usually separated into another assembly). The presentation layer uses aspx pages and server controls, with very few JavaScript code. Almost all features are implemented on the server side, as does a typical web forms application. ASP.NET membership/role is used to manager users and roles.

Migration Consideration

Most ASP.NET Web Forms applications are server centric. A user types a URL in the browser, or submits a form. The browser issues a GET/POST request to the server. The server handles the request, invokes business logic, generates a static HTML file, and sends back the client browser. Finally, the browser renders the HTML file.

On the other hand, a Windows Store app uses a client centric model. The application is installed on the user machine. When the app starts, it does not request the server. If an app wishes to communicate with a server, it has to issue HTTP requests manually. The browser will not handle requests automatically. Actually many Windows Store apps do not have a browser.

For developers with knowledge and experience in ASP.NET Web Forms, he/she probably has to rewrite the presentation layer from scratch, and add a service layer for communication between client and server. However, most of business logic and data access module are reusable.

Developers can port the server side to ASP.NET Web API, which is a new feature in the latest version of ASP.NET, and thus provides a natural migration path.

As for the client side, developers can port the code to either XAML + .NET or HTML + JavaScript. If a developer has little knowledge about JavaScript, then XAML + .NET is a good choice. Or else, HTML + JavaScript is preferable.

This article focuses on the HTML + JavaScript approach.

Migration Guideline

In general, the migration steps can be summarized as follows.  

  1. Migrate server controls to HTML client controls
  2. Migrate presentation logic to JavaScript
  3. Add a service layer using ASP.NET Web API
  4. Add Windows 8 Unique Features
  5. Migrate authentication

Migrate server controls to HTML client controls

ASP.NET Web Forms provide a lot of server controls. Some of them simply wrap standard HTML controls, while others offer a lot more. For example, ListView and GridView allow developers to display/edit complex data model.

To port the presentation layer to Windows Store apps, server controls must be ported to HTML client controls. Porting standard controls usually doesn’t take too much effort. For example, asp:Button can be ported to button, and only a few properties need to be changed.

Example:

ASP.NET:

<asp:Button ID=”button1” runat=”server” Text=”Click” />

HTML:

<button id=”button1”>Click</button>

Certain complex server controls can also be ported to client without too much effort, thanks to new additions to HTML5. HTML5 provides a lot of new controls, such as range (slider), date, and so on.

Porting complex controls (esp. data access controls) can take quite a few efforts. Fortunately, WinJS (a JavaScript library provided by Windows 8) provide a lot of data presentation controls. Although these controls do not strictly correspond to ASP.NET Web Form server controls, most server control features can be implemented using those client side controls. Among them, the most important control is ListView. To get started with ListView, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx.

Migrate presentation logic to JavaScript

In ASP.NET Web Forms, a typical approach to display data is binding server controls to data sources. In a well-designed application, ObjectDataSource is used to provide the data, as it allows developers to separate presentation from data access. In simple scenarios, sometimes UI is directly bound to data. For example, LinqDataSource and SqlDataSource can be used.

In Windows Store apps, the client application does not have access to a database, even if the database is installed on the local machine. All data must be provided from files in local storage or cloud services.

If ObjectDataSource is used in the Web Forms application, the same architecture can be used in Windows 8. A data source is provided, where the data may come from any place such as a cloud service. The UI binds to the local data model. WinJS.Binding.List can be considered as the counter part of ObjectDataSource. If the Web Forms application uses other data sources, developers need to customize it. For more information about data binding, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh758311.aspx.

Example: Bind a data source to a ListView

       <!-- Template -->

        <div class="commenttemplate" data-win-control="WinJS.Binding.Template">

            <div>

                <div>

                    <span data-win-bind="textContent: User.UserName"></span>

                    <span>posted at: </span>

                    <span data-win-bind="textContent: PublishTime"></span>

                </div>

                <div data-win-bind="textContent: Content"></div>

            </div>

        </div>

       <!—ListView -->

       <div id="commentsList" data-win-control="WinJS.UI.ListView"></div>

 

            // Configure the data source.

            var commentsList = document.getElementById("commentsList");

            var listView = commentsList.winControl;

            listView.itemDataSource = getDataSource();

            listView.layout = WinJS.UI.ListLayout;

            listView.itemTemplate = document.getElementsByClassName("commenttemplate")[0];

Add a service layer using ASP.NET Web API

If the data comes from a cloud service, the client and cloud service communicate each other. In addition, ASP.NET Web Forms server control event handlers run on the server side, but the event handlers in Windows Store apps run on the client side. To communicate with server-side business logic, a service layer should be added.

A service layer is useful not only in building a Windows Store app, but also in supporting additional rich clients in the future. The same service can be consumed in almost any devices, such as Windows Phone, iPhone, and Android.

Traditionally, SOAP services (such as services built with ASP.NET Web Services or Windows Communication Foundation) are used to build service oriented solutions. However, most modern services (in particular consumer oriented services) are built as REST services. REST uses standard HTTP protocol. It doesn’t force a strict request/response format as SOAP does. So it is more agile, and is supported on any platform that supports HTTP protocol. On the other hand, many platforms do not offer out-of-box support for SOAP.

To add a service layer on top of an existing ASP.NET application, here is the good choice ASP.NET Web API. The best of it is ASP.NET Web API is part of ASP.NET, and thus a lot of existing skills can be used.

To consume a RESTful service from a Windows Store app, standard XMLHttpRequest can be used. Third party libraries, such as jQuery’s ajax function, also works. In addition, WinJS provides an xhr function, which simplifies the programming model. It supports promise style programming, which simplifies making asynchronous web requests. For more information, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh868282.aspx.

Add Windows 8 Unique Features

Windows Store apps are not limited to normal web apps. They provide a lot of unique and rich user experience. Below is the common feature list which could be integrated into normal web apps.

  • Application bar: Application bar offers a standard model for users to invoke commands. Users no longer need to search for links/buttons all over the UI to run special functionalities. For more information, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh465296.aspx.
  • Live tiles: Live tiles are tiles pinned on the start screen. Users use live tiles to glance at app contents without running the app. Tiles can be updated at a regular interval using either data in local storage or data from a cloud service. Each app can create more than one tile (secondary tile). For more information, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh761490.aspx.
  • Search contract: Search is essential to many web applications. A common practice is to provide a search control on the top of every page. In Windows 8, the search contract offers a centralized place for search. Using search contract, users can search contents not only in the current application, but also in other apps, file systems, and so on. For more information, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh465238.aspx.
  • Share contract: Many apps are not isolated. They can work together by sharing and exchanging data. The share contract offers a centralized place to share content between apps. For example, a user wanna share a link from a certain app. Once the share contract is enabled, all apps that accepting links sharing will be listed. If the user frequently uses Facebook, it is very likely he/she has installed a Facebook app. Thus the link can be shared with that app, without jumping into the Facebook web site. For more information, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh758314.aspx.
  • Settings contract: Settings contract offers user a centralized place to change app settings. They need not to go to a different place to change related settings while switching to a new app. For more information, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh770540.aspx.
  • Built-in theme animations. CSS3 offers great transitions and animations. On top of that, WinJS build several theme animations that further simplify animation development. Server centric web applications such as Web Forms apps are usually lack of advanced user interaction. Animation is a great way to improve user experience. For more information, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/Hh465165(v=win.10).aspx.

Migrate authentication

Many Web Forms application use ASP.NET membership to implement authentication and roles to implement authorization. This is great if the application only needs to support browser clients. Browser clients can essentially delegate all authentication/authorization to server. A cookie can be used to store a token, which is validated on the server when the request is made.

On the other hand, non-browser applications do not have cookie built-in. To make the sign in process more secure, a client application should not get user’s credential directly. A typical practice is to embed a web browser in the client application. The browser handles authentication, notifies the host app when the user is authenticated, sends the host app a token, and the host app can then use the token to communicate with the service in future requests without asking the user to sign in again.

Windows Store apps (or more precisely, WinRT environment) offer a system component to simplify the process. Developers can use WebAuthenticationBroker to sign in to any services compatible with OAuth standard. Using WebAuthenticationBroker, developers need not to worry about how to interact with a web browser control. What’s more, WebAuthenticationBroker simplifies SSO (single sign on). For more information, please refer to https://msdn.microsoft.com/en-us/library/windows/apps/hh465281.aspx.

On the server side, the authentication logic also needs to be modified. The new project templates in ASP.NET MVC 4 help developers generate web applications that support common online identity providers (such as Windows Live ID and Facebook) with only a few lines of code. Under the hook, an open source product DotNetOpenAuth is used. Developers can port the MVC project templates to ASP.NET Web API with some additional efforts.

The Windows Store app migrated from the sample ASP.NET Web Forms application

The ASP.NET Web Forms application mentioned earlier has been ported to a Windows Store app. The migrating process follows the above steps.

The resulting app contains following pages. The feature set is almost identical to ASP.NET, but the UI is somewhat different.

  •  Home page: Displays the latest news in each category, but the search control has been moved to the search contract. A ListView is used to display the data.
  •  News list page: Displays search results, or all news belong to a category. A ListView is used to display the data.
  • Read page: Displays each news in detail. It also allows users to add comments if they’ve signed in. The comment list is also displayed using a ListView.
  • Admin page: A page that is used to manage contents. Once again, a ListView is used.
  • Publish page: A page that allows administrators to publish news.

 

In addition to the pages, several new features are implemented:

  • Share the news with other apps using the share contract.
  • Live tile notification to provide the user the latest news without launching the app.
  • Application bar is used to place common commands.

 

A new service layer is introduced on the server side. It is implemented in ASP.NET Web API. Most existing business logic and data access codes are reused. A few lines of new code are added to provide additional features. WinJS.xhr is used to communicate with the service.

 

Authentication is handled by Facebook, instead of a local membership database. But Facebook accounts are integrated with ASP.NET membership. WebAuthenticationBroker is used on the client side. On the service side, DotNetOpenAuth is used to handle most authentication logic, while some custom codes are provided to make DotNetOpenAuth work with ASP.NET Web API and WebAuthenticationBroker.

 

Below are some screenshots for reference. 

On the home page, please watch the news list. Customer can use the app bar to sign in.

 

Sign in using the Facebook account:

 

 

If the Facebook account is an administrator, a new app bar command Admin will be displayed. Click it to navigate to the admin/publish pages. Otherwise the user can only add comments to existing news. On the home page, click the header of a group or a news item to go to the detailed pages.

Conclusion

This article and the corresponding sample projects demonstrate how to migrate a typical ASP.NET Web Form app to a Windows Store app using JavaScript. The scenario is based on a news publish system.

In general, the migration process mainly contains the following tasks.

• Architecture migration: Migrate from traditional 3 tier architecture to SOA. Business logic layer and data access layer can be reused. A new service layer is added (implemented with ASP.NET Web API as a RESTful service). The presentation layer is migrated to a Windows 8 client application. Developers can build additional client applications to consume the same service.
• Basic UI migration: Migrate from ASP.NET web forms server controls to HTML controls.
• Data presentation UI migration: Migrate from ASP.NET web forms GridView/ListView to Windows 8 ListView.
• Presentation logic migration: Migrate from ASP.NET web forms code behind to AJAX invoking ASP.NET Web API.
• Authentication migration: Migrate from ASP.NET forms authentication to OAuth. Integrate with Windows 8 WebAuthenticationBroker. Implement federation with popular online identity providers such as Facebook.
• Search migration: Migrate from custom search UI to Windows 8 search charm.
• Navigation migration: Migrate from web site style navigation to single page navigation. The related links are migrated to Application Bar.
• Add more Windows 8 specific features such as Share, Live Tile, Secondary Tiles, etc.

 

Sample Projects.zip