Two forms in ASP.NET

Question

You can only have one form runat="server" per page apparently.

My page has one form, where it loads in a list of names. This form allows you to add a new name to the list as well.

I've attatched an onclick event to each name in the listview. When you click on it, I need it to load the data into the edit form (next to the add form) with JavaScript code; I can do this fine.

But how do I structure it on the page to have two forms?

An illustration:

<table>
    <tr>
        <td style="width:50%;" valign="top">

            <form runat="server" action="productCats.aspx?action=new&mid=2">
                <div class="subHead">Create New Category</div>
                <table class="settingTable">
                    <tr>
                        <td colspan="2"><b>Category Name</b></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:TextBox ID="catName" runat="server" CssClass="tbox widebox"></asp:TextBox>
                            <asp:RequiredFieldValidator runat="server"
                                      id="ValidatorName"
                                      ControlToValidate="catName"
                                      ErrorMessage="You need to enter a category name"
                                      display="Dynamic" />
                        </td>
                    </tr>
                    <tr>
                        <td>This is the name of your category.</td>
                    </tr>
                    <tr>
                        <td colspan="2"><b>Parent Category</b></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:ListBox SelectionMode="Single" Rows="8" id="parent" runat="server" CssClass="tbox widebox">
                                <asp:ListItem Selected="True" Text="Top Level" Value="0"></asp:ListItem>
                            </asp:ListBox>
                            <asp:RequiredFieldValidator runat="server"
                                      id="RequiredFieldValidator1"
                                      ControlToValidate="parent"
                                      ErrorMessage="You need to select a parent"
                                      display="Dynamic" />
                        </td>
                    </tr>
                    <tr>
                        <td>Choose a parent this category belongs to.</td>
                    </tr>
                </table>
                <asp:Button id="id" text="Create" runat="server" />
            </form>
        </td>
        <td style="width:4%;">
        </td>
        <td valign="top">
        <div class="subHead">Modify Category</div>

            <form id="Form1" action="productCats.aspx?action=update&mid=2">
                <table class="settingTable">
                    <tr>
                        <td colspan="2"><b>Category Name</b></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:TextBox ID="newCatName" runat="server" Enabled="false" CssClass="tbox widebox"></asp:TextBox>
                            <asp:RequiredFieldValidator runat="server"
                                      id="RequiredFieldValidator2"
                                      ControlToValidate="newCatName"
                                      ErrorMessage="Enter a new category name"
                                      display="Dynamic" />
                        </td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
</table>

Answer 1

ASP.NET Web Forms works by having just one <form> element on a page, and getting this posted back to the same page every time something changes (postbacks). Trying to use multiple forms, and specifying custom action attributes on the form element is going against what the framework is designed to work with, and that's never really a good idea.

I would just try to get rid of the second <form> element, and remove the action attribute from the first <form>. Also, ASP.NET will be much happier if everything is inside the form, i.e. your <table> tags at the top of the page.

I'm not sure what your page is doing, but if you've got a TextBox and you're using the contents of this to add items to a ListBox, a more Web Forms-like approach would be to use some control to do a postback when the TextBox has been filled in, and then re-bind the ListBox to some kind of data source. Maybe use an UpdatePanel if you want an Ajax postback.

If you're more comfortable with JavaScript and query string parameters, maybe ASP.NET MVC would be a better fit.

Answer 2

By what I understood from your explanation, you want a functionality on this page of yours where when you click on one of the listitem in the list, the elements in the form2 needs to displayed and to modify the details... What I think is ... use two Panels and onclick of the item in ListBox you can show the Edit Panel and on the change of details and some other event like button click .. you can show the ListBox Panel with the changed detail.

Yes as Graham has mentioned you can use Ajax update panel to accomplish this.