2009-02-16 36 views
12

Tôi cần phải tắt các tab JQuery theo cách lập trình. Các tab nằm bên trong một bảng cập nhật (Ajax) và bảng cập nhật nằm trong một trang ASP.NET. Code:Gọi hàm JQuery từ mã phía sau (sang một bên) ASP.Net và C#

<link type="text/css" rel="stylesheet" href="http://ui.jquery.com/testing/themes/base/ui.all.css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.core.js"></script> 

<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.tabs.js"></script> 

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $("#example").tabs(); 
    }); 


    function hidetabs(){ 
     $(document).ready(function(){ 
     $("#example").tabs(); 
     $('#example').data('disabled.tabs', [1, 2]);}); 
    } 
</script> 


<%@ Page Language="C#" MasterPageFile="~/any.Master" AutoEventWireup="true" Codebehind="anycode.aspx.cs" 
    Inherits="anycode" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 

<asp:UpdatePanel ID="UpdatePanel_Deal_Import" runat="server"> 
<ContentTemplate> 
<div id="example"> 
<ul> 
<li><a href="#fragment-1"><span>One</span></a></li> 
<li><a href="#fragment-2"><span>Two</span></a></li> 
<li><a href="#fragment-3"><span>Three</span></a></li> 
</ul> 
<div id="fragment-1"> 
<p> 
First tab is active by default:</p> 
<pre><code>$('#example').tabs();</code></pre> 

<asp:Button ID="btn_Save" OnClick="btn_Save_Click" runat="server" Text="Save" Visible="False" CommandName="Save"> 
</div> 

<div id="fragment-2"> 
Lorem ipsum dolor sit amet, consectetuer 
ut laoreet dolore magna aliquam erat volutpat. 
</div> 
<div id="fragment-3"> 
Lorem ipsum dolor sit amet, consectetuer 
aliquam erat volutpat. 
</div> 
</div> 

     </ContentTemplate> 
</asp:UpdatePanel> 
</asp:Content> 


Code behind: 

protected void btn_Save_Click(object sender, EventArgs e) 
{ 
//here I need to diable the panels. 

} 

Chức năng btn_Save_Click không gửi trang vì vậy nó không gọi Javascript hidetabs/jquery chức năng. Cảm ơn vì bất kì sự giúp đỡ!!!

Trả lời

5

Có vẻ như bạn cần nút có hành động phía máy khách thay vì thao tác đăng lại.

<asp:Button ID="Clickable" runat="server" text="Click me" OnClientClick="JavascriptCall();" /> 

Ngoài ra, trong khi jQuery thường tương thích ngược, không nên tham khảo trực tiếp tệp .js mới nhất của jQuery. Thay vào đó tôi sẽ tải xuống một phiên bản của nó mà bạn muốn, và đặt nó tĩnh trên trang web của bạn để tham khảo trực tiếp một phiên bản đã biết. Không nên thêm phụ thuộc vào trạng thái hoặc tính khả dụng của tài nguyên trên trang web bên ngoài khi không cần thiết.

+1

@ballance tôi sẽ tách tuyên bố cuối cùng làm đôi, đồng ý với phần đầu tiên chứ không phải thứ hai - không tốt để thêm tham chiếu đến nguồn bên ngoài sẽ luôn thay đổi, nhưng có thể tăng đáng kể tốc độ tải lên thuê ngoài lưu trữ các tập lệnh tĩnh như vậy –

+1

@rexm Trên quy mô nhỏ, bạn chính xác rằng nó sẽ tăng hiệu suất, nhưng nó vẫn sẽ tốt hơn để tham khảo một phiên bản tĩnh của tài nguyên, ngay cả khi trang web của jQuery lưu trữ nó. Đối với các dự án lớn hơn, tôi sẽ nói chỉ cần thêm một tên máy chủ riêng biệt cho các tài nguyên tĩnh của bạn. (qua @rexm Ăn trưa 'n Tìm hiểu) –

1

Cảm ơn Chris,

Trên thực tế có, một phần của giải pháp là để gọi trực tiếp các chức năng javascript, nhưng thay vì sử dụng một điều khiển client-side tôi gọi Javascript lần yêu cầu UpdatePanel của tôi đã qua như được giải thích trong blog sau đây:

http://blog.jeromeparadis.com/archive/2007/03/01/1501.aspx

Bây giờ mã của tôi trông giống như:

<link type="text/css" rel="stylesheet" href="css/ui.all.css" /> 

    <script type="text/javascript" src="jquery-latest.js"></script> 

    <script type="text/javascript" src="ui.core.js"></script> 

    <script type="text/javascript" src="ui.tabs.js"></script> 

    <script type="text/javascript"> 

    //enable tabs if a deal is selcted or saved. 
    function EndRequestHandler(sender, args) { 
     var rec_id = document.getElementById('<%=hidden_value.UniqueID %>').value; 

     if (rec_id=="") 
      hidetabs(); 
     else 
      showtabs(); 
    } 

    hidetabs(); 

    $(document).ready(function(){ 
     $("#rec_entry").tabs(); 
    }); 

    function hidetabs(){ 
     $(document).ready(function(){ 
     $("#rec_entry").tabs(); 
     $('#rec_entry').data('disabled.tabs', [1, 2, 3, 4, 5]);}); 
    } 

    function showtabs(){ 
     $(document).ready(function(){ 
     $("#rec_entry").tabs(); 
     $('#rec_entry').data('disabled.tabs', []);}); 
    } 

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

    </script> 

    ...html code add the tabs... 

mã số phía sau :

bảo vệ (người gửi đối tượng, EventArgs e) void btn_Save_Click {

 .... code to save the new record ........ 

     UpdatePanel_mypanel.Update(); 
    } 

sau bảng điều khiển được cập nhật các EndRequestHandler evalues ​​một lá cờ (trong trường hợp này một HiddenField) và gọi hàm javascript cho phép hoặc vô hiệu hóa các tab.

Các endrequesthandler được điều khiển nhờ vào câu này trong javascript của tôi:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

tôi theo lời khuyên của bạn bao gồm cả các tập tin javascript vào dự án của tôi. Cảm ơn một lần nữa!

Ixtlan

17

Tôi đã sử dụng sau đây chiều và cho tôi làm việc 100% đúng:

là người đầu tiên tôi tạo một hàm và viết hàm jquery của tôi vào chức năng trong trang của tôi:

<script> 
    function myFunction(params) { 
     $.my_jquery(params...) 
     ...... 
    } 
</script> 

sau đó tôi sử dụng mã này trong xử lý sự kiện tầm kiểm soát của tôi (ví dụ bấm vào một nút), người kiểm soát của tôi là bên trong một bảng cập nhật:

protected void myButton(object sender, EventArgs e) 
{ 
    ..... 
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>myFunction(params...);</script>", false); 
} 

thành công

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