7

updatepanel 内にグリッドビューがあります。gridview のフィールドの 1 つは、次のlinkbuttonようなASP.net です。

 <ItemTemplate>
       <asp:LinkButton ID="hlSortOrder" runat="server" CssClass="hlDialog" OnClick="LoadLog"
        Text='<%# DataBinder.Eval(Container, "DataItem.SortOrder") %>'></asp:LinkButton>
  </ItemTemplate>

誰かがリンクボタンをクリックすると、OnClick私が作成した というメソッドが呼び出されLoadLogます。LoadLog は次のようになります。

protected void LoadLog(object sender, EventArgs e)
        {
            GridViewRow gr = (GridViewRow)((DataControlFieldCell)((LinkButton)sender).Parent).Parent;
            Label l = (Label)gr.FindControl("lblID");
            DataSet ds;

            ds = BL.GetRunoffAnswerLog(Convert.ToInt64(l.Text));

            if (ds != null)
            {
                if (ds.Tables[0].Rows.Count == 0)
                {
                    gvLog.Visible = false;
                    gvLog.DataSource = null;
                    lblRowsCount.Text = "No log for this record!";
                }
                else
                {
                    lblRowsCount.Text = ds.Tables[0].Rows.Count.ToString() + " row(s) found for this record.";
                    gvLog.DataSource = ds.Tables[0];
                    gvLog.DataBind();
                    gvLog.Visible = true;
                }
            }
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) {$(this).parent().appendTo('form');}});", true);
        }

基本的に、グリッド ビューの行のハンドルを取得し、データベースからデータを取得して gvLog ソースに割り当てます。その後、最後の行に注意してください。

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) {$(this).parent().appendTo('form');}});", true);

ダイアログボックスを開くことができるように、これを行う必要があります。これを初めて取得したときにのみ、グリッドビューの行をクリックすると:

ここに画像の説明を入力

実際にはタイトルしか表示されていないことに注意してください...変です。しかし、同じ行をもう一度クリックすると、ダイアログ全体が表示されます。

ここに画像の説明を入力

最初のクリックでのみ発生します。別の行をクリックし続けると、正常に機能します。次の jquery コードを追加する必要があることを付け加えておきます。

 <script type="text/javascript">
        $(document).ready(function () {
            var prm = Sys.WebForms.PageRequestManager.getInstance();

            prm.add_endRequest(function () {
                $("#dialog").hide();
                // re-bind your jQuery events here 
           });
        ....more code...

この議論に基づいて: jQuery $(document).ready and UpdatePanels?

そのコードを持っていない場合、ポストバックが発生した分、このダイアログが含まれている div 全体が常にページに表示され、それは望ましくありません...

以下のメンバーの一人が述べたように。サーバー側のコードでこのイベントを発生させたとしても、実際に開いているダイアログを開くクライアント側のイベントが最初に発生しているリンクボタンを初めてクリックすると、何が起こっていると思います...上記のように、 「LoadLog」イベントをクリックすると、この jquery opendialog が登録されます。しかし、これでも最初にダイアログが開き、2回目にクリックするとデータが表示されるようです。

4

4 に答える 4

3

jQueryの素晴らしさとUpdatePanelsで多くの問題がありました。このアプローチを試してください：

  1. ダイアログに使用している div を更新パネルの外に配置します。コード ビハインドでダイアログを作成しないでください。代わりに、ページの読み込み時にダイアログを作成してください。ダイアログは updatepanel の外にあるため、上書きされることはありません。自動で開かないようにしてください。
  2. ダイアログ div に追加の div を追加して、コンテンツを保持します。
  3. というJavaScript関数を作成します。
    • 以前のコンテンツのダイアログのコンテンツ div のコンテンツをクリアします
    • gvLog次のようなダイアログ コンテンツ div にコントロールを追加します。$('#dialogContent').append($('#<%= gvLog.ClientID %>'));
    • ダイアログを表示します
  4. コード ビハインドで、RegisterClientScriptBlock を微調整して、この新しい JavaScript 関数を呼び出します。

サンプル コード
コード ビハインド: 

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //load in some dummy data
            Dictionary<int, string> vals = new Dictionary<int, string>()
            {
                {1, "ONE"},
                {2, "TWO"},
                {3, "THREE"},
                {4, "FOUR"},
                {5, "FIVE"},
                {6, "SIX"}
            };

            gvData.DataSource = vals;
            gvData.DataBind();
        }
    }

    protected void LoadLog(object sender, EventArgs e)
    {
        LinkButton lb = (LinkButton)sender;
        var key = lb.CommandArgument;

        Random r = new Random();
        Dictionary<int, int> dict = new Dictionary<int, int>();

        for (int i = 0; i <= r.Next(5, 20); i++)
        {
            dict.Add(r.Next(), r.Next());
        }

        gvLog.DataSource = dict;
        gvLog.DataBind();

        //show log in dialog on client
        ScriptManager.RegisterStartupScript(up, up.GetType(), "openDialog", "showLog();", true);
    }
}

デザイナーコード: 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <link href="ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(function () { 
            //setup dialog
            $('#dialog').dialog({draggable: true, 
                                modal: true, 
                                height: 500, 
                                width: 750, 
                                title: 'Log',
                                autoOpen: false});
        });

        function showLog() {
            //clear any old log data
            $('#dvContent').empty();
            //append current log
            $('#<%= gvLog.ClientID %>').appendTo($('#dvContent'));
            //show dialog
            $('#dialog').dialog('open');
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sp" runat="server" />
    <div>
        <asp:UpdatePanel ID="up" runat="server">
            <ContentTemplate>
                <asp:GridView ID="gvData" runat="server">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="lbShowLog" runat="server" Text="Show Log" 
                                    OnClick="LoadLog" CommandArgument='<%# Eval("Key") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

                <div style="display:none;">
                    <asp:GridView ID="gvLog" runat="server">
                    </asp:GridView>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

    <div id="dialog" style="display:none;">
        <div id="dvContent">

        </div>
    </div>
    </form>
</body>
</html>
于 2012-07-06T15:18:58.417 に答える
0

これを見る

に呼び出しを追加してみてください$('#dialog').dialog('open')

への最初の呼び出し$('#dialog').dialog([Parmas])は、それを作成しているが開いていない可能性があります。

このようなもの：

 ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', open: function (type, data) {$(this).parent().appendTo('form');}});$('#dialog').dialog('open');", true);

HTH

于 2012-06-30T12:46:35.403 に答える
0

更新パネルとjqueryのすべての手間からあなたを救う、あなたの問題に対する非常にトリッキーな解決策があります.

まず、RegisterClientScriptBlock 関数に依存せず、代わりに隠しフィールドを使用してすべてを実行します。

  1. 表示ダイアログを表示するかどうかを示す非表示フィールドを作成します。
  2. 隠しフィールドに値があるかどうかを確認する JavaScript 関数を作成します。非表示フィールドに値がある場合は、表示ダイアログを表示し、非表示フィールドに依存してデータを取得します。それ以外の場合はダイアログを表示しません。これにより、ポストバック表示ダイアログの問題が修正されます。
  3. 更新パネルにアニメーション エクステンダーを追加する

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1" runat="server"> <Animations> <OnUpdated> <Parallel duration="0">
<ScriptAction Script="YouFunctionCall();" /> </Parallel> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender>

この JavaScript 関数の最後で、隠しフィールドをクリアします。

ポストバック時にフラグが設定されているかどうかを確認するために JavaScript が実行され、フラグが空であることがわかり、更新パネル内をクリックすると、サーバー側のコードが実行され、隠しフィールドが設定されます。フラグとその他の情報が必要な場合、更新パネルのアニメーション エクステンダーは、更新パネルが更新された後に JavaScript 関数を実行し、非表示フィールドをチェックしてデータで満たされていることを確認し、ダイアログの表示をトリガーしてからフラグをリセットします。ポストバックはダイアログを表示しません。

于 2012-07-10T13:19:16.247 に答える
0

ダイアログを開く前にDOMを変更してみてください

コード内:

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "openDialog", "$(this).parent().appendTo('form');

JS で:

$('#dialog').dialog({draggable: true, modal: true, height: 500, width: 750, title: 'Log', true);
于 2012-07-06T11:00:21.120 に答える