Migrating HTML Pages to Web Forms Pages
You can work with and run existing HTML pages as-is in Visual Studio. You can edit the files in the HTML Designer and run them as you would other pages in your project. However, if the HTML page includes a form or if it relies on browser-sensitive client script, you might find it useful to convert the page to an ASP.NET Web Forms page.
Migrating an ASP page to a Web Forms page accomplishes the following:
- Creates the proper Web Forms file extension for the page.
- At your option, generates a code-behind class file for the page.
- Adds the appropriate page directives to the page so that it is linked with the code-behind file. For details, see @ Page.
The migration does not do the following:
- Convert existing HTML elements to HTML server controls or Web server controls. You can perform this step manually after the migration.
When the migration is complete, you can run the page normally. Generally, however, after performing the migration you will want to do further work on the page, such as converting existing HTML elements to ASP.NET server controls.
To migrate an HTML page into a Web Forms project
- In Solution Explorer, right-click the project, point to Add, then click Add Existing Item.
- In the Add Existing Item dialog box, find the HTML page to migrate, then choose Open.
Tip In the Files of type box, select Common Web Files.
When you migrate the file, it is physically copied from the file's original location to the location of your Web Forms project, and it appears in Solution Explorer.
- In Solution Explorer, right-click the file name, choose Rename, and change the file name extension to ".aspx".
This causes two confirmation dialog boxes to appear, one after the other.
- Do the following:
- The first dialog box notes that changing the file name extension may invalidate the file format for use with some applications. Click Yes.
- The second dialog box indicates that there is no code-behind class file associated with the new .aspx file. Click Yes to add the code-behind class file.
Tip You can click the Show All Files button in Solution Explorer to see all the files associated with this project. If you expand the tree below your newly migrated file, you should see the code-behind class file.
- Open the new .aspx file.
By default, the file will open in Design view. If there are syntax errors on the page, the designer will open the file in HTML view. In that case:
- Try switching to Design view. It will not be displayed; instead you will see a message indicating syntax errors.
- Fix the errors and try switching to Design view again.
Note By default, switching between views causes the Web Forms Designer to apply automatic formatting. This can fix some syntax errors, such as missing quotation marks. For details, see Format, HTML/XML, Text Editor, Options Dialog Box.
- In HTML view, inspect the file to ensure that the file contains an HTML
<form>element within the HTML
<body>tags. If not, add a
<form>tag one and in the opening form tag, set the attribute
Runat = "server"attribute so that it looks similar to the following:
<form id="Form1" method="post" runat="server">
- Save the form, compile the project, and view it in the browser. For details see Compiling and Running Web Forms Pages.
- Check for issues that appear in the Task List window and resolve them. For more information see Task List Window.
- Repeat Steps 7 and 8 until your form is working properly.
At this point, you will not have any server controls on the page. However, you can convert existing HTML control to HTML server controls. For details, see Converting HTML Server Controls to HTML Elements.
You only need to migrate the controls that you want to be accessible to server code during run time. The HTML controls that you do not migrate will behave as before. For more information, see Adding HTML Server Controls to a Web Forms Page.
Note If you wish to add additional Web server controls to your newly migrated Web Forms page, you must close the file, and open it again for the Web Forms Designer to properly initialize the Web Forms tab of the Toolbox. You may then drag Web server controls to your Web Forms page. For more information, see Introduction to ASP.NET Server Controls.