How Can We Help?
If you’re just getting started with Power Pages, the below sample page can provide a useful starting point.
Features
- Use of the XMPro master page and theme (so it fits right in)
- Action buttons: Save & Reset
- Tabs
- Sample form layouts for fields: full width (no caption), 1 column, and 2 columns
- Basic grid sample
The Sample
1. Markup (.aspx) file
<%@ Page Title="My First Power Page" Language="C#" AutoEventWireup="true" CodeFile="MyFirstPowerPage.aspx.cs" Inherits="MyProject.MyFirstPowerPage" %> <asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server"> <div class="tbDetail"> <div class="taskheading"> <table><tr><td> <asp:Label id="lblName" runat="server"></asp:Label> </td></tr></table> </div> <div class="formcontainer"> <div id="detailNoWidget" class="formtask"> <div id="container" class="formcontainer" xmlns:dx="remove"> <div class="formwrapper"> <!-- BEGIN Action Buttons --> <div id="trigger" class="RowButtonTrigger"> <table class="triggerDetail"> <tbody> <tr class="triggerHeader"> <td class="triggerHeader">Select Action</td> </tr> <tr> <td class="RowButton"><span> <dx:ASPxButton ID="btnSave" runat="server" ClientInstanceName="btnSave" Text="Save" Width="140px" OnClick="btnSave_Click" CausesValidation="False"> <ClientSideEvents Click="function(s,e){loadingPanel.Show();}"/> </dx:ASPxButton> </span></td> </tr> <tr> <td class="RowButton"><hr /></td> </tr> <tr> <td class="RowButton"> <dx:ASPxButton ID="btnReset" runat="server" ClientInstanceName="btnReset" Text="Reset" Width="140px" OnClick="btnReset_Click" CausesValidation="False"> <ClientSideEvents Click="function(s,e){loadingPanel.Show();}"/> </dx:ASPxButton> </td> </tr> </tbody> </table> </div> <!-- END Action Buttons --> <div id ="detail" class="formdetailtrigger"> <!-- BEGIN Content--> <!-- BEGIN Tabs --> <div id="tabs" style="display:none;"> <ul> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> </ul> <div id="tab-1"> <!-- Form Layout Sample --> <table class="tbDetail" width="100%"> <tr height="10px"></tr> <tr class="rowDetail"> <td colspan="4"> Full Width Row, No Caption </td> </tr> <tr height="10px"></tr> <tr class="rowDetail"> <td style="width:15%;font-weight:bold;"> Caption </td> <td colspan="3" style="width:15%;"> [Field] </td> </tr> <tr height="10px"></tr> <tr class="rowDetail"> <td style="width:15%;font-weight:bold;"> Caption </td> <td style="width:35%;"> [Left Column] </td> <td style="width:15%;font-weight:bold;"> Caption </td> <td style="width:35%;"> [Right Column] </td> </tr> <tr height="10px"></tr> </table> <!-- Grid Sample --> <table class="tbDetail" style="width:100%;"> <tr class="rowDetail"> <td class="row_OG_Main"> <div class="ogDetail"> <table cellpadding='0' cellspacing='0' style="width:100%;"> <tr> <td style="text-align:center;" class='rowDet_OG_Header'> <div style="float:left;"> Grid Caption </div> </td> </tr> <tr> <td> <dx:ASPxGridView ID="grid" runat="server" ClientInstanceName="grid" DataSourceID="gridDataSource" KeyFieldName="ID" Width="100%"> <Columns> <dx:GridViewDataColumn FieldName="Column1"></dx:GridViewDataColumn> <dx:GridViewDataColumn FieldName="Column2" Caption="Column 2"></dx:GridViewDataColumn> <dx:GridViewDataColumn FieldName="Column3"></dx:GridViewDataColumn> </Columns> </dx:ASPxGridView> <asp:sqldatasource id="gridDataSource" runat="server"></asp:sqldatasource> </td> </tr> </table> </div> </td> </tr> <tr height="10px"></tr> </table> </div> <div id="tab-2"> Second tab content </div> </div> <!-- END Tabs--> <!-- END Content --> </div> </div> </div> </div> </div>
</div>
</asp:Content>
2. Code (.aspx.cs) file
```csharp using System; using System.Web.UI.WebControls; using XMPro.XMServer; namespace MyProject { public partial class MyFirstPowerPage : XMPro.XMWorkspace.BasePage { /// <summary> /// Use this event for the following: /// - Check the IsPostBack property to determine whether this is the first time the page is being processed. /// The IsCallback and IsCrossPagePostBack properties have also been set at this time. /// - Set base page properties /// </summary> protected override void OnPreInit(EventArgs e) { //Set page master this.Page.MasterPageFile = XMPro.XMServer.Settings.MasterPage; base.OnPreInit(e); } /// <summary> /// Raised after all controls have been initialized and any skin settings have been applied. /// The Init event of individual controls occurs before the Init event of the page. /// Use this event to read or initialize control properties. /// </summary> protected override void OnInit(EventArgs e) { base.OnInit(e); //Further initialise other controls here lblName.Text = base.Title; } /// <summary> /// The Page calls the OnLoad method on the Page object, and then recursively does the same for /// each child control until the page and all controls are loaded. /// The Load event of individual controls occurs after the Load event of the page. /// Use the OnLoad event method to set properties in controls and to establish database connections. /// </summary> protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack && !Page.IsCallback) { //Do anything here that needs to happen on the first load only } } protected virtual void btnReset_Click(object sender, EventArgs e) { base.Response.Redirect(Request.Url.AbsoluteUri, true); } protected virtual void btnSave_Click(object sender, EventArgs e) { //Your logic here } } }
Comments are closed.