Telerik RadWindowManager ポップアップを開いています。実行するデータベース操作に時間がかかります。ロード中、つまり約 35 ~ 40 秒間、しばらくの間、プロセスが終了するまで待ち続けます。
最初にデザインをロードし、ローダー/進行状況バーを表示してユーザーに待機するように通知する方法はありますか?実際には、インターネットの速度が遅いと問題が悪化します...
なにか提案を....
Telerik RadWindowManager ポップアップを開いています。実行するデータベース操作に時間がかかります。ロード中、つまり約 35 ~ 40 秒間、しばらくの間、プロセスが終了するまで待ち続けます。
最初にデザインをロードし、ローダー/進行状況バーを表示してユーザーに待機するように通知する方法はありますか?実際には、インターネットの速度が遅いと問題が悪化します...
なにか提案を....
クライアントでJavaScriptを使用してRadWindowを開き、JavaScriptを使用して目的のURLを設定します。RadWindowを破棄しない部分的なポストバックを実行します。サーバーでのみURLを取得する場合は、同じロジックを使用しますが、最初に読み込み記号を表示します。応答が完了したら、スクリプトを呼び出してRadWIndowのURLを再度変更します。 http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-javascript-from-server-side .html http://www.telerik.com/help/aspnet-ajax/window-programming-radwindow-methods.html
以下の代替案...しかし解決策ではありません
コンテンツの読み込み中に、次のように読み込みパネルを表示できます
<div id="loading" style=" width: 100px; height: 50px; display: none;
text-align: center; margin: auto;">
loading...
</div>
<asp:Button ID="RadButton1" runat="server"
Text="RadButton1" OnClientClick="openRadWnd(); return false;" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server"
NavigateUrl="url" ShowContentDuringLoad="false"
OnClientShow="OnClientShow" OnClientPageLoad="OnClientPageLoad">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<script type="text/javascript">
var loadingSign = null;
var contentCell = null;
function openRadWnd() {
$find("<%=RadWindow1.ClientID %>").show();
}
function OnClientShow(sender, args) {
loadingSign = $get("loading");
contentCell = sender._contentCell;
if (contentCell && loadingSign) {
contentCell.appendChild(loadingSign);
contentCell.style.verticalAlign = "middle";
loadingSign.style.display = "";
}
}
function OnClientPageLoad(sender, args) {
if (contentCell && loadingSign) {
contentCell.removeChild(loadingSign);
contentCell.style.verticalAlign = "";
loadingSign.style.display = "none";
}
}
</script>
ここに良い例があります。デモについては、こちらを参照してください。
aspx ファイル:
<telerik:RadScriptManager id="ScriptManager1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"/>
<p>
Press the submit button in order to start monitoring custom progress
</p>
<asp:button ID="buttonSubmit" runat="server" Text="Submit" OnClick="buttonSubmit_Click" CssClass="RadUploadButton" />
<telerik:RadProgressManager id="Radprogressmanager1" runat="server" />
<telerik:RadProgressArea id="RadProgressArea1" runat="server" />
aspx.cs ファイル:
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
//Do not display SelectedFilesCount progress indicator.
RadProgressArea1.ProgressIndicators &= ~ProgressIndicators.SelectedFilesCount;
}
RadProgressArea1.Localization.Uploaded = "Total Progress";
RadProgressArea1.Localization.UploadedFiles = "Progress";
RadProgressArea1.Localization.CurrentFileName = "Custom progress in action: ";
}
protected void buttonSubmit_Click(object sender, System.EventArgs e)
{
UpdateProgressContext();
}
private void UpdateProgressContext()
{
const int total = 100;
RadProgressContext progress = RadProgressContext.Current;
progress.Speed = "N/A";
for (int i = 0; i < total; i++)
{
progress.PrimaryTotal = 1;
progress.PrimaryValue = 1;
progress.PrimaryPercent = 100;
progress.SecondaryTotal = total;
progress.SecondaryValue = i;
progress.SecondaryPercent = i;
progress.CurrentOperationText = "Step " + i.ToString();
if (!Response.IsClientConnected)
{
//Cancel button was clicked or the browser was closed, so stop processing
break;
}
progress.TimeEstimated = (total - i) * 100;
//Stall the current thread for 0.1 seconds
System.Threading.Thread.Sleep(100);
}
}
これで、コードの統合がより簡単になるはずです。
編集: PageLoad で RadProgressArea を設定した後にデータベース操作をトリガーするには、最初のページの読み込み後にいくつかの ajax 呼び出しを行う必要があります (したがってRadAjaxManager
、ascx ファイルの上部に追加しました)。このコードを使用して、DataBase 呼び出しをトリガーします。
JavaScript:
function pageLoad(sender, eventArgs) {
if (!eventArgs.get_isPartialLoad()) {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("StartDBOperation");
}
}
ascx.cs ファイル:
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
if (e.Argument == "StartDBOperation")
{
// Start DB operation here..
}
}