2016-03-28 20 views
6

Tôi muốn ẩn nút điều khiển bên trong máng FormView máng JQuery. Phần hình thức được định nghĩa theo cách này:Nút ẩn trong chế độ xem asp.net bằng cách sử dụng jquery

<body> 
<div id="main"> 
    <form id="_frmMain" runat="server"> 
     <div id="contenitore"> 
      <asp:FormView 
       ID="_fvMain" 
       runat="server" 
       DefaultMode="Edit" 
       Width="100%"> 
       <EditItemTemplate> 
        <asp:Table CssClass="sub" runat="server"> 
         <asp:TableRow CssClass="tr_button_list"> 
          <asp:TableCell ColumnSpan="3"> 
           <asp:Button 
            ID="_btnOk" 
            ClientIDMode="Static" 
            Text="Ok" 
            runat="server" 
            CssClass="butt_orange_small" 
            OnClientClick="javascript: return ShowSection('section1');" /> 
          <asp:Button 
            ID="_btnCancel" 
            ClientIDMode="Static" 
            Text="Cancel" 
            runat="server" 
            CssClass="butt_orange_small" 
            OnClientClick="javascript: return ShowSection('section2');" /> 

tôi sử dụng mã này:

$(function() { 
    var _btnOk = $("#_btnOk"); 

    _btnOk.hide(); 
}); 

nhưng nó không làm việc. Nếu tôi gỡ lỗi tập lệnh này, tôi đã tìm thấy thuộc tính hidden của đối tượng _btnOk để giữ nguyên ngay cả sau khi gọi .hide().

BTW Tôi không thể ẩn nút bằng cách sử dụng tham chiếu lớp vì nó cũng sẽ ẩn _btnCancel và tôi cần điều này để duy trì khả năng hiển thị.

+0

Tôi khá chắc chắn rằng vấn đề là phần tử kể từ nằm trong mẫu chỉnh sửa, nó không tồn tại khi trang đang được hiển thị hoặc được tài liệu nhận ra.ready, nếu bạn sử dụng 'function pageLoad (người gửi, args) {$ (function() { var _btnOk = $ ("#_ btnOk"); _btnOk.hide(); }); 'có thể sẽ hoạt động. – thepanch

+0

Một cách khác, thêm lớp "giả" vào phần tử 'CssClass =" butt_orange_small dummyclass "' và tìm kiếm nó, lớp giả không cần tồn tại, chúng tôi đang sử dụng nó để tìm kiếm, sau đó bạn có thể tìm kiếm nó bằng lớp đó sẽ là duy nhất. – thepanch

+0

chỉ để thêm thông tin, "id" bạn đặt trong FormView sẽ không phải là ID cuối cùng cho toàn bộ trang, hãy nhớ rằng vì "_btnOK" được lồng trong FormView (điều này cũng sẽ xảy ra với bất kỳ kiểm soát có thể ràng buộc nào), nó sẽ được lấy tên cha mẹ của mình cộng với một "_" để ID cuối cùng sẽ là "_frmMain__btnOk" hoặc một cái gì đó như thế này, vì vậy cách tiếp cận '$ ('# <% = btnOk.ClientID%>'). hide()' là cách đi. – thepanch

Trả lời

1

đang JQuery của bạn là tốt. có lẽ nó là một vấn đề như sau:

Begin Sửa

Bạn có chắc chắn rằng id được giải quyết để các thẻ html có đúng không? Bạn nên sử dụng các công cụ gỡ lỗi trong trình duyệt để điều hướng đến nút và kiểm tra id. Có thể bạn đang giải quyết một yếu tố khác trên biểu mẫu có cùng tên, đó là lý do tại sao bạn không thấy thay đổi. Xem Select an element trong Chrome (ctrl+shift+C).

Cũng như tôi đã đề cập và mọi người khác đã sử dụng quá <%= _btnOk.ClientID %> là cách tốt nhất để chọn id phần tử của điều khiển ASP.NET. Tuy nhiên, điều này sẽ chỉ giải quyết trên biểu mẫu .ascx hoặc .aspx. Điều này có nghĩa là nó sẽ thất bại nếu bạn đang sử dụng tệp javascript như MyExternalScript.js mà bạn tham chiếu trong trang/điều khiển. Điều này là do khi kiểm soát/trang được renederd bởi công cụ ASP.NET nó sẽ thay thế các chuỗi <%= _btnOk.ClientID %> với id khách hàng được tạo chính xác. Nó sẽ không làm điều này cho các tệp bên ngoài như tệp javascript có nghĩa là <%= _btnOk.ClientID %> sẽ vẫn ở trong tệp đó và JavaScript sẽ ném một ngoại lệ chính xác vì nó không biết phải làm gì với chuỗi đó.

cách xung quanh này:

  1. Resolve Id bạn muốn trên trang riêng của mình trong một phần tử <script> và gán nó vào một biến toàn cầu. Sau đó tải tệp javascript tùy chỉnh của bạn ngay sau đó có thể tham chiếu đến id ứng dụng khách đã được giải quyết ngay bây giờ.
  2. Sử dụng lớp css làm con trỏ tới điều khiển. Không cần phải đánh dấu css thực tế cho lớp đó, chỉ cần thêm nó vào kiểm soát và tham chiếu nó từ javascript (jquery).
  3. Nếu sử dụng AJAX thì sử dụng điều khiển nút HTML thuần túy và cũng bỏ qua thẻ runat="server", điều này sẽ đảm bảo rằng ASP.NET sẽ hiển thị điều khiển như không thay đổi id ứng dụng khách.

End Sửa


  • Bạn đang thiết lập các nút để ẩn một cách chính xác nhưng điều này là một phần của một bài mẫu hoạt động trở lại máy chủ. ASP.NET phía máy chủ mã không theo dõi trạng thái nút với một hình thức đăng vì vậy khi các hình thức được tải lại từ máy chủ nhà nước thực sự là thiết lập lại bao gồm cả trạng thái của nút. Điều này làm cho nó xuất hiện như thể hành động JQuery không có tác dụng trên nút.
  • Có nhiều hơn một tập lệnh thực thi HOẶC tập lệnh của bạn được thực thi 2 lần. Điều này có thể xảy ra nếu bạn có nhiều sự kiện được thiết lập để kích hoạt.
  • Bạn không tải JQuery trước khi bạn cố gắng ẩn nút. Hãy chắc chắn rằng bạn có một tham chiếu script tới JQuery và nó được nạp trước script của bạn, điều này đơn giản như việc đảm bảo thứ tự trên trang là đúng, JQuery nên ở trên cùng và sau đó các kịch bản dựa vào nó.
  • Đảm bảo rằng bộ chọn JQuery thực sự giải quyết. Tôi đã cung cấp 2 cách để giải quyết bộ chọn JQuery của bạn trong mẫu bên dưới.
  • Đảm bảo tập lệnh của bạn thực sự đang chạy bằng cách gỡ lỗi nó trong trình duyệt của bạn. Với Chrome, bạn sử dụng F12 để mở bảng điều khiển phát triển, tìm kịch bản của bạn và đặt điểm dừng. Hoặc bạn cũng có thể thêm debugger; trên một dòng mới vào tập lệnh của bạn sẽ ngừng xử lý tại thời điểm đó trong tập lệnh của bạn nếu bạn có bảng điều khiển phát triển mở và bạn có thể bắt đầu từ thời điểm đó.
  • Khả năng cuối cùng là bạn đang cố gắng chạy tập lệnh khi trang của bạn được tải nhưng tập lệnh ở đầu trang của bạn mà không có sẵn trình bao bọc xung quanh tài liệu. Điều này có nghĩa là bạn cố gắng giải quyết một nút chưa được tải trong html của bạn. Để khắc phục điều này, hãy tập lệnh của bạn với $(document).ready(function(){/*your code*/}); để đảm bảo tập lệnh của bạn đợi trang tải xong trước khi thực thi.
  • Phiên bản JQuery - đảm bảo bạn đang sử dụng phiên bản mới nhất, tôi cho rằng chức năng này đã được thêm vào trong phiên bản 1.4.
  • Thay thế để hiển thị/ẩn - bạn cũng có thể sử dụng _btnOk.toggle(false);_btnOk.toggle(true); để ẩn và hiển thị nút tương ứng. Hoặc chỉ cần btnOk.toggle(); để chuyển nút thành ẩn hoặc hiển thị tùy thuộc vào trạng thái hiện tại.

Đây là ví dụ hoạt động khép kín để cho thấy chính cuộc gọi JQuery là chính xác. Nút thứ hai ẩn hoặc hiển thị nút đầu tiên tùy thuộc vào trạng thái nút đầu tiên.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspFormTest.Default" %> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <asp:Button 
     ID="_btnOk" 
     ClientIDMode="Static" 
     Text="Ok" 
     runat="server"/> 
    </div> 
     <button type="button" onclick="hideShowButton();">Hide or Show ok button</button> 
     <button type="button" onclick="hideShowButtonToggle();">Toggle button</button> 
    </form> 
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
     function hideShowButton() { 
      var aspNetWayOfResolvingId = $("#<%= _btnOk.ClientID %>"); // use this if clientidmode is not static 
      var _btnOk = $("#_btnOk"); 
      if(_btnOk.is(":visible")) 
       _btnOk.hide(); 
      else 
       _btnOk.show(); 
     } 
     function hideShowButtonToggle() { 
      var aspNetWayOfResolvingId = $("#<%= _btnOk.ClientID %>"); // use this if clientidmode is not static 
      var _btnOk = $("#_btnOk"); 
      _btnOk.toggle(); 
     } 
    </script> 
</body> 
</html> 
+1

Câu trả lời đúng và giải thích nhất. Rất cảm ơn vì sự giúp đỡ của bạn. – weirdgyn

1

Hãy thử để có được nút của bạn như thế này:

var _btnOk = $("#<%= _btnOk.ClientID %>"); 
+0

điều này chỉ cần ném một ngoại lệ (biểu thức không được công nhận). Có lẽ bạn đã bỏ lỡ nó nhưng vấn đề trong mã của tôi nó không phải là để có được một tham chiếu đến đối tượng '_btnOk' nhưng chỉ để ẩn nó. – weirdgyn

+0

Bạn đã thử kiểm tra trang của mình bằng firebug chưa và xem ID nút thực là gì? –

+0

id là chính xác Tôi có thể gỡ lỗi mã một cách rõ ràng thấy rằng đối tượng nút được tìm thấy chính xác nhưng phương thức '.hide()' không hoạt động. – weirdgyn

1
$(function() { 
     $('#contenitore input[type="button"][value="Ok"]').hide(); 
}); 
1

Trong Asp.net bạn cần phải gọi các nút sử dụng theo cách sau

$("#<%= _btnOk.ClientID %>"); 

Bạn có thể sử dụng bởi lớp CSS cũng có.

Tạo một lớp Dummy CSS

<style> 
.test{ 
} 
</style> 

Gán lớp .test này đến _btnOk vì vậy bạn có thể ẩn chỉ nút đó không phải là _btnCancel

$(".test").hide(); 
1

tôi thấy hai điều kiện có thể gây ra các hide chức năng không thành công:

  1. Một phụ huynh của các nút đã được ẩn khi chức năng của bạn được gọi là (Why doesn't jQuery UI hide element with hidden parent?)

  2. butt_orange_small lớp phong cách của bạn có một tài sản với các !important cờ display. Một giải pháp là xóa cờ !important. Nếu vì lý do nào đó, bạn phải giữ nó trong phong cách đẳng cấp, bạn có thể làm điều này để ẩn nút:

    $("#_btnOk").attr('style','display:none !important');

1

Bạn cần phải gọi hàm của bạn sau khi tải jquery. Bạn có thể làm điều đó đặt "()" sau hàm của bạn.

Đây là một ví dụ:

$(function() { 
    var _btnOk = $("#_btnOk"); 

    _btnOk.hide(); 
})(); 
1

tôi tin rằng phương pháp này sẽ có hiệu quả:

$(document).ready(function(){ 
    $("button[id*='_btnOk']").hide(); 
}); 
4

Vấn đề của bạn là asp rằng: FormView tạo iframe.

Vì vậy, jquery không thể tìm thấy nút của bạn, vì nó không nằm trong khung chính.

Như đã nói trong this hướng dẫn, để truy cập phần tử trong một iframe với jquery bạn phải làm một cái gì đó như thế này:

$("#_fvMain").contents().find("#_btnOk").hide(); 

tham khảo: this câu trả lời.

Các vấn đề liên quan