jQueryのダイアログの '閉じる' 紛争

Question

私は次のようにASP.NETのUpdatePanelを持っている：

<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> 

かなりシンプルな、本当に。 jQueryダイアログポップアップに使用するdiv、ASP.NETのGridViewコントロール（単一の列）、非同期ポストバック用のASP.NETボタン以外は何もありません。

ここには、btnSelectSupplierの非同期ポストバックを処理するclickイベントがあります。

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); 
    } 
} 

問題： GridViewのは、（上記のクリックイベントを参照）非同期ポストバック中にちゃんと更新します。しかし、jQuery Dialogは閉じることを拒否しています（上記のイベントを参照してください）。私はページ上のScriptManagerにjavascript（jquery）を登録していますので、実行してダイアログを閉じる必要がありますが、何らかの理由でそれはしません。

EDIT： jQueryダイアログを開き、それをモーダルにするコード。

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

jQuery UIダイアログに使用されるdivは、UpdatePanelの外にある必要があります。

btnAddSupplier_Clickで、ダイアログを作成してUpdatePanelの外に移動します。
btnSelectSupplier_Clickの後には、divSuppliers id、移動されたID、およびreceived from serverの2つのdivがあります（UpdatePanelメカニズムでは、UpdatePanel DOM全体をサーバーから返されたHTMLで再構築することにより部分的なページ更新が可能です）。

また、console.logを使用してデバッグに役立てることをお勧めします。
閉じるダイアログに追加js：console.log($('#divSuppliers'))

Answer 2

より簡単なルートに進み、イベントをボタンクライアント側にバインドしてダイアログボックスを閉じることを検討しましたか？

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

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

フローが依然としてユーザの観点から同じです。ボタンをクリックすると、ダイアログが閉じます。ダイアログボックスを閉じた後にサーバー側のコードが実行されますが、クリック後にダイアログを閉じるかどうかを決定するサーバー側のロジックがないように見えるため、これはユーザーのニーズに合っている可能性があります。

EDITあなたの問題があります。代わりに開放既存のダイアログで、あなたはクリックでダイアログを再定義しているので、あなたが問題に実行されている：

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

を代わりに、あなたは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 }); 

}); 

、あなたがもう一度あなたの代わりにサーバー側のイベントのページにスクリプトをプッシュしようと、このクライアント側をしたいことがあり、この

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

のようにそれを開く必要がありますが、あれは君次第だ。

最も簡単な完全なソリューション：彼らはただ一緒にきれいに再生されないので、jQueryのダイアログでASP.NETのUpdatePanelを使用してミックスしてみません：

$(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

は、だからここソリューションです。

jQueryで.NETのScriptManagerコントロールとUpdatePanelコントロールを使用することで、AJAXを使用する時間が短くなると思っていたので、私はこの方向を向いていました。この時点で私は間違っていたようです。なぜなら、.NETの迷惑メールを取り除き、jQueryですべて置き換えるからです。だから私が救うと思ったその時代は風のように消えてしまった。

ストーリーのモラル：あなたがする必要がない場合は2つを混ぜてはいけません。