jQuery Dialog 'Đóng' mâu thuẫn với ASP.NET UpdatePanel

Question

Tôi đã có một ASP.NET UpdatePanel với những điều sau:

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
    <%-- jQuery dialog - Suppliers --%> 
    <div id="divSuppliers" style="display: none;"> 
     <asp:ListBox ID="lstSuppliers" runat="server" SelectionMode="Single" Rows="10" Width="100%" 
      DataValueField="SupplierID" DataTextField="SupplierName"> 
     </asp:ListBox> 
     <br /><br /> 
     <asp:Button ID="btnSelectSupplier" runat="server" Text="Select 2" OnClick="btnSelectSupplier_Click" /> 
    </div> 

    <asp:GridView ID="gvSuppliers" runat="server" AutoGenerateColumns="false" SkinID="gvSkin" 
     DataKeyNames="SupplierID" EmptyDataText="No Existing User Roles"> 
     <Columns> 
      <asp:TemplateField HeaderText="Supplier Name"> 
       <ItemTemplate> 
        <asp:Label ID="lblSupplierName" runat="server" Text='<%# Eval("SupplierName") %>'></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 

    <asp:Button ID="btnAddSupplier" runat="server" Text="Add Supplier" 
     Visible="false" OnClick="btnAddSupplier_Click" /> 

</ContentTemplate> 
<Triggers> 
    <asp:AsyncPostBackTrigger ControlID="btnSelectSupplier" /> 
</Triggers> 
</asp:UpdatePanel> 

Khá đơn giản, thực sự. Không có gì nhiều hơn một div mà tôi sử dụng cho jQuery Dialog popup của tôi, một ASP.NET GridView kiểm soát với một cột duy nhất, và một nút ASP.NET cho postbacks không đồng bộ.

Đây là sự kiện nhấp chuột xử lý postback không đồng bộ cho btnSelectSupplier.

protected void btnSelectSupplier_Click(object sender, EventArgs e) { 

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+=  
    // WORKS JUST FINE 
    List<SupplierItem> suppliers = new List<SupplierItem>();  

    foreach (int i in lstSuppliers.GetSelectedIndices()) { 
     suppliers.Add(
      new SupplierItem { SupplierID = Convert.ToInt32(lstSuppliers.Items[i].Value), SupplierName = lstSuppliers.Items[i].Text }); 
     lstSuppliers.Items[i].Selected = false; 
    } 

    gvSuppliers.DataSource = suppliers; 
    gvSuppliers.DataBind(); 

    // +=+=+=+=+=+=+=+=+=+=+=+=+=+= 
    // DOES NOT WORK!! 
    string jq = "$('#divSuppliers').dialog('close');"; 

    ScriptManager sm = ScriptManager.GetCurrent(this); 
    if (sm != null && sm.IsInAsyncPostBack) { 
     ScriptManager.RegisterClientScriptBlock(
      this, typeof(Page), Guid.NewGuid().ToString(), 
      jq, true); 
    } 
} 

VẤN ĐỀ: Các GridView sẽ cập nhật tốt trong postback không đồng bộ (xem sự kiện click trên); tuy nhiên, Hộp thoại jQuery từ chối đóng lại (một lần nữa, xem sự kiện ở trên và nơi nó nói KHÔNG LÀM VIỆC). Tôi đang đăng ký javascript (jquery) với ScriptManager trên trang và vì vậy nó sẽ được thực hiện và đóng hộp thoại, nhưng vì một lý do nào đó nó không.

EDIT: Mã mở hộp thoại jQuery và thực hiện phương thức.

protected void btnAddSupplier_Click(object sender, EventArgs e) { 
    lstSuppliers.ClearSelection(); 
    lstSuppliers.DataSource = Suppliers.GetAllSuppliers(); 
    lstSuppliers.DataBind(); 

    string jq = "var dlg = $('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); dlg.parent().appendTo($('form:first'));"; 

    ScriptManager sm = ScriptManager.GetCurrent(this); 
    if (sm != null && sm.IsInAsyncPostBack) { 
     ScriptManager.RegisterClientScriptBlock(
      this, typeof(Page), Guid.NewGuid().ToString(), 
      jq, true); 
    } 
} 

Answer 1

Div được sử dụng cho Hộp thoại giao diện người dùng jQuery phải nằm ngoài UpdatePanel.

Trên btnAddSupplier_Click bạn tạo hộp thoại và di chuyển nó ra ngoài UpdatePanel.
Sau btnSelectSupplier_Click bạn có 2 div có id divSuppliers, số di chuyển và số received from server (Cơ chế UpdatePanel cho phép cập nhật một phần bằng cách tạo lại toàn bộ UpdatePanel DOM với html được trả về từ máy chủ).

Tôi cũng khuyên bạn nên sử dụng console.log để trợ giúp gỡ lỗi.
Thêm để đóng hộp thoại js: console.log($('#divSuppliers'))

Answer 2

Bạn đã cân nhắc đi một tuyến đường đơn giản hơn và ràng buộc sự kiện với phía máy khách nút để đóng hộp thoại phải không?

$(function() { 
    $('#btnSelectSupplier').click(function() { 

     $('#divSuppliers').dialog('close'); 
    }); 
}); 

Luồng vẫn không thay đổi so với góc nhìn của người dùng. Họ nhấp vào nút và hộp thoại đóng. Mã phía máy chủ sẽ chạy sau khi hộp thoại đóng nhưng vì dường như không có bất kỳ logic phía máy chủ nào quyết định xem bạn có muốn đóng hộp thoại hay không sau khi nhấp chuột, điều này có thể phù hợp với nhu cầu của bạn.

EDIT Tôi thấy sự cố của bạn. Bạn đang gặp sự cố vì thay vì mở hộp thoại hiện tại của mình, bạn đang xác định lại hộp thoại khi nhấp vào:

string jq = "var dlg = $('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); dlg.parent().appendTo($('form:first'));"; 

Thay vào đó, bạn muốn xác định hộp thoại trong hàm document.ready.

$(function() { 
    //define the div as a dialog. By default, it will not open until you tell it to 
$('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); 

}); 

Trên nhấp chuột, bạn nên mở nó như thế này

$('#divSuppliers').dialog('open'); 

Một lần nữa bạn có thể muốn làm phía khách hàng này thay vì cố gắng để đẩy kịch bản vào trang trên các sự kiện phía máy chủ nhưng Điều đó tùy thuộc vào bạn.

giải pháp đầy đủ đơn giản nhất:

$(function() { 

$('#divSuppliers').dialog({ modal: true, draggable: true, title: 'Suppliers', width: 500 }); 

$('#btnAddSupplier').click(function() { 

    $('#divSuppliers').dialog('close'); 
}); 
$('#btnSelectSupplier').click(function() { 

    $('#divSuppliers').dialog('open'); 
}); 
}); 

Answer 3

Vì vậy, đây là giải pháp: không nên cố gắng để kết hợp bằng cách sử dụng ASP.NET UpdatePanel với jQuery Dialog, bởi vì họ chỉ không chơi độc đáo với nhau.

Tôi chỉ đi theo hướng này bởi vì tôi nghĩ rằng sẽ mất ít thời gian hơn cho AJAX bằng cách sử dụng ScriptManager và UpdatePanel của .NET thay vì làm tất cả trong jQuery. Tại thời điểm này nó xuất hiện tôi đã sai, bởi vì tôi sẽ trở lại và tách ra các rác NET và thay thế tất cả với jQuery. Vì vậy, tất cả thời gian mà tôi nghĩ rằng tôi muốn tiết kiệm đã biến mất như gió.

Đạo đức của câu chuyện: không kết hợp cả hai nếu bạn không phải làm như vậy.