Existing ASP. net mvc Framework applications are cleverly transplanted to mobile phones

BKJIA exclusive Article] the customer is very satisfied with the quality of our products, so after the project is completed, he gave us another order, that is, deploying the customer program to the Windows smartphone device. However, our project team members have no such development experience before. Our plan is to minimize the modification of existing program code so that it can run on a Windows smartphone.

Mobile device Web Application Toolkit for Mobile Devices)

We chose Microsoft mobile device Web application development toolbox as the solution. With this free tool, you can easily extend Web applications based on the MVC Framework to mobile devices. : Http://code.msdn.microsoft.com/WebAppToolkitMobile/Release/ProjectReleases.aspx? ReleaseId = 3914

The environment required for the mobile application development toolbox is:

1. Install Microsoft. NET Framework 3.5 SP1.

2. Visual Studio 2008 Professional edition or later. You can also download Microsoft Visual Web Developer 2008 Express for free.

3. If your operating system is Windows XP, install the synchronization software Microsoft Active Sync to synchronize the development environment with the device simulator.

4. ASP. net mvc Framework, which is also free of charge and can be downloaded from MSDN or CodePlex.

5. Windows Mobile SDK 6.0 or later. By default, this SDK does not have a simulator image file, you can download from the following address: http://www.microsoft.com/downloads/details.aspx? FamilyID = 1A7A6B52-F89E-4354-84CE-5D19C204498A & displaylang = en

After the Web Application Development Toolkit is installed, it will create a folder named WebAppToolkitMobile at the location you specified. Open the WebAppToolkitMobile \ VisualStudioTemplates folder, double-click the Mobile Web Application. vsi file, and a new Mobile Application template project will be created in Visual Studio 2008. Open your Visual Studio 2008, select the Mobile Web Application Project template from the "My templates" category, and name your project "TestMobileWebApplication ". Add a unit test project as required by the wizard.

Figure 1

Now, if you look at the solution browser, it will have three different projects. The first project is "MobileCapableViewEngie", which is a class library project and is output as an Assembly referenced by the main project (. dll file ). During runtime, this Assembly determines which view to Display Based on the browser and device type.

Figure 2

For example, if you want to display an employee list in your asp.net application and you want to create an identical list for the mobile app browser, you need to create two different views. One of the Views is for the IE browser, while the other is for the mobile network browser. You can also create custom views for mobile browsers, because mobile phones and PDA displays may be very small. In most cases, developers will create custom views for mobile apps. The ViewEngineResult function of the MobileCapableViewEngine Class determines which view is displayed during runtime.

 
 

  
  
public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)  
  
  
        {  
  
  
            ViewEngineResult result = null;  
  
  
            HttpRequestBase request = controllerContext.HttpContext.Request;  
  
  
 
  
  
            if (request.Browser.IsMobileDevice)  
  
  
            {  
  
  
                string mobileViewName = string.Empty;  
  
  
 
  
  
                mobileViewName = string.Format(  
  
  
                                        CultureInfo.InvariantCulture,  
  
  
                                        "Mobile/{0}/{1}",  
  
  
                                        this.RetrieveDeviceFolderName(request.Browser.Browser),  
  
  
                                        viewName);  
  
  
 
  
  
                result = this.ResolveView(controllerContext, mobileViewName, masterName, useCache);  
  
  
 
  
  
                if (result == null || result.View == null)  
  
  
                {  
  
  
                    mobileViewName = string.Format(  
  
  
                                            CultureInfo.InvariantCulture,  
  
  
                                            "Mobile/{0}",  
  
  
                                            viewName);  
  
  
 
  
  
                    result = this.ResolveView(controllerContext, mobileViewName, masterName, useCache);  
  
  
                }  
  
  
            }  
  
  
              
  
  
            if (result == null || result.View == null)  
  
  
            {  
  
  
                result = this.ResolveView(controllerContext, viewName, masterName, useCache);  
  
  
            }  
  
  
 
  
  
            return result;  
  
  
        }  
  
  
 
  
  
        protected virtual ViewEngineResult ResolveView(ControllerContext controllerContext, string   
  
  
        viewName, string masterName, bool useCache)  
  
  
        {  
  
  
            return base.FindView(controllerContext, viewName, masterName, useCache);  
  
  
        } 
 
 

The next thing to do is to register all devices and browser types in the Application_Start event of the Global. asax file. The MobileCapableViewEngine assembly is configured with two default device folder mappings. One is for the iPhone, which is mapped to the View \ Home \ Mobile \ iPhone folder, and the other is for Windows Mobile Phones, mapped to the View \ Home \ Mobile \ WindowsMobile folder. Before adding instances to the engine set in the RegisterViewEngines function, developers can delete or add new folder ing by modifying the DeviceFolders attribute of the MobileCapableWebFormViewEngine class. See the following code snippet.

 
 

  
  
public static void RegisterViewEngines(ViewEngineCollection engines)  
  
  
        {  
  
  
            var engine = new MobileCapableWebFormViewEngine();  
  
  
            engine.DeviceFolders.Clear();  
  
  
            engine.DeviceFolders.Add("Pocket IE", "WindowsMobile");  
  
  
            engine.DeviceFolders.Add("AppleMAC-Safari", "iPhone");  
  
  
            engine.DeviceFolders.Add("Safari", "iPhone");  
  
  
 
  
  
            engines.Clear();  
  
  
            engines.Add(engine);  
  
  
        } 
 
 

Porting existing ASP. NET Applications to mobile phones

Once the device and view are registered, copy and paste the existing ASP. net mvc Framework application you want to transplant to the mobile project) to the TestMobileWebApplication project. You can also add the MobileCapableViewEngine assembly to your existing MVC project to make necessary modifications.

Next I will use the employee management application created using MVC Framework 2.0. This application has four views: Creating employees, editing existing employee data, displaying all employee data, and displaying specific employee data. I have copied all related files from the employee management application to the TestMobileWebApplication project and made necessary modifications to the RegisterViewEngine function. In addition, I have created new custom views for mobile devices and added some new management pages for mobile apps. I also created different CSS files for normal browsers and mobile browsers IN THE Content folder. In addition, I added the error handling function to the application. After all necessary components are added, as shown in.

Figure 3

Another change is required in the control class. For any Http request, your application code needs to redirect it to a specific view. Now you need to call the FindView function of the MobileCapableViewEngine class, this function recognizes the browser type and redirects your request to the corresponding custom view. BKJIA development channel also recommends ASP. net mvc Framework video tutorial to help you better understand ASP. net mvc framework.

Test your application using a simulator

Microsoft Mobile SDK 6.0 has installed related simulators. To test your application, you must first set the Device Manager and simulator. The dual-impact Device simulator Management Program (dvcemumanager.exe) is stored in the path C: \ Program Files \ Microsoft Device Emulator \ 1.0.

Figure 4

If your local system is Windows XP, you also need to configure Microsoft Activesync. Right-click the Active Sync icon on the Windows taskbar, select "Open Microsoft ActiveSync", and select connection settings from the File menu.

See Figure 4 to set up your ActiveSync connection. Select "Mobile Classic Emulator" in the device simulator management tool, right-click it, and select the connection option. This will enable Windows Mobile Classic Emulator. It may take 40-45 seconds for the first time. Right-click the running simulator management tool image and select the Cradle option to activate ActiveSync. You will see a Synchronization Wizard interface.

Figure 5

Do not select any options in the Wizard. Click Finish. Now we can test the application in Windows Mobile Emulator. Shows the simulator.

Figure 6

Return to the Visual Studio editor and press F5 to execute the Web application. Shows the list of existing employees in the general IE browser.

Figure 7

To display the same employee list in the mobile browser of Microsoft, I use a custom view that only displays part of employee information. As shown in:

Figure 8

With ASP. net mvc Framework, we can flexibly add custom view templates to projects. With the help of Text Template conversion Toolkit Text Template Transformation Toolkit), you can customize your existing ASP. net mvc view Template to the maximum extent.

Original question: Extend Your ASP. net mvc Application to Windows Mobile