Rating

in namespace DotVVM.BusinessPack.Controls

Renders a set of points allowing users to edit 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:

  • PointIcon represents an icon that user can select. The default is Star icon.

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
property icon AllowHalfPoints Boolean Gets or sets whether users can select half point values (eg. 4.5). It's enabled by default.
attribute
inner element
static value
bindable
default
True
property icon AllowPreviewOnHover Boolean Gets or sets whether to preview a value when mouse is over a rating point. It's enabled by default.
attribute
inner element
static value
bindable
default
True
property icon AutoFocus Boolean Gets or sets whether the control should have focus when page loads or when a dialog is opened. The default value is false.
attribute
inner element
static value
bindable
default
False
property icon Enabled Boolean Gets or sets whether the control is enabled and can be modified.
attribute
inner element
static value
bindable
default
True
property icon MaxValue Int32 Gets or sets the maximum the Value can reach. The default maximum is 5.
attribute
inner element
static value
bindable
default
5
property icon PointIcon SvgIconBase Gets or sets the icon displayed on each rating point.
attribute
inner element
static value
bindable
default
null
property icon TabIndex Int32 Gets or sets the order in which the control is reachable in sequential keyboard navigation. The default value is 0 which means the document order.
attribute
inner element
static value
bindable
default
0
property icon Value Double? Gets or sets the rating selected by user.
attribute
inner element
static value
bindable
default
null
property icon Visible Boolean
attribute
inner element
static value
bindable
default
True

Events

Name Type Description
event icon Changed Command Gets or sets the command triggered when the Value is changed.

HTML produced by the control