UpdateProgress
in namespace DotVVM.Framework.Controls
Container for content that will be displayed for the time the page is doing a postback.
Usage & Scenarios
Container for content that will be displayed for the time the page is doing a postback.
Sample 1: UpdateProgress
The content inside the UpdateProgress
will appear when the user clicks the button. When the postback completes, the content will disappear.
@viewModel DotvvmWeb.Views.Docs.Controls.builtin.UpdateProgress.sample1.ViewModel, DotvvmWeb
<dot:Button Text="Perform difficult calculation" Click="{command: CalculateIt()}" />
<p>{{value: Result}}</p>
<dot:UpdateProgress>
<h4>Calculating...</h4>
</dot:UpdateProgress>
using System;
using System.Threading;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.builtin.UpdateProgress.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public int Result { get; set; }
public void CalculateIt()
{
// the calculation is very complicated and it takes a lot of time to get the result
Thread.Sleep(5000);
var random = new Random(DateTime.Now.Millisecond);
Result = random.Next();
}
}
}
Sample 2: UpdateProgress with Delay
The UpdateProgress
control has the Delay
property which defines the delay (in milliseconds) after which the content inside the UpdateProgress
will appear when the user clicks a button. If the postback is shorter than the delay, content inside the UpdateProgress
will not appear.
@viewModel DotvvmWeb.Views.Docs.Controls.builtin.UpdateProgress.sample2.ViewModel, DotvvmWeb
<!-- the calculation is longer than 1000 ms so the content in UpdateProgress will appear after 1000 ms -->
<dot:Button Text="Perform long calculation" Click="{command: LongCalculation()}" />
<!-- the calculation is shorter than 1000 ms so the content in UpdateProgress will not appear -->
<dot:Button Text="Perform short calculation" Click="{command: ShortCalculation()}" />
<p>{{value: Result}}</p>
<dot:UpdateProgress Delay="1000">
<h4>Calculating...</h4>
</dot:UpdateProgress>
using System;
using System.Threading;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.builtin.UpdateProgress.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public int Result { get; set; }
public void LongCalculation()
{
// the calculation is very complicated and it takes a lot of time to get the result
Thread.Sleep(5000);
var random = new Random(DateTime.Now.Millisecond);
Result = random.Next();
}
public void ShortCalculation()
{
// the calculation is not very complicated and it takes less time to get the result
Thread.Sleep(500);
var random = new Random(DateTime.Now.Millisecond);
Result = random.Next();
}
}
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
static value
bindable
|
null | |
Delay | Int32 | Gets or sets the delay (in ms) after which the content inside UpdateProgress control is shown |
attribute
static value
|
0 | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
HTML produced by the control
The content of the UpdateProgress
is wrapped in the <div>
element.
<div data-bind="..." style="display: none">
</div>