ボタンクリック時にブートストラップモーダルポップアップでグリッドビューを表示したいのですが、グリッドビューがバインドされなくなるまで、ロードパネルを表示したいだけです。
<asp:Button ID="btnSearch" runat="server" CausesValidation="true" Text="Search" CssClass="btn btn-info pull-right"
OnClientClick="waitingDialog.show();" ValidationGroup="MinMax" OnClick="btnSearch_Click" />
一方、コードビハインドでは、Button OnClick を呼び出しており、GridView バインドの後、以下のプロセスを実行しています。
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#myModal').modal('show');");
sb.Append("waitingDialog.hide();");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MinMax Data Report", sb.ToString(), false);
しかし、問題は、GridView が非常に大きいことですが、GridView のポップアップが読み込まれると、水平スクロールバーと垂直スクロールバーが表示されません。つまり、ポップアップはスクロールバーなしでロードされます。そして、パネルのロードを削除してそのポップアップを直接呼び出すと、正常に機能します。私は何も得ていません。
グリッドビューの読み込みに 32 秒近くかかるため、パネルの読み込みが必要です。以下は私のgridviewモーダルボディです。
<div class="modal-body" style="width=97%; overflow: auto;">
<div class="tabel-responsive">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Panel ID="panel2" runat="server" ScrollBars="Auto" Width="100%" Height="100%"
HorizontalAlign="Center">
<asp:GridView ID="gvMeterData" runat="server" RowStyle-Wrap="false" CssClass="table table-striped"
GridLines="Both" OnRowDataBound="gvMeterData_RowDataBound" HeaderStyle-HorizontalAlign="Center">
</asp:GridView>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gvMeterData" EventName="RowDataBound" />
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
私の読み込みポップアップは以下の通りです。
var waitingDialog = waitingDialog || (function ($) {
'use strict';
// Creating modal dialog's DOM
var $dialog = $(
'<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:auto;">' +
'<div class="modal-dialog modal-sm">' +
'<div class="modal-content">' +
'<div class="modal-header"><h3 style="margin:0;"></h3></div>' +
'<div class="modal-body">' +
'<div class="progress progress-striped active" style="margin-bottom:0;"><div class="progress-bar" style="width: 100%"></div></div>' +
'</div>' +
'</div></div></div>');
return {
/**
* Opens our dialog
* @param message Custom message
* @param options Custom options:
* options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m";
* options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning".
*/
show: function (message, options) {
// Assigning defaults
if (typeof options === 'undefined') {
options = {};
}
if (typeof message === 'undefined') {
message = 'Loading';
}
var settings = $.extend({
dialogSize: 'm',
progressType: '',
onHide: null // This callback runs after the dialog was hidden
}, options);
// Configuring dialog
$dialog.find('.modal-dialog').attr('class', 'modal-dialog').addClass('modal-' + settings.dialogSize);
$dialog.find('.progress-bar').attr('class', 'progress-bar');
if (settings.progressType) {
$dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType);
}
$dialog.find('h3').text(message);
// Adding callbacks
if (typeof settings.onHide === 'function') {
$dialog.off('hidden.bs.modal').on('hidden.bs.modal', function (e) {
settings.onHide.call($dialog);
});
}
// Opening dialog
$dialog.modal();
},
/**
* Closes dialog
*/
hide: function () {
$dialog.modal('hide');
}
};})(jQuery);
編集済み： 更新パネルに問題があると思います。そうじゃない？しかし、更新パネルがなければ、エラーを追跡することもできません。また、ブラウザでインスペクト要素を確認すると、.js が見つからないなどのエラーもコンソールに表示されません。
前もって感謝します。