Rating
in namespace DotVVM.BusinessPack.Controls
Renders a horizontal set of points representing a rating. If enabled, the user can select one of these points to set the rating.
Usage & Scenarios
Displays several stars (or any other symbols) and lets the user any number of them.
Sample 1: Basic Usage
The Value property represents a number of stars selected by the user.
The MaxValue specifies the number of stars to be displayed.
<bp:Rating Value="{value: Rating}"
MaxValue="5" />using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Rating.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public double Rating { get; set; } = 4.5;
}
}Sample 2: Configuration
The AllowHalfPoints allows to select half of a star to be able to get more precise rating. By default, the user can select only the entire star.
The AllowPreviewOnHover property can be used to disable the hover effect that indicates which stars will be selected on click.
<bp:Rating Value="{value: Rating}"
MaxValue="5"
AllowHalfPoints="false"
AllowPreviewOnHover="false" />using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Rating.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public double Rating { get; set; } = 4;
}
}Sample 3: Changed Event
The Changed property specifies a command in the viewmodel that is triggered whenever the user changes the rating.
<bp:Rating Value="{value: Rating}"
MaxValue="5"
Changed="{command: RatingChanged()}" />
<p>Rating has changed {{value: ChangeCount}} times.</p>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Rating.sample3
{
public class ViewModel : DotvvmViewModelBase
{
public double Rating { get; set; } = 4.5;
public int ChangeCount { get; set; }
public void RatingChanged()
{
ChangeCount++;
}
}
}Sample 4: Custom Icons
The icon used by the control can be customized using the following inner elements:
PointIconrepresents an icon that user can select. The default isStaricon.
See the Icon documentation to find about using other icon packs.
<bp:Rating Value="{value: Rating}"
MaxValue="5">
<PointIcon>
<bp:Icon Icon="Plus"></bp:Icon>
</PointIcon>
</bp:Rating>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Rating.sample4
{
public class ViewModel : DotvvmViewModelBase
{
public double Rating { get; set; } = 3.5;
}
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
AllowHalfPoints | Boolean | Gets or sets whether to display half points and allow the user to select half point values. |
attribute
static value
bindable
|
True |
|
AllowPreviewOnHover | Boolean | Gets or sets whether to display a preview of the selected value when user hovers over the control. |
attribute
static value
bindable
|
True |
|
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 |
|
Enabled | Boolean | Gets or sets whether the control responds to user actions. |
attribute
static value
bindable
|
False |
|
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 |
|
MaxValue | Int32 | Gets or sets the maximum value that the Value can reach. |
attribute
static value
bindable
|
5 |
|
PointIcon | SvgIconBase |
inner element
static value
bindable
|
null | |
|
Value | Double? | Gets or sets the current value of the Rating. |
attribute
bindable
|
null |
|
Visible | Boolean |
attribute
|
null |
Events
| Name | Type | Description | |
|---|---|---|---|
 |
Changed | Command | Gets or sets the command that is called when Value changes. |