Search code examples
c#asp.netajaxajaxcontroltoolkitasyncfileupload

How to use form with method="post" in asp.net web form


I am using ajax toolkit asyncFileUpload control

I had problem that my server side events does not fired and found this posts Hidden/Shown AsyncFileUpload Control Doesn't Fire Server-Side UploadedComplete Event

I inserted my uploader inside form and with this attributes enctype="multipart/form-data" method="post"

This uploader is inside my webs form which is inside master page

After adding this attributes i got this error

    A page can have only one server-side Form tag.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.Web.HttpException: A page can have only one server-side Form tag.

Source Error: 

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace: 

And here is my web form

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <form id="Form1" enctype="multipart/form-data" method="post" action="target_url"
    runat="server">
    <div id="Div1" runat="server">
        Just some time to make sure that the page doesn't get reloaded after uploading:
        <%=DateTime.Now %><br />
        <ajaxToolkit:AsyncFileUpload ID="FileUpload" runat="server" OnUploadedComplete="FileUpload_UploadCompleted"
            OnClientUploadComplete="FileUpload_ClientUploadCompleted" OnClientUploadError="uploadError"
            OnLoad="FileUpload_OnLoad" />
        <asp:Image runat="server" ID="imgUpload" src="" />
        <asp:Label runat="server" ID="lblerror" Text="" />
    </div>
    </form>
</asp:Content>

Solution

  • Your MasterPage already has a form element. Nested forms aren't allowed...

    I don't know much about the ajaxToolkit:AsyncFileUpload but, since it is a server control, it should change the parent forms properties. Have you tried removing the form like the code below?

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <div id="Div1" runat="server">
            Just some time to make sure that the page doesn't get reloaded after uploading:
            <%=DateTime.Now %><br />
            <ajaxToolkit:AsyncFileUpload ID="FileUpload" runat="server" OnUploadedComplete="FileUpload_UploadCompleted"
                OnClientUploadComplete="FileUpload_ClientUploadCompleted" OnClientUploadError="uploadError"
                OnLoad="FileUpload_OnLoad" />
            <asp:Image runat="server" ID="imgUpload" src="" />
            <asp:Label runat="server" ID="lblerror" Text="" />
        </div>
    </asp:Content>
    

    Another Possible Solution:

    "Pop" a "modal" form that just contains your form with the file upload control. This will remedy the nested forms issue. But, it does changed the functionality.