Custom Modules - Part 2 a - Using User Controls for the Edit Page

In part 2 of this article series I introduced the module's Edit page that serves as the UI for the user to add your module to a paragraph and configure it. In that article, I said the following:

The Module Edit Page is not a full blown ASPX web form. That means you can't use
controls that require to be rendered in a <form runat="server" />. Using the 
built-in Dynamicweb controls or simple controls like an HTML input box work 
fine though.

Turns out this is not the complete story as Nicolai from Dynamicweb Denmark and Pavel from Dynamicweb Russia pointed out.

Using a User Control for the Edit Page

As Pavel points out in his blog post, you can bring most of the ASP.NET postback architecture back in the Edit page by using an .ascx User Control instead of an .aspx Web Form. When you use a User Control, it becomes part of the container Web Form so your controls can participate in the page's life cycle. This in turn means that you can use any ASP.NET control, and stuff like postbacks work normally.

There's still one caveat though: you can't use View State as it's turned off for the entire page containing your User Control. This is not a big problem though. Since Edit pages are typically small and limited in functionality, it shouldn't be too hard to work around the absence of View State.

To try it out myself, I created a simple .ascx User Control as an Edit page for a simple module. I then added a GridView and an EntityDataSource control (hooked up to a simple Entity Framework model to access data stored in the EcomCustomerFavoriteLists table). I enabled all features for the GridView (paging, sorting and so on), compiled, registered the module and added it to a page. Sure enough; everything worked as advertised. Paging, sorting, inserting and so on all worked fine. Here's the code I ended up using:

<%@ Control Language="C#" AutoEventWireup="true" 
       CodeBehind="UCModule_Edit.ascx.cs"
       Inherits="Dynamicweb.Samples.Web.CustomModules.UCModule.UCModule_Edit" %>
<%@ Register Assembly="Dynamicweb.Controls" Namespace="Dynamicweb.Controls" 
       TagPrefix="dw" %>
<dw:ModuleHeader ID="MH1" runat="server" ModuleSystemName="UCModule" />
<dw:ModuleSettings ID="MS1" runat="server" ModuleSystemName="UCModule" />
<dw:GroupBox ID="GroupBox1" runat="server" Title="Settings">
  <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
     AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="EntityDataSource1">
    <Columns>
      <asp:CommandField ShowDeleteButton="True" 
           ShowEditButton="True" ShowSelectButton="True" />
      <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" 
           SortExpression="ID" />
      <asp:BoundField DataField="AccessUserID" 
           HeaderText="AccessUserID" SortExpression="AccessUserID" />
      <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
    </Columns>
  </asp:GridView>
  <asp:EntityDataSource ID="EntityDataSource1" 
         runat="server" ConnectionString="name=SamplesEntities"
         DefaultContainerName="SamplesEntities" EnableDelete="True"
         EnableFlattening="False" EnableInsert="True" EnableUpdate="True" 
         EntitySetName="EcomCustomerFavoriteLists">
  </asp:EntityDataSource>
</dw:GroupBox>

As you can see, this is pure ASP.NET code. When used in a module's Edit page, it behaves as you'd expect.

User Controls are an excellent alternative to Web Forms for Edit pages. With this option, I don't really see a reason anymore to use Web Forms for Edit pages.