Combining ink controls and server controls on a web page

A reader of my recent Ink on the Web article in CoDe Magazine (samples available here) emailed me with an odd problem that I had to see in action before I realized what was going on.

The problem was this. She had a web form with an ink-enabled winforms control on it that worked fine. But when she added an asp:dropdownlist, the page crashed. She said she got no error message.

I tried the same thing and received a big fat error saying “Control ‘dropdownlist1’ of type ‘dropdownlist’ must be placed inside a form tag with runat=server”.

Aha! In order to do most of the tricks I am performing with moving the ink control’s data from the client side to the server side require the form to not be a server-side form. Therefore “runat=server” does not exist in the form tag.

The solution is to have separate forms on the page for the ink control and the server side controls.

Kirk Allen Evans reminds us that only one server side form can be visible at a time, so you have to design your page around these limitations unfortunately. You don’t be able to have server controls in a form, then below that an ink control in another form and then below that more server controls in a third form.

The general html of the page would look like this:

 
<html>
<HEAD> …some stuff in here </HEAD>
 
<body>
<script> ..some scrpts here </script>
 
<!–this is the form that handes the inkable control. It does NOT have runat=server–>

  <form id=”inkForm” name=”inkForm” action=”Handler.ashx” method=”post”>

     <object id=”ComplexInkControl” classid=”InkControls.dll#InkControls.MyInkControl” style=”width: 100px;
     height: 100px”
VIEWASTEXT></object>

  </form>
 
<!–this is the form that has server side controls–>

   <form id=”serversideFORM” runat=server>

        <asp:DropDownList ID=”DropDownList1″ runat=”server” AutoPostBack=”True”>
             <asp:ListItem>a</asp:ListItem>
            
<asp:ListItem>b</asp:ListItem>
             <asp:ListItem>c</asp:ListItem>
            
<asp:ListItem>d</asp:ListItem>
         
</asp:DropDownList><br />

         <asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label><br />

     </form>

</body>

</html>

Don’t Forget: www.acehaid.org

  Sign up for my newsletter so you don't miss my conference & Pluralsight course announcements!  

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.