如何在asp.net网页中实现html表单-asp.net中的两个表单问题

请参阅以下html代码：

<!--   PAGE - 5  -->
                <div class="section cc_content_5" id="page5" style="display: none;">
                    <div class="pad_content">
                        <div class="right grid_1">
                            <h1>
                                Contact Address
                            </h1>
                            <img src="Images/photo_5.jpg" alt=""><br />
                            <br />
                            <strong>The Companyname Inc</strong> 8901 Marmora Road,<br />
                            Glasgow, D04 89GR.<br />
                            Telephone: +1 800 123 1234<br />
                            Fax: +1 800 123 1234<br />
                            E-mail: <a href="mailto:#">www.copanyname.com</a><br />
                        </div>
                        <div class="left grid_2">
                            <h1>
                                Contact Form
                            </h1>
                            <div id="note">
                            </div>
                            <div id="fields">
                                <form id="ajax-contact-form" action="javascript:alert('success!');">
                                <label>
                                    Name:</label><input class="textbox" name="name" value="" type="text">
                                <label>
                                    E-Mail:</label><input class="textbox" name="email" value="" type="text">
                                <label>
                                    Subject:</label><input class="textbox" name="subject" value="" type="text">
                                <label>
                                    Comments:</label><textarea class="textbox" name="message" rows="5" cols="25"></textarea>
                                <label>
                                    Captcha</label><img src="Images/captcha.php" style="margin: 3px 0px; width: 200px;
                                        height: 32px;">
                                <div class=" clear">
                                </div>
                                <label>
                                    &nbsp;</label><input class="textbox" name="capthca" value="" type="text">
                                <div class=" clear">
                                </div>
                                <label>
                                    &nbsp;</label><input class="pin" name="submit" value="Submit" type="submit">
                                </form>
                                <div class="clear">
                                </div>
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </div>

联系地址




公司名称公司8901 Marmora路，

格拉斯哥，D04 89GR.

电话：+1800 123 1234

传真：+1800 123 1234

电子邮件：

联系方式
姓名：
电邮：
主题：
评论：
验证码

以及他们的剧本：

<script type="text/javascript">
    $(document).ready(function () {
        $("#ajax-contact-form").submit(function () {
            var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
                if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
                { result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide(); } else
                { result = msg; } $("#note").html(result);
            }
            }); return false;
        });
    });
    function freset()
    { $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>

$（文档）.ready（函数（）{
$（“#ajax联系人表单”）.submit（函数（）{
var str=$（this.serialize（）；$.ajax（{type:“POST”，url:“contact.php”，data:str，success:function（msg）{
如果（msg==“OK”）//已发送消息？显示“谢谢”消息并隐藏表单
{result='您的邮件已发送。谢谢！
；$（“#字段”）.hide（）}其他
{result=msg；}$（“#note”）.html（result）；
}
})；返回false；
});
});
函数freset（）
{$（“#注意”）.html（“”）；document.getElementById（'ajax-contact-form'）.reset（）；$（“#字段”）.show（）}

我真的想知道如何将第5页放入我的asp.net web表单中？
正如您所说，我们不能在默认asp.net网页表单中包含表单。
那么我能对第5页做些什么呢

---

提前感谢

在asp.net页面中不能有两个表单，而这两个表单都可以处理代码隐藏

你的选择

将第二个表单放在asp.net表单之前或之后

不要设置第二个表单，只需读取您感兴趣的输入数据就可以了

使用javascript在页面末尾动态创建表单并发布

因为在这里我看到您发布到php，并且我认为您喜欢在asp.net中保留旧代码，

将它们添加到asp.net表单的结束表单之后。

<form id="AspForm" runat="server">
...
</form>
<form id="ajax-contact-form"  method="post" action="contact.php" >
...
</form>

...
...

更极端 因为你们都已经准备好使用javascript了，所以你们可以做到这一点。将所有内容复制粘贴到页面末尾的表单中，然后发布

    <form id="AspForm" runat="server">
    ...
      <div id="ajax-contact-infos" >
       <label>
          Name:</label><input class="textbox" name="name" value="" type="text">
       <label>
       <input class="pin" name="submit" value="Submit" 
         type="button" onclick="SubmitThisForm();return false;" >
        ...
      </div>
    </form>
    <form id="ajax-contact-form"  method="post" action="contact.php" >
       <div id="PlaceOnMe" ></div>
    </form>

...
姓名：
...

在javascript上，在将其发布为之前复制它

<script type="text/javascript">
    function SubmitThisForm()
    {
            // here I copy (doublicate) the content of the data that I like to post
            //  in the form at the end of the page and outside the asp.net
        jQuery("#PlaceOnMe").html(jQuery("#ajax-contact-infos"));
            // Now we submit it as its your old code, with out change anything
        jQuery("#ajax-contact-form").submit();
    }

    // here is the old code.
    $(document).ready(function () {
        $("#ajax-contact-form").submit(function () {
            var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
                if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
                { result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide(); } else
                { result = msg; } $("#note").html(result);
            }
            }); return false;
        });
    });
    function freset()
    { $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>

函数SubmitThisForm（）
{
//在这里，我复制（双重复制）我想发布的数据内容
//在页面末尾和asp.net外部的表单中
jQuery（“#PlaceOnMe”）.html（jQuery（#ajax联系人信息”）；
//现在我们提交它作为您的旧代码，没有任何更改
jQuery（“#ajax联系表单”）.submit（）；
}
//这是旧代码。
$（文档）.ready（函数（）{
$（“#ajax联系人表单”）.submit（函数（）{
var str=$（this.serialize（）；$.ajax（{type:“POST”，url:“contact.php”，data:str，success:function（msg）{
如果（msg==“OK”）//已发送消息？显示“谢谢”消息并隐藏表单
{result='您的邮件已发送。谢谢！
；$（“#字段”）.hide（）}其他
{result=msg；}$（“#note”）.html（result）；
}
})；返回false；
});
});
函数freset（）
{$（“#注意”）.html（“”）；document.getElementById（'ajax-contact-form'）.reset（）；$（“#字段”）.show（）}

---

所有这些都是最小的变化。您可以进行优化，但这是总体思路。

您有许多选择；嵌套表单是最糟糕的，因为这取决于浏览器

正如@Aristos所提到的，你可以拥有一个接一个的形式。这是一个很好的解决方案，但不一定是最好的网站设计方面

第二种方法是，您可以将联系人表单嵌入普通HTML页面，然后将其包含在iframe或类似的父页面中。这可以解决嵌套表单的问题，但可能无法提供用户体验方面所需的行为

第三，你的联系方式更适合成为一名

您可以将所有联系人表单字段放入ascx文件中，并在此控件中处理提交按钮的单击。处理此提交后，您可以用一条简单的消息替换用户控件，感谢用户的输入

您还可以将所有必需的表单验证都放在这里。您的ASCX可能看起来像：

<asp:Panel runat="server" id="ContactPanel">
<div class="left grid_2">
        <h1>
            Contact Form
        </h1>
        <div id="note">
        </div>
        <div id="fields">
            <label for="<%=InputContactName.ClientID%>">Name:</label>
            <asp:TextBox runat="server" id="InputContactName" value="" />
            <!-- Rest of Form goes here -->
            <div class=" clear">
            </div>
            <asp:Button runat="server" id="ContactFormSubmit" OnClick="ContactFormSubmit_Click" Text="Send Feedback" />
            <label>&nbsp;</label><input class="pin" name="submit" value="Submit" type="submit">
            <div class="clear"></div>
        </div>
    </div>
</div>
</asp:Panel>
<asp:Panel runat="server" id="ThanksPanel" Visible="false">
    <p>Thank you for your feedback. We'll try not to ignore it. But it is Friday. So we might. At least until Monday.</p>
</asp:Panel>

联系方式
姓名：