Làm cách nào để bạn đặt thuộc tính "Hiển thị" của điều khiển ASP.NET từ một hàm Javascript?

Question

Về cơ bản tôi muốn biết cách tốt nhất để ẩn/hiển thị điều khiển ASP.NET từ một hàm Javascript. Tôi đã tìm thấy tôi sẽ chỉ truy cập vào điều khiển trong Javascript bằng cách sử dụng:

var theControl = document.getElementById("txtEditBox"); 

Sau đó, chỉ cần đặt thuộc tính Có thể nhìn thấy của điều khiển thành true/false. Nó không có vẻ là làm việc, tôi dường như không thể tìm ra cách để thiết lập "Visible" thành true/false. Làm thế nào tôi có thể làm điều đó? Ngoài ra, đó là cách tốt nhất để ẩn/hiện một điều khiển ASP.NET từ một hàm Javascript?

Cảm ơn, Jeff

Answer 1

Các "Visible" tài sản của một điều khiển ASP.NET xác định có hay không nó sẽ được trả lại trên máy khách (ví dụ gửi cho khách hàng). Nếu nó là sai khi trang được hiển thị, nó sẽ không bao giờ đến khách hàng.

Vì vậy, về mặt kỹ thuật, bạn không thể đặt thuộc tính của điều khiển đó.

Điều đó nói rằng, nếu kiểm soát được render trên máy khách vì thuộc tính Visible là đúng khi trang được trả lại, bạn có thể sau đó giấu nó bằng javascript như thế này:

var theControl = document.getElementById("txtEditBox"); 
theControl.style.display = "none"; 

// to show it again: 
theControl.style.display = ""; 

Đó là giả định rằng thuộc tính id của control thực sự là "txtEditBox" trên máy khách và nó đã được nhìn thấy.

Ngoài ra, đó là cách tốt nhất để ẩn/hiện điều khiển ASP.NET khỏi hàm Javascript?

Không nhất thiết phải là một cách "tốt nhất", mặc dù một tốt hơn phương pháp là sử dụng các định nghĩa lớp CSS:

.invisible { display: none; } 

Khi bạn muốn ẩn một cái gì đó, tự động áp dụng lớp đó để các phần tử; khi bạn muốn hiển thị lại, hãy xóa nó. Lưu ý, tôi tin rằng điều này sẽ chỉ hoạt động đối với các phần tử có giá trị display bắt đầu là block.

Answer 2

thay vì sử dụng có thể nhìn thấy, thiết css của nó để display: none

//css: 
.invisible { display:none; } 

//C# 
txtEditBox.CssClass = 'invisible'; 
txtEditBox.CssClass = ''; // visible again 

//javascript 
document.getElementById('txtEditBox').className = 'invisible' 
document.getElementById('txtEditBox').className = '' 

Answer 3

này nên giấu sự kiểm soát:

theControl.style.display = 'none'; 

Answer 4

Đặt phong cách để "display: none".

var theControl = document.getElementById("<%= txtEditBox.ClientID %>"); 
theControl.style.display = "none"; 

Answer 5

Bạn có thể sử dụng thuộc tính hiển thị cho mục này. Nhưng như Jason đã lưu ý, đây là thuộc tính DHTML DOM (phía máy khách) hoàn toàn độc lập với thuộc tính có thể nhìn thấy của ASP.NET (phía máy chủ) có thể điều khiển hiển thị.

theControl.style.display = "none"; 

Display Property

Answer 6

Bạn muốn thiết lập thuộc tính phong cách hiển thị để 'none' (ẩn) hoặc null để hiển thị.

var theControl = document.getElementById("txtEditBox"); 

    theControl.style.display = 'none'; 

    theControl.style.display = null; 

Làm điều đó một cách jQuery:

$('#txtEditBox').hide(); 

    $('#txtEditBox').show(); 

Answer 7

Bạn không thể ẩn/hiển thị các phiên bản ASP.NET của sự kiểm soát như rằng chỉ tồn tại trong một bối cảnh máy chủ. Để sử dụng JavaScript, bạn cần phải chơi với trạng thái điều khiển/trạng thái hiển thị.

duy nhất loại-cách để làm điều đó sẽ được quấn kiểm soát trong một UpdatePanel và có một cái gì đó như thế này:

<asp:UpdatePanel ID="panel" runat="server"> 
    <ContentTemplate> 
    <asp:TextBox ID="myTextBox" runat="server" /> 
    </ContentTemplate> 
    <Triggers> 
    <asp:AsynchronousPostbackTrigger ControlID="button" EventName="Click" /> 
    </Triggers> 
</asp:UpdatePanel> 
<asp:Button ID="button" runat="server" OnClick="toggle" Text="Click!" /> 

Sau đó, bạn cần điều này trong mã của bạn đằng sau:

protected void toggle(object sender, EventArgs e){ 
    myTextBox.Visibility = !myTextBox.Visibility; 
} 

Bây giờ, khi bạn bấm vào nút một postback async xảy ra và nó sẽ làm mới UpdatePanel.

Lưu ý: Đây không phải là một giải pháp tốt , vì nó sẽ là một yêu cầu AJAX rất nặng nề, bởi vì bạn cần phải nộp ViewState.

Ngoài ra, nó có thể không đúng 100%, tôi đã làm điều đó từ bộ nhớ.

Answer 8

Hoặc nếu bạn không muốn sử dụng css:

<asp:TextBox ID="txtBox" runat="server" style="display:none;">