使用 javascript 的 Asp.net 按钮可见性答案

【问题标题】：Asp.net button visibility using javascript使用 javascript 的 Asp.net 按钮可见性
【发布时间】：2011-11-03 16:05:15
【问题描述】：

我正在使用一个简单的 Asp.Net 按钮并试图在页面加载事件中隐藏它，我想在执行一些客户端脚本后将其显示回来。

我已经通过这种方式尝试过document.getElementById('<%=Button1.ClientID %>').style.visibility = "visible";，但它没有显示给我。

那么我该如何重新启用它呢？

Page_Load：

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 Button1.Visible = False
End Sub

这是我的脚本：

<script type="text/javascript">
    // Convert divs to queue widgets when the DOM is ready
    $(function () {
        $("#uploader").plupload({
            // General settings
            runtimes: 'gears,flash,silverlight,browserplus,html5',
            url: 'Final.aspx',
            max_file_size: '10mb',
            max_file_count: 25,
            chunk_size: '1mb',
            unique_names: true,

        // Resize images on clientside if we can
        //                    resize: { width: 320, height: 240, quality: 90 },

        // Specify what files to browse for
        filters: [
        { title: "Image files", extensions: "jpg,gif,png" },
        { title: "Zip files", extensions: "zip" }
    ],

        // Flash settings
        flash_swf_url: 'js/plupload.flash.swf',

        // Silverlight settings
        silverlight_xap_url: 'js/plupload.silverlight.xap'
    });


    // Client side form validation
    $('form').submit(function (e) {
        var uploader = $('#uploader').plupload('getUploader');

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function () {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });

            uploader.start();
        }
        else
            alert('You must at least upload one file.');

        return false;
    });
    var uploader = $('#uploader').plupload('getUploader');
    uploader.bind('FileUploaded', function (up, file, res) {
        $('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
        $('#Maintabs').tabs('enable', 1);
        document.getElementById('<%=Button1.ClientID %>').style.visibility = "visible"; 
    });


});

【问题讨论】：

标签： javascript asp.net button

【解决方案1】：

如果您将控件的Visible 属性设置为false（在服务器端），则该控件将不会呈现给客户端，因此不会有任何内容可以更改其样式。

如果您想在服务器上隐藏它但仍将其呈现给客户端，请设置 visibility CSS 属性（通过 Style 属性），或为元素分配一个将隐藏它的 CSS 类（通过CssClass 属性）。

【讨论】：

感谢您以正确的方式指出我，您已经解决了我的问题！

【解决方案2】：

感谢您的所有建议，我已将其可见性设置如下

<script type="text/javascript">
$(function () {
document.getElementById('<%=Button1.ClientID %>').style.visibility = "hidden";
}); 
<script>

【讨论】：

感谢 Eric，我忘记了这一点并为此而苦苦挣扎！

【解决方案3】：

为什么不能使用 display 属性呢？

document.getElementById('<%=Button1.ClientID %>').style.display= '';
document.getElementById('<%=Button1.ClientID %>').style.display= 'none';

这样，您不会触及服务器属性，而是客户端属性。您可能需要稍微调整一下上面的代码。

【讨论】：

【解决方案4】：

如果元素总是在页面加载时隐藏，那么我只需设置一个默认的类或样式来设置display: none;，然后使用 javascript 进行切换

所以在 HTML 中为你按钮

<asp:button runate="server" id="Button1" CssClass="displayNone"></asp:button>

<script>
  $("#Button1").removeClass(displayNone");
</script>

<style>
  .displayNone { display: none; }
</style>

【讨论】：