在按钮上同时使用 JavaScript 和 C# 方法的情况下，如何防止回发页面？

Question

这是一个 ASP.NET C# 的问题。

    <script>
        function buttonfunc() {
            document.getElementById("demo").innerHTML = "js work";
        }
    </script>

    <form id="form1" runat="server">
        <div>
            <p id="demo"></p>
            <asp:Button ID="UpdateButton" runat="server" Text="Update"
             OnClick="UpdateButton_Click" OnClientClick="buttonfunc()"; return false;/>
        </div>
    </form>

        protected void UpdateButton_Click(object sender, EventArgs e)
        {
            Response.Write("cs work");
        }

在按钮上同时使用 JavaScript 和 C# 方法的情况下，我们如何停止回发页面并同时显示两行文本（如果可能，不使用 AJAX）？

Answer 1

这种工作方式相当方便。

虽然该按钮可以同时具有客户端事件和服务器端事件？

如果客户端js代码/事件返回false，则服务器端事件不会触发。 这非常适合提示用户删除记录或执行某些您需要“确认”的操作。

所以，按下这个按钮：

        <asp:Button ID="cmdDel" runat="server" Text="Delete record"
            CssClass="btn"
            OnClick="cmdDel_Click"
            OnClientClick="return DelConfirm()" />

    <script>

        function DelConfirm() {

            return confirm("Really delete this reocrd?")

        }

    </script>

因此，如果 js 代码（客户端）返回 true，则服务器按钮点击运行。 如果客户端 js 代码返回 false，则服务器端按钮不会运行。

你会看到上面运行的：

并同时显示两行文字

嗯，不清楚你在这里的目标是什么。 您要在此处显示哪两行？

我的意思是，要么你想要/让服务器端按钮事件代码运行，要么它不运行。 如前所述，如果您返回 false，那么您不应该看到回发。 使用您的示例代码，返回 false 应该导致服务器端按钮甚至永远不会运行。

我的意思是，如果您不进行回发，那么您可以/将会运行服务器端按钮代码就没有意义。 您需要回发才能发生这种情况。

现在，您可能可以使用更新面板，它允许您仅定义 web 页面中将传送到服务器并运行您的代码的那部分。 从用户的角度来看，该页面似乎没有回发（在这种情况下您实际上没有完整的页面回发）。 浏览器滚动条不会改变位置，并且您不会看到浏览器“微调器”显示回发。

因此，您在脚本管理器中拖放，然后在更新面板中，您将拥有：

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <asp:Button ID="cmdDel" runat="server" Text="Delete record"
                    CssClass="btn"
                    OnClick="cmdDel_Click"
                    OnClientClick="return DelConfirm()" />

                <script>

                    function DelConfirm() {

                        return confirm("Really delete this reocrd?")

                    }

                </script>


            </ContentTemplate>
        </asp:UpdatePanel>

现在，在您的代码示例中，将所有内容都放在内容模板中，并删除客户端点击的 return false。 试一试。

现在，请谨慎对待上述内容。 页面生命周期会触发。 因此，页面加载事件将触发（就像它总是那样），然后您的代码存根将运行。 但是对于用户来说，您看不到完整的页面回发。 这通常称为“部分页面”回发。

不用说，要构建一个有效的 web forms 页面，99% 的时间，您的页面加载事件会设置控件的值并仅在第一个页面上加载？

您在页面加载事件中有 IsPost 后存根。 所以你真正的第一次页面加载代码只运行一次。

例如：

if (!IsPostBack) 
{
     // first time page load
     // load up grid, some combo boxes etc.
     // this code only runs ONE time, on first page load
}