ASP.Net - Javascript bên trong AJAX UpdatePanel

Question

Tôi đang gặp sự cố khi chạy javascript từ tệp javascript bên ngoài bên trong UpdatePanel. Tôi đang cố gắng để có được một bộ chọn màu làm việc bên trong một ListView. ListView nằm bên trong UpdatePanel.

Tôi đang sử dụng this color picker.

Dưới đây là những gì tôi đã thu hẹp nó xuống:

• Nếu tôi sử dụng bảng chọn màu sắc trên một hộp bên ngoài của một UpdatePanel, nó hoạt động hoàn toàn tốt đẹp qua tất cả postbacks.

• Nếu tôi sử dụng công cụ chọn màu trên hộp văn bản bên trong UpdatePanel, nó hoạt động, cho đến khi tôi thực hiện postback không đồng bộ (nhấp vào nút "EDIT" trong ListView). Khi UpdatePanel đã thực hiện đăng lại, hộp văn bản sẽ không còn hiển thị bảng chọn màu khi được nhấp. Điều tương tự cũng xảy ra khi hộp văn bản ở trong số InsertItemTemplate hoặc EditItemTemplate của Chế độ xem danh sách.

Nếu bạn muốn sao chép nó, bạn chỉ cần tải về chọn màu (nó hoàn toàn miễn phí), sau đó thêm video này vào trang web ...

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 

<div> 
    <asp:UpdatePanel ID="panel1" runat="server"> 
     <ContentTemplate> 
      <asp:TextBox runat="server" ID="textbox" CssClass="color" /> 
      <asp:Button ID="Button1" runat="server" Text="Button" /> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</div> 

Khi tải trang, các công trình chọn màu khỏe. Khi bạn nhấp vào nút (trong đó có một postback), bộ chọn màu sẽ không còn hoạt động nữa.

Bất kỳ ý tưởng nào?

Answer 1

Sau một vòng tròn không đồng bộ, mọi tập lệnh khởi động sẽ không được chạy, đó có thể là lý do tại sao nó không hoạt động sau khi gọi lại AJAX. Bộ chọn màu có thể có các chức năng cần được thực thi khi tải trang.

Tôi đã chạy vào quá nhiều lần đến nỗi tôi đã viết một phương pháp nhỏ để đăng ký các tập lệnh của mình trong đoạn mã phía sau, xử lý cả các chuyến đi vòng không đồng bộ và không đồng bộ. Dưới đây là những phác thảo cơ bản:

private void RegisterClientStartupScript(string scriptKey, string scriptText) 
{ 
    ScriptManager sManager = ScriptManager.GetCurrent(this.Page); 

    if (sManager != null && sManager.IsInAsyncPostBack) 
    { 
     //if a MS AJAX request, use the Scriptmanager class 
     ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), scriptKey, scriptText, true); 
    } 
    else 
    { 
     //if a standard postback, use the standard ClientScript method 
     scriptText = string.Concat("Sys.Application.add_load(function(){", scriptText, "});"); 
     this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), scriptKey, scriptText, true); 
    } 
} 

Tôi thực sự nướng trên thành một lớp trang cơ sở để cho bất kỳ trang Tôi đang làm việc với có thể gọi this.RegisterClientStartupScript(...). Để làm điều đó, chỉ cần tạo một lớp trang cơ sở và đưa nó vào đó (đảm bảo đánh dấu là không được bảo vệ riêng tư hoặc các lớp trang kế thừa của bạn sẽ không thể truy cập nó).

Với mã ở trên, tôi có thể tự tin đăng ký tập lệnh của khách hàng bất kể trang đang thực hiện đăng lại hay gọi lại. Nhận ra rằng bạn đang sử dụng các tệp kịch bản bên ngoài, bạn có thể sửa đổi phương thức trên để đăng ký các kịch bản lệnh bên ngoài thay vì nội tuyến. Tham khảo lớp ScriptManager để biết thêm chi tiết, vì có nhiều phương pháp đăng ký tập lệnh ...

Answer 2

Tôi đoán rằng mã jscolor.js chạy để thiết lập bộ chọn màu chỉ được gọi khi trang của bạn tải lần đầu tiên, vì vậy khi điều khiển được tạo lại trên máy chủ, bạn sẽ mất các thay đổi được thực hiện. Bạn có thể đăng ký một số javascript được gọi trong mã của bạn phía sau để nó sẽ gọi phương pháp init trên jscolor khi cuộc gọi asynch của bạn hoàn thành?

Answer 3

Bạn đã thử ScriptManager.RegisterStartupScript cho phép bạn "thêm JavaScript từ máy chủ vào trang khi thực hiện postback không đồng bộ"?

Answer 4

Sau khi xem mã nguồn jscolor, tôi nhận thấy rằng nó khởi tạo mọi thứ trên tải cửa sổ. Vì vậy, có thể bạn sẽ cần phải tái init với một cái gì đó như thế này (bên trong UpdatePanel):

function yourInit(){ 
    /* keep in mind that the jscolor.js file has no way to determine 
     that the script has already been initialized, and you may end 
     up initializing it twice, unless you remove jscolor.install(); 
    */ 

    if (typeof(jscolor) !== 'undefined'){ 
     jscolor.init(); 
    } 
} 
if (typeof(Sys) !== 'undefined'){ 
    Sys.UI.DomEvent.addHandler(window, "load", yourInit); 
} 
else{ 
    // no ASP.NET AJAX, use your favorite event 
    // attachment method here 
} 

Nếu bạn quyết định đưa kịch bản jscolor bên trong UpdatePanel, bạn cũng sẽ cần phải thêm một cái gì đó như thế này để các phần cuối của jscolor.js:

if(Sys && Sys.Application){ 
    Sys.Application.notifyScriptLoaded(); 
}