I recently had the pleasure of converting a web application to a responsive design layout. The goal was to only change the structure of the HTML. I was able to stick to this with the exception of the Modal Popup Extender, but the changes were very minimal.
Considerations
- Used the Modal Popup Extender
- XHTML
- CSS files, inline CSS styling, HTML style tags
- Ridged table layout
- All buttons are images
Expected Outcome
- Use Bootstrap 2.3.x
- HTML5
- Responsive design layout
- Must maintain support for IE8+ (potentially IE7)
- Layout organization and text should be as close as possible to the original. Styles and structure implementation will be completely different.
- Limit the code changes as much as possible.
The update process
The update process had a logical progression. Below I detail the highlights.
Update master page
I thought it was important to start with the master page; seemed logical. Below is the highlights on the things that I updated.
- Update the DocType
- Add meta tags
- Add new style tags to Bootstrap styles and place a ContentPlaceholder for styles after it
- Remove any tags which don't have 'runat="server"' or isn't a control. Leave the content.
- Put the content in the following div tag: <div class="container">
- Structure the header area
- Convert the menu bar/navigation section to the Bootstrap navbar
- Implement the design with Bootstrap design patterns/style
- Add Bootstrap scripts to the bottom of the page and place a ContentPlaceholder for scripts after it
The beginning of the page is the pretty boilerplate. I do as much as possible to promote other developers putting style code at the top of the page and the scripts at the bottom of the page. With Web Forms, this isn't always possible, but I try to stick to it when possible.
<!DOCTYPE html>
<html lang="eng">
<head id="header" runat="server">
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="on" http-equiv="cleartype" />
<meta content="True" name="HandheldFriendly" />
<meta content="320" name="MobileOptimized" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="iphon_tetris_icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png" />
<title />
<link rel="stylesheet" href="/Content/style.css" type="text/css" />
<asp:ContentPlaceHolder ID="StylesPlaceHolder" runat="server" />I put the following .snippet as close to the bottom of the page as possible.
<script src="/bundles/bootstrap.js"></script>
<asp:ContentPlaceHolder ID="ScriptPlaceHolder" runat="server" />
Update ASPX pages and User Controls
The process for updating the rest of the pages and user controls were pretty consistent.
- Remove any tags which don't have 'runat="server"' or isn't a control. Leave the content.
- Reimplement the design with Bootstrap design patterns/style
- Move any needed scripts specific for that page to the scripts placeholder
Updating Modals
These are in the ASPX pages and User controls, but I thought it deserved a separate section because the process is a bit more involved. It assumes that the above points have been completed on the modal sections.
There were 2 different processes for this.
- Modal which can be populated at page load
- Modal which must be populated with information from an item select from a grid view
Below is the general process for converting the modals.
- Remove the Modal Popup Extender tags and any dummy links tied to it.
- Implement the design with Bootstrap design patterns/style. Below is a template.
<div class="modal fade" style="display: none" id="pDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="vertical-align: middle">
<asp:Button ID="Button3" class="close" data-dismiss="modal" aria-hidden="true" Text="×" runat="server" />
<h4 class="modal-title">Header Text</h4>
</div>
<div class="modal-body form-horizontal">
<!-- Modal Content -->
</div>
<div class="modal-footer">
<div class="control-group">
<div class="controls">
<asp:Button ID="btnSave" CssClass="btn btn-success" Text="Save" OnClick="btnSave_Click" runat="server" />
<asp:Button ID="btnClose" CssClass="btn" data-dismiss="modal" Text="Close" runat="server" />
</div>
</div>
</div>
</div>
</div>
</div>
- IF the data was already loaded at the page load, update the link like the following:
<a data-toggle="modal" href="#pDemo">
There can be other attributes in the link, but the "data-toggle" and the "href" are the important points.
- IF the data needs to be loaded, wrap the modal in an UpdatePanel and follow the pattern in my previous blog post Handling Twitter Bootstrap Modals and UpdatePanels with PostBacks. If you can get into the code more than I could, you could omit a bunch of JavaScript using the following link in your code behind:
AjaxControlToolkit.ToolkitScriptManager.RegisterStartupScript(this, typeof(System.Web.UI.Page), "pDemo", "$('#pDemo').modal('show');", true);
There are other little things, but these were the most important parts.
All in all, I found the conversion to be very easy to implement and it gave the old page layout a new breath of life.
