1

私は、はるかに大きなソリューションで実装されたこのコードを書きました。ポイントは、asp:ImageButton を asp:GridView に追加することでした。この画像ボタンをクリックすると、JQuery ダイアログへの JavaScript 呼び出しがトリガーされます。

このダイアログは、asp:BulletedList を含む div にバインドされています。

十分に単純で、動作するようになりましたが、ボタンをクリックしてダイアログが開くと、タイトル バーのみに折りたたまれて表示されます。ウィンドウのサイズを変更して内容を表示することはできますが、最初から適切なサイズで開きたいです。

Resizable オプションを false に設定すると、折りたたまれたモードでブロックされ、データが表示されなくなります。また、IE でレンダリングされたページからソース コードを開くと、ダイアログがタイトル バーに折りたたまれている間、空の div (ダイアログで使用される div) が表示されますが、ウィンドウを展開して BulletedList データを表示すると、ソース コードが表示されます。箇条書きリストを右クリックしても空のdivが表示されます...

コードは次のとおりです。グリッドビューははるかに大きく、各列には特定のヘッダーとフッターがあるため項目テンプレートが使用されますが、関連のないものはすべて削除しました。

.ascx ファイル

Javascript:

function ShowReferedTasks() {
    $('#litReferedTasks').dialog({
        autoOpen: true,
        modal: true,
        minHeight: 150,
        minWidth: 500,
        resizable: true
    });
}

ダイアログをトリガーするボタンを含むグリッドビュー:

<ext:GridView ID="gvTaskParameters" runat="server" AutoGenerateColumns="False" DataKeyNames="TaskParameterID"
    ShowFooter="<%# _isAdmin %>" ShowHeaderWhenEmpty="True" ShowFooterWhenEmpty="True"
    EmptyDataText="Aucun paramètre disponible" AllowPaging="True" 
    PagerSettings-Mode="NextPreviousFirstLast" 
    OnPageIndexChanging="gvTaskParameters_PageIndexChanging" OnRowCancelingEdit="gvTaskParameters_RowCancelingEdit"
    OnRowEditing="gvTaskParameters_RowEditing" OnRowDeleting="gvTaskParameters_RowDeleting"
    OnRowUpdating="gvTaskParameters_RowUpdating" OnRowCommand="gvTaskParameters_RowCommand"
    OnRowDataBound="gvTaskParameters_RowDataBound" 
    OnDataBound="gvTaskParameters_DataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton ID="ibViewTasks" runat="server" CausesValidation="False" CommandName="ViewTasks"
                    ImageAlign="Middle" ImageUrl="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docs-info.gif" AlternateText="<%$ resources:resource, images_VoirTaches %>"
                    CommandArgument='<%# Eval("TaskParameterID") %>' />
                <%--<input id="ibViewTasks" class="ui-state-default ui-corner-all" type="image" src="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docks-info.gif" value="button" />--%>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</ext:GridView>

ダイアログにバインドされた div:

<div id="litReferedTasks" class="" title="Tâches Référées" style="background-color: White; position: absolute;">
    <div style="padding-left: 25px; padding-bottom: 25px; padding-right: 25px;">
        <asp:BulletedList ID="blReferedTasks" runat="server" DisplayMode="Text">
        </asp:BulletedList>
    </div>
</div>

C# のコード ビハインド:

else if (e.CommandName == "ViewTasks")
            {
                TaskParameterMapManager mgr = new TaskParameterMapManager(DatabaseConnection);
                int id = Convert.ToInt32(e.CommandArgument.ToString());
                var ts = mgr.GetTasks(id).OrderBy(t => t.TaskDescription);                

                this.blReferedTasks.DataSource = ts.ToList();
                this.blReferedTasks.DataTextField = "TaskDescription";
                this.blReferedTasks.DataBind();

                ScriptManager.RegisterStartupScript(this, this.GetType(), "Key_ShowReferedTasks", "ShowReferedTasks();", true);                
            }
4

1 に答える 1

0

答えは、@chris が示唆したように、ダイアログで使用される div の「position:absolute」スタイル タグを削除することでした。

于 2012-08-02T19:47:33.627 に答える