5

次のASP.NETUpdatePanelがあります。

<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の非同期ポストバックを処理するクリックイベントです。

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ダイアログは閉じることを拒否します（ここでも、上記のイベントと、それが機能しないと表示されている箇所を参照してください）。ページのScriptManagerにjavascript（jquery）を登録しているので、ダイアログを実行して閉じる必要がありますが、何らかの理由でそうではありません。

編集： 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);
    }
}
4

3 に答える 3

2

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

ダイアログを作成し、それbtnAddSupplier_Clickを UpdatePanel の外に移動します。
divSuppliers btnSelectSupplier_Clickid を持つ 2 つの div、移動されたもの、およびサーバーから受信したものを取得した後(UpdatePanel メカニズムでは、サーバーから返された html を使用して UpdatePanel DOM 全体を再構築することにより、部分的なページの更新が可能になります)。

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

于 2012-05-16T14:40:44.310 に答える
1

ダイアログ ボックスを閉じるために、より単純な方法でイベントをボタン クライアント側にバインドすることを検討しましたか?

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

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

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

編集私はあなたの問題を見ます。既存のダイアログを開く代わりに、クリック時にダイアログを再定義しているため、問題が発生しています。

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

繰り返しますが、サーバー側のイベントでスクリプトをページにプッシュする代わりに、このクライアント側を実行したい場合がありますが、それはあなた次第です。

最も単純な完全な解決策:

$(function () {

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

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

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

    $('#divSuppliers').dialog('open');
});
});
于 2012-05-09T21:00:00.340 に答える
0

解決策は次のとおりです。ASP.NETUpdatePanelとjQueryダイアログを組み合わせて使用​​しないでください。これらは、うまく連携しないためです。

すべてをjQueryで実行する代わりに、.NETのScriptManagerおよびUpdatePanelコントロールを使用することで、AJAXを適切に配置するのにかかる時間が短縮されると考えたため、この方向に進んだだけです。この時点で、私は間違っていたようです。なぜなら、戻って.NETジャンクをリッピングし、すべてをjQueryに置き換えているからです。だから、私が救おうと思っていた時間はすべて、風のように消えてしまいました。

話の教訓：必要がなければ、2つを混ぜないでください。

于 2012-05-10T14:55:34.560 に答える