如何在asp.net網頁中實現一個html表單 - 在asp.net中有兩個表單問題

Question

請看這個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>

和他們的腳本：

<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>

我真的想知道如何將第5頁放入我的asp.net網頁表單中？
因為我們在默認的asp.net網頁表單中沒有表單。
那么我能對第5頁做些什么呢？

提前致謝

Answer 1

你不能在asp.net頁面中有兩個表單，並且兩個表單都在后面編寫代碼。

你有另一種選擇。

1. 在asp.net表單之前或之后放置第二個表單
2. 不要設置第二種形式，只需閱讀您對代碼背后感興趣的輸入數據。
3. 使用javascript動態創建頁面末尾的表單並發布。

因為在這里我看到你發布到php並且我認為你喜歡用asp.net保留舊代碼add them after the closing form of the asp.net form.

<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>

所有這些都是最小的變化。 你可以如何進行優化，但這是一般的想法。

Answer 2

你有很多選擇; 嵌套表單是最糟糕的，因為它取決於瀏覽器將會/不會工作。

你可以像@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>

在您的ContactFormSubmit_Click按鈕中，您可以從聯系表單中獲取文本，隱藏ContactPanel，並顯示ThanksPanel。

非常簡單，並封裝在用戶控件中。