如何在 ASP.NET 网页中实现 html 表单 - ASP.NET 中的两种表单问题

2024-02-05

请看这个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 Web 表单中?
正如您一样,我们不能在默认的 ASP.NET 网页表单中拥有表单。
那么我能对第 5 页做什么呢?

提前致谢


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

这一切都是通过最小的改变实现的。你可以如何进行优化,但这是一般的想法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 ASP.NET 网页中实现 html 表单 - ASP.NET 中的两种表单问题 的相关文章

随机推荐