【问题标题】:c# how to enable button ontextchange without posting backc#如何在不回发的情况下启用按钮ontextchange
【发布时间】:2011-03-22 18:12:31
【问题描述】:

所以我有一个灯箱,其中弹出一个带有文本框和两个按钮(提交 - 禁用和取消 - 启用)的 aspx 页面。我想启用我的提交按钮 ontextchange。它在单独打开时工作正常(不是作为灯箱)但是当我让它在每次触发 ontextchange 时使用灯箱功能正常运行时,整个页面都会刷新禁用灯箱。

<asp:TextBox ID="textBox1" runat="server" OnTextChanged="OnTextChanged_AttributesEdited" autopostback="true">


protected void OnTextChanged_AttributesEdited(object sender, EventArgs e)
{
    btnSubmit.Enabled = true;

}

现在,如果我取出“autopostback=true”,它将不会触发 ontextchanged。想知道如果 javascript 将成为启用按钮的方法是否更好,或者有什么方法可以在触发 ontextchanged 时阻止回发?

非常感谢!

【问题讨论】:

    标签: c# javascript asp.net button lightbox


    【解决方案1】:

    我认为这将是您应用程序中某些 jQuery 的主要用途。无需发回服务器以启用/禁用按钮,这看起来会更流畅,加载更快并保持当前页面状态不变。一个例子可能如下:

    <script type="text/javascript">
    $(document).ready(function() {    
        $("#textBox1").change(function() {
            $("#btnSubmit").removeAttr("disabled");
        });
    });
    </script>
    

    只需将上面的脚本标签放在你的 HTML 中,就在关闭 body 标签之前。

    然而,一个更好的解决方案是为所有应该继承该行为的文本框分配一个特定的 CSS 类。假设您为所有这些文本框分配了一个名为“someCssClass”的 CSS 类,那么您的脚本将如下所示:

    <script type="text/javascript">
    $(document).ready(function() {    
        $("input.someCssClass").change(function() {
            $("#btnSubmit").removeAttr("disabled");
        });
    });
    </script>
    

    【讨论】:

    • 嘿,谢谢,我可能需要先通读一遍,因为我不知道如何实现 jquery。
    • 这很容易。只需包含对 jQuery 库的 javascript 引用(也由 Google 托管,但您可以下载并托管在您自己的域中),然后在我的示例中包含脚本标记...
    • 请注意,要使 #textBox1 与 ASP.NET 控件一起使用,您需要将 ClientIDMode 设置为 Static(尽管仅限 ASP.NET 4.0)。或者,您可以在脚本块中使用以下内容:$("#&lt;%= textBox1.ClientID%&gt;"),因为这将输出发送到脚本将查找的浏览器的实际 ID。
    • 如果他不使用母版页或控件未放置在 Web 用户控件中,则不会有问题。如果它是页面上唯一具有该特定 ID 的控件,则客户端 ID 应与服务器 ID 匹配。无论如何,一个更好的解决方案是做一个基于类的选择器,并将相同的 CSS 类分配给所有应该继承该行为的文本框。
    • 等一下。所以如果我使用母版页会有问题吗?我的意思是,目前这个页面将只是普通的 aspx,因为它将使用母版页从 aspx 调用。
    【解决方案2】:

    我会使用@FarligOpptrenden 提到的 jQuery,但如果你没有它并且只想要普通的 javascript,这应该可以。

    在您的灯箱中输入:

    <input type="text" id="textbox" onKeyUp="enableSubmitButton()" />
    <input type="button" id="submitButton" value="Submit" />
    <input type="button" id="cancelButton" value="Cancel" />
    

    Javascript:

    <script type="text/javascript">
    
    function enableSubmitButton()
    {
    document.getElementById('submitButton').disabled = false;
    document.getElementById('cancelButton').disabled = true;
    }
    
    </script>
    

    您也可以在 javascript 中加载启用/禁用按钮:

    <script type="text/javascript">
    
    window.onload = function () {
    
    document.getElementById('submitButton').disabled = true;
    document.getElementById('cancelButton').disabled = false;
    
    }
    </script>
    

    【讨论】:

      猜你喜欢
      • 2019-05-19
      • 1970-01-01
      • 2021-11-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-21
      • 1970-01-01
      相关资源
      最近更新 更多