How to deal with an embedded HTML form in an ASP.NET page

Published: Sunday, 23-Nov-2008

Let's say that you have an ASP.NET page that get's a content feed from your blog. In your feed there is an embedded HTML form that posts to another website. If you simply embed this form, the containing ASP.NET form will override the embedded ASP.NET form and it will just do a normal PostBack not post the embedded HTML form.

Here is a workaround that we've used. 


Close the ASP.NET form tag before your embedded content form begins, then create a dummy form tag after your embedded form is closed to clean up the ASP.NET inserted </form> tag. This allows your embedded form to work and prevents HTML validation errors.

A base asp.net form looks like this....

[Wire up and head stuff here...]
<body>
<form id="form1" runat="server">
  <div>
    Hello World!
  </div>
</form>
</body>
</html>


Let's say that instead of Hello World I have an asp literal that is populated with content from say a blog feed that contains a feedback form. (or I could have just pasted an HTML form from some other source). My code now looks like this...

<body>
<form id="form1" runat="server">
  <div>
    <asp:literal id="litBlogContent" runat="server" />
  </div>
</form>
</body>
</html>


The way to implement this solution is as follows.....

<body>
<form id="form1" runat="server">
  <div>
  </form> <!-- Close the ASP.NET "form1" -->
    <asp:literal id="litBlogContent" runat="server" />
  </div>
<!-- Remove the ASP.NET close form tag that .NET inserted at the bottom of the page. -->
<!-- </form> -->
</body>


If you have a standard WebForm this works fine. If however you are using Master Pages, and your embedded form is in a content page, then you don't have access to the close form tag, so the you need to create a "fake" form to close the </form> tag embedded in your HTML page.

<asp:Content ID="Content1" ContentPlaceHolderID="UpperBody" Runat="Server">
  </form> <!-- Close the ASP.NET close form tag that's embedded in the master page. -->
  <div>
    <asp:literal id="litBlogContent" runat="server" />
  </div>
  <form id="dummyForm"> <!-- put in a dummy form to deal with the </form> tag that's embedded at the end of the master page. -->
</asp:Content>


VisualStudio will give you a warning that there are missing open and close tags, you can just ignore these, what's important is that the rendered HTML when the form runs will validate.

If you have multiple forms on your page, you'll need to make sure that your ASP.NET form and input fields are BEFORE you insert the close form tag, and before your HTML form. Using this method, only one form will submit, the ASP.NET form or the HTML form.

UPDATE: I've been asked to show an embedded standard HTML form, so here is an example with just a simple HTML form.

Standard WebForm....

<body>
<form id="form1" runat="server">
  <div>
  </form> <!-- Close the ASP.NET "form1" -->
  <form id="standardHtmlForm" method="post"
      action="http://www.thirdPartySite.com/post.aspx">
    Field: <input id="txtInputField" type="text"></input>
    <input type="submit" value="Submit">
  </form>
  </div>
<!-- Remove the ASP.NET close form tag that .NET inserted at the bottom of the page. -->
<!-- </form> -->
</body>


Or with a master page.....

<asp:Content ID="Content1" ContentPlaceHolderID="UpperBody" Runat="Server">
  </form> <!-- Close the ASP.NET "form1" -->
  <form id="standardHtmlForm" method="post"
      action="http://www.thirdPartySite.com/post.aspx">
    Field: <input id="txtInputField" type="text"></input>
    <input type="submit" value="Submit">
  </form>
<form id="dummyForm"> <!-- put in a dummy form to deal with the </form> tag that's embedded at the end of the master page. -->
</asp:Content>


Keywords: ASP.NET Embed HTML Form ASP.NET Page MasterPage

If you have an opinion about what we've written we welcome you to send us feedback at: info@KSFInternational.com.

You can subscribe to an RSS feed here: KSF International Blog RSS Feed