Conferences like PDC are good because it reminds us that real customers have a wide variety of challenges that it is possible for us—purveyors of code goodness—to lose sight of. Customers are using older styles of implementation. They are faced with upper boundary conditions that may be hard for us to emulate in a laboratory somewhere, and they may just be trying to do something that we haven’t thought of.
One customer mentioned a competitor’s editor that couldn’t handle 100M data files. Manually editing 100M+ files is probably very challenging and represents or at least approaches a boundary condition. Another customer said that he had a Web application that used iframes and that he wanted to update the controls to DevExpress ASP.NET controls but didn’t want to restructure the architecture of the site. His problem is: how do I load content using an ASPxMenu into an iframe on the same page. This, being a challenge I can handle while standing at a kiosk at PDC, is the one I solved this morning.
The basic idea as related to me was that one iframe had an ASPxMenu and the other iframe should display the content indicated by the menu item clicked. To keep the sample is structured with a Default.aspx page containing the two iframes and the ASPxMenu. In the first iframe a page containing the menu is assigned to the first iframe’s src attribute. The MenuPage.aspx contains an ASPxMenu with one menu item. The menu item references a page named OtherPage.aspx. Click on the menu item and the OtherPage.aspx is loaded into the second iframe. The key to the solution is to set the Target attribute of the menu item to the target iframe’s name.
<dxm:ASPxMenu ID="ASPxMenu1" runat="server" >
<Items>
<dxm:MenuItem NavigateUrl="~/OtherPage.aspx"
Text="Go" Target="iframe2">
</dxm:MenuItem>
</Items>
</dxm:ASPxMenu>
Setting the Target to an iframe name is not immediately intuitive because the dropdown list for the Target attribute contains just the standard choices: _blank, _parent, _search, _self, and _top. You have to know to manually type in the iframe name (not id but name). Listing 1 contains the complete listing for the page containing the iframes (and a stub page, StartPage.aspx just to show you where the second iframe is). Listing 2 contains the listing for the page that contains the ASPxMenu, so you can see the relationship between the iframe’s, menu, and content pages.
Listing 1: The main page containing the iframes.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxMenu" TagPrefix="dxm" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe name="iframe1" height="100px" width="50%" src="MenuPage.aspx">
</iframe>
<iframe name="iframe2" height="200" width="50%" frameborder="1"
style="top:101px"
src="StartPage.aspx">
</iframe>
</div>
</form>
</body>
</html>
Listing 2: The page containing the ASPxMenu.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MenuPage.aspx.cs" Inherits="MenuPage" %>
<%@ Register assembly="DevExpress.Web.v9.2, Version=9.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxMenu" tagprefix="dxm" %>
<%@ Register assembly="DevExpress.Web.v9.2, Version=9.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxSiteMapControl" tagprefix="dxsm" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dxm:ASPxMenu ID="ASPxMenu1" runat="server" >
<Items>
<dxm:MenuItem NavigateUrl="~/OtherPage.aspx"
Text="Go" Target="iframe2">
</dxm:MenuItem>
</Items>
</dxm:ASPxMenu>
</div>
</form>
</body>
</html>