ASP.NET POSTBACK 在 contentplaceholder 中不起作用

Question

我只是 ASP.NET 的初学者。现在我有 2 个页面：主页面和子页面（内容页面）。在子页面上，我创建了一个 html 表单，用于将用户的输入提交到服务器。我使用 asp 按钮来提交这些，但它只是通过运行我的 javascript 来验证用户的输入。底部的标签用于检查它是否回发。即使在我单击提交按钮后页面刷新，它也总是显示“False”。我不知道我在这里做错了什么。另外，我想在用户提交到服务器后在文本框中显示所有用户信息。希望你能帮我解释清楚。非常感谢你。

1/母版页：

2/子页面（内容页面）：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
<div class="row">
        <div class="box">
            <div class="col-lg-12">
                <hr>
                <h2 class="intro-text text-center">Contact <strong>Mon Ami Cafe Restaurant</strong>
                </h2>
                <hr>
            </div>
            <div class="col-md-8" id="map-canvas">
                <!-- Embedded Google Map using an iframe - to select your location find it on Google maps and paste the link as the iframe src. If you want to use the Google Maps API instead then have at it! -->
                <!--iframe width="100%" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=14291+S+Euclid+St,+Garden+Grove,+CA+92843&amp;aq=&amp;sll=33.754949,-117.938489&amp;sspn=0.010437,0.021136&amp;ie=UTF8&amp;hq=&amp;hnear=14291+S+Euclid+St,+Garden+Grove,+California+92843&amp;t=m&amp;z=14&amp;ll=33.754949,-117.938489&amp;output=embed"></!--iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=14291+S+Euclid+St,+Garden+Grove,+CA+92843&amp;aq=&amp;sll=33.754949,-117.938489&amp;sspn=0.010437,0.021136&amp;ie=UTF8&amp;hq=&amp;hnear=14291+S+Euclid+St,+Garden+Grove,+California+92843&amp;t=m&amp;z=14&amp;ll=33.754949,-117.938489" style="color:#0000FF;text-align:left">View Larger Map</a></small-->
            </div>

            <div class="col-md-4">
                <h5>Phone:</h5>
                <p><strong>*******</strong>
                </p>
                <h5>Email:</h5>
                <p><strong>*******</strong>
                </p>
                <h5>Address:</h5>
                <p><strong>*******</strong>
                </p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div class="row">
        <div class="box">
            <div class="col-lg-12">
                <hr>
                <h2 class="intro-text text-center">Contact
                </h2>
                <hr>

                <form name="ContactForm"  method="post">
                    <div class="row" id="ContactForm">
                        <div class="form-group col-lg-4">
                            <label>Name</label>
                            <input type="text" id="NAME" class="form-control">

                        </div>
                        <div class="form-group col-lg-4">
                            <label>Email Address</label>
                            <input type="text" id="EMAIL" class="form-control">

                        </div>
                        <div class="form-group col-lg-4">
                            <label>Phone Number</label>
                            <input type="text" id="PHONE" class="form-control">

                        </div>
                        <div class="clearfix"></div>
                        <div class="form-group col-lg-12">
                            <label>Message</label>
                            <textarea id="MSG" class="form-control" rows="6"></textarea>

                        </div>
                        <div class="form-group col-lg-12">
                            <input type="hidden" name="save" value="contact">
                            <asp:Button ID="btnSubmit" runat="server" OnClientClick="return validateForm();" Text="Submit"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--The output information will be here -->
    <p><asp:Label id="lbl1" runat="server" /></p>
</asp:Content>

这是我的脚本@Chia...：

<script>
    function validateName() {
        var x = document.getElementById("NAME").value;
        if (x == null || x == "") {
            alert("Name must be filled out");
            return false;
        }
        else
            return true;
    }

    function validateEmail() {
        var y = document.getElementById("EMAIL").value;
        var atpos = y.indexOf("@");
        var dotpos = y.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= y.length) {
            alert("Not a valid e-mail address");
            return false;
        }
        else
            return true;
    }

    function validatePhone() {
        var formatForm = /^[1-9]\d{9}$/;
        var z = document.getElementById("PHONE").value;
        if (z.length == 0) {
            alert("Phone must be filled out");
            return false;
        }
        else if (z.length < 10 || z.length > 10 || !(z.match(formatForm))) {
            alert("Not a valid phone number");
            return false;
        }
        else
            return true;
    }

    function validateMess() {
        var t = document.getElementById("MSG").value;
        if (t == null || t == "") {
            alert("Pleave leave your message");
            return false;
        }
        else
            return true;
    }

    function validateForm() {
        if (validateName()) {
            if (validateEmail()) {
                if (validatePhone()) {
                    if (validateMess()) {
                        //alert("Submitted Sucessfully");
                        return true;
                    }
                }
            }
        }
        return false;
    }
 </script>

Answer 1

您需要在您的 asp 按钮中添加一个 onclick 属性，该按钮在您的代码后面的类中调用一个事件。例如

<asp:Button ID="btnSubmit" runat="server" OnClientClick="return validateForm();" OnClick="btnSubmit_Click" Text="Submit"/>

哪个会触发事件

protected void btnSubmit_Click(object sender, System.EventArgs e)
{
   // Do stuff here after postback
}

因为您已经连接了 onclientclick 属性并且 ValidateForm 返回一个 bool 值，所以只有在 validateForm 函数返回 true 时才允许触发 onclick 事件。