C1Input Migration Guide: ASP.NET AJAX to ASP.NET Wijmo

Introduction

Through the course of the past few weeks, there has been a tremendous amount of buzz surrounding our new ASP.NET Wijmo control suite. As many of you have heard, ASP.NET Wijmo has improved upon and effectively replaced the ASP.NET AJAX control suite being completely redesigned to take full advantages of the latest web technologies such as HTML5, JQuery and CSS3 to name a few. One of the major improvements in the ASP.NET Wijmo suite is that of C1Input. C1Input consists of five controls that make creating data entry apps a breeze. This article is meant to guide you through the migration process from the older AJAX controls to the Wijmo controls.

Prerequisites

Before we get started, you will need to download the Studio for ASP.NET Wijmo which can be downloaded here. On that same note, the ASP.NET Wijmo control suite is also included in the Studio Enterprise and Studio Ultimate downloads which are packed with a ton of must have controls.

Getting Started

The first thing we need to do is create a small sample that we can migrate to Wijmo from. Let's get started. Open up Visual Studio and create a new Empty ASP.NET Web App. Name it whatever you like and click "OK". Once you are in designer mode, you will need to add a script manager to the page before anything else. Once you've added the script manager, click on the "table" option on the menu bar and select "Insert Table". In the dialog box that follows, make the table with 3 rows and 2 columns. The end result which will be the base of the app will look similar to the screen below. Before we can add the controls to the page, we need to add some assembly references to the project. In the solution explorer, select your project and click "show all files". Right click on the project references and add the following references:

1. C1.Web.UI.4.dll
2. C1.Web.UI.Controls.4.dll

Once you have those references added, it's time to start adding controls. Start by adding C1MaskedInput to the table in the top right position, C1DateInput in the middle right position and C1NumericInput in the bottom right position. Once all of the controls have been added, you should see something to this effect: For the moment, don't worry about the spacing of the controls in the table as you will be able to adjust this shortly. The next step is to add some text to the left side of the table to let the user know what the controls are displaying. Start by adding the text "Product Number" in the top left position on the table. Then add the text "Order Date" in the middle left position of the table. Finally, add the text "Quantity" in the bottom left cell of the table. The end result should look similar to this:

Setting Properties

Next we're going to set some properties to get the controls to behave like they are supposed to. First let's start with the C1MaskedInput. Each of the controls has a task menu that can be accessed by clicking on the small arrow located at the top right of each control. Navigate to the C1MaskedInput and open the task menu. Set the Mask property to 00-0000, the password character to * and the InvalidInputColor to Red. Next navigate to the C1DateInput control and select its task menu and change the properties according to your preferences. Keep in mind that you can change the culture and format to suit any cultural needs. For instance, if you wanted your C1DateInput control to suit French end-users, then you would change the culture property to br-FR as seen below. But for this sample, set the culture to en-US which is the culture setting for the United States. The last task menu to be visited is that of the C1NumericInput control. In the task menu for this control, set the minValue at 0 and the maxValue at 10. Again, set the culture drop down to en-US for the United States culture setting.

Visual Styles

Now that we have the basic foundation for our application, let's give it a more appealing look and feel. From the same task menus as in the previous section, navigate to the visual styles drop down list. You will see the options shown below. Select the Office2007Blue visual style from the list and close the task menu. Do the same for the other controls as well.

Running the Application

When you save and run the application, you should see an application resembling this:

Migration!

Now that we have a finished base application, we can get started migrating to Wijmo! Oh the anticipation. We are going to build the same table with the same layout for this part of the guide. One important thing to remember starting out is that Wijmo controls do not need a script manager to function properly. So let's begin with the basic 3x2 table that we started with in the previous sample. There are some notable changes to the naming of the controls (See Below) so bear that in mind.

AJAX

Wijmo

C1MaskedInput

C1InputMask

C1DateInput

C1InputDate

C1NumericInput

C1InputNumeric

Let's begin by adding some assembly references as before. You will need to add the following references to the references folder in the solution explorer. 1. C1.Web.Wijmo.Controls.4.dll 2. C1.Web.Wijmo.Controls.Design.4.dll

Adding the Controls

Add the controls and text in the same manner as you did in the AJAX project placing the C1InputMask in the top right cell, the C1InputDate in the middle right cell, and the C1InputNumeric in the bottom right cell. Then add the text "Product Number" in the top left cell, "Order Date" in the middle left cell, and "Quantity" in the lower left cell. Once you have added the controls, your designer page should resemble this:

Changing Properties

The Wijmo controls have a few different options than their predecessors. For instance, let's navigate to the C1InputMask control's task menu. You will find some different theming options which are global themes, meaning that if you change the theme of one control on your page, all of the controls will follow suit. So, let's change some properties. First change the mask to 00-0000 and the password char to *. Next select the "Rocket" theme from the theme drop down list. Navigate to the task menu for the C1InputDate control and notice that the theme has automatically changed to the "Rocket" theme. Now change the remaining properties to the very same settings that we used in the AJAX project and click "Save All".

Running the Application

Okay! Let's run the application and check out what we've done. In my opinion the theming options and the overall customization that the new Wijmo controls offer goes above and beyond what is offered in the AJAX controls and allows the user to develop rich, aesthetically appealing applications.

ASPX Markup Comparison

Below are the aspx markup pages for each of the projects. You will notice some subtle differences when skimming through them. The Wijmo page is shown on the left and the AJAX page on the right.

Conclusion

This brings us to the end of this migration guide. Hopefully now that you have seen the creation of the new Wijmo controls along side of the AJAX controls, you can confidently upgrade to the new and much improved Wijmo Controls. The Studio for ASP.NET Wijmo is included in the Studio Enterprise and Studio Ultimate downloads. The studio can also be downloaded and purchased alone as Studio for ASP.NET Wijmo.