- Empty (unrated) symbol template
- Full (rated) symbol template
- Using Emoji icon as rating symbol
- Using SVG icon as rating symbol
- Using PNG image as rating symbol
Contact Support
Templates in ASP.NET MVC Rating Control
6 Dec 20249 minutes to read
The ASP.NET MVC Rating control allows you to customize the appearance of the rating items using templates. You can use templates to specify a custom layout for the rating items, which can include any content you want. This allows you to create a more customized and interactive rating experience for the user.
The rating control supports below templates for item customization.
Empty (unrated) symbol template
To customize the appearance of unrated items, you can use the EmptyTemplate
tag directive. It allows you to specify the desired custom content for the unrated items.
The value
and index
are available in the template context for accessing information about the un-rated item.
If the FullTemplate
is not defined, the EmptyTemplate
will be used as the default for both rated and unrated items. You can apply custom styles to differentiate between the rated and unrated states of the items.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).EmptyTemplate("<span class='custom-font sf-rating-heart'></span>").Render()
<style>
.e-rating-container .custom-font {
/* To add the background color for the font icon. */
background: linear-gradient(to right, rgb(254,87,133,255) var(--rating-value), transparent var(--rating-value));
/* To clip the background to the icon (text) alone. */
background-clip: text;
-webkit-background-clip: text;
/* To make the background color visible instead of font color. */
-webkit-text-fill-color: transparent;
/* To provide a border for font icon. */
-webkit-text-stroke: 1px rgb(254,87,133,255);
}
@@font-face {
font-family: 'rating';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1uSfQAAAEoAAAAVmNtYXDnEudaAAABjAAAADhnbHlm4LiFsgAAAcwAAAJsaGVhZCKCSVkAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQCMATYAAAHEAAAACG1heHABDwCZAAABCAAAACBuYW1l75Kp8wAABDgAAAIZcG9zdDjyU90AAAZUAAAANwABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAA2T6Kh18PPPUACwQAAAAAAN+4AkEAAAAA37gCQQAAAAAD9APaAAAACAACAAAAAAAAAAEAAAADAI0AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wHnAgQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcC//8AAOcB//8AAAABAAQAAAACAAEAAAAAAIwBNgABAAAAAAPzA9oAfAAAEw8WFR8PPw41Lx4jDwwvDw8GqAwMDAsKCgoJCAgIBwYGBQUEBAMCAgEBAQECAwMEBQULFSMhOVJliOxTOSEdFg0IBQQDAwIBAQEBAgIDBAQFBQYGBwgICAkKCgoLDAwMDAwMDQwMDQwZGBgYFxUVFBIRCAgGBwkLCwwNDg4PEBAQEREREhEODg4ODg4NA8IGBwcICAkJCgoKCwsMCwwNDA0MDQ0ODQ0ODQ0ODQ0NDRUiMCtEX26P/V5FKycjFhQNDQ0ODQ0ODQ0NDgwNDQwNCwwMCwoLCgoJCAkIBwcGBQUEAwMCAQECBQYJCw4PERMKCgsMEQ8PDQ0LCwoICAYFBAMCAQEBAgIEBAUAAgAAAAAD9APFAAMAjAAANzMRIwEPAxUXDwwRMzcfBDcXPwo9AS8FPwsvCDc1Pwg1LwU1Pw01LwkHJT8ENS8LIw8BDK2tAfkCCgQBAQEBGCERERITIgkJKBAGIQc1Bx45k9sOBQgLDQsJBQMEAgIECQYCAQEBAw4ECQgGBwMDAQEBAQMDAwkCAQEDFgsFBAQDAwICAgQECgEBAQQKBwcGBQUEAwMBAQEBBAUHCQUFBQYR/q0PCQQDAgEBAwMKDBUDBwYMCw0HB1oBhwHeAQUDA3YfCgQsOh0bHBovCQgbDP6KAQEfAwEBAQIBAQMGCgoMBggICAUICQgLBQQEBAUDBgMHCAgMCAcIBwYGBgUFCQQCBgIEDAkGBQYHCQkKCQgIBwsEAgUDAgQEBAUFBgcHCAcGBgYGCgkIBgICAQEBAUYxGRobDQ0MDQsiHjEEBAIEAQECAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABgABAAEAAAAAAAIABwAHAAEAAAAAAAMABgAOAAEAAAAAAAQABgAUAAEAAAAAAAUACwAaAAEAAAAAAAYABgAlAAEAAAAAAAoALAArAAEAAAAAAAsAEgBXAAMAAQQJAAAAAgBpAAMAAQQJAAEADABrAAMAAQQJAAIADgB3AAMAAQQJAAMADACFAAMAAQQJAAQADACRAAMAAQQJAAUAFgCdAAMAAQQJAAYADACzAAMAAQQJAAoAWAC/AAMAAQQJAAsAJAEXIHJhdGluZ1JlZ3VsYXJyYXRpbmdyYXRpbmdWZXJzaW9uIDEuMHJhdGluZ0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGcARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwECAQMBBAAFaGVhcnQFdGh1bWIAAAA=) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="sf-rating-"], [class*=" sf-rating-"] {
font-family: 'rating' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sf-rating-heart:before {
content: "\e702";
}
</style>
public ActionResult EmptyTemplate()
{
return View();
}
NOTE
The current value of the rating item available in the template context as
value
and in the rating item element as CSS Variable (--rating-value
) can be used to support precision in templates.
Full (rated) symbol template
To customize the appearance of rated items in the Syncfusion® ASP.NET MVC rating control, you can use the FullTemplate
tag directive. This directive allows you to specify a custom layout for the rated items, which can include any content you desire.
The value
and index
are available in the template context for accessing information about the rated item.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(3).EmptyTemplate("<span class='custom-font sf-icon-empty-star'></span>").FullTemplate("<span class='custom-font sf-icon-fill-star'></span>").Render()
<style>
.e-rating-container .custom-font {
/* To change the icon font color. */
color: rgb(255,215,0);
}
@@font-face {
font-family: 'rating-template';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfMAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlm+icDjQAAAcwAAAE0aGVhZCK49ucAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQAcAJoAAAHEAAAACG1heHABDwBkAAABCAAAACBuYW1lmYExxgAAAwAAAAKFcG9zdCH169QAAAWIAAAAQAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAgPX4jF8PPPUACwQAAAAAAN/TWPsAAAAA39NY+wAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAADAFgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAABwAmgABAAAAAAP0A/QACQAAAQUTAyUFAxMlAwFn/qX6OwE1ATU7+v6lmQKsNf7//pasrAFqAQE1AUgAAAIAAAAAA/QD5AAdAFcAAAEfBAUPAxUTLwEjDwETNS8DJT8EJwMFDwQVHwIDBx8EMzclBRczPwU1Az8CNS8DJQMvBisBDwUCYAICBgMHASCwBAMCGuoHCAjpGgIDBLEBHgcGBgJiHXb+uQgHBgQBAgTUHgECBAUHCAkIAQ4BDgcJBAQEBwQDHdMEAgMFBgf+tHYDAgMEBAQEBQUEBAQEAwICnwMDBgIDNbAGBgYE/uCBAgKBAR0HBgYGsDQCBAYD3Fr+9jwDBAcHBQgIB9T+twUIBwcEAwKVlQIBAgIFBwgJAUnUBwgJCAcFBD0BCgQDBAICAgEBAgICBAMAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEADwABAAEAAAAAAAIABwAQAAEAAAAAAAMADwAXAAEAAAAAAAQADwAmAAEAAAAAAAUACwA1AAEAAAAAAAYADwBAAAEAAAAAAAoALABPAAEAAAAAAAsAEgB7AAMAAQQJAAAAAgCNAAMAAQQJAAEAHgCPAAMAAQQJAAIADgCtAAMAAQQJAAMAHgC7AAMAAQQJAAQAHgDZAAMAAQQJAAUAFgD3AAMAAQQJAAYAHgENAAMAAQQJAAoAWAErAAMAAQQJAAsAJAGDIHJhdGluZy10ZW1wbGF0ZVJlZ3VsYXJyYXRpbmctdGVtcGxhdGVyYXRpbmctdGVtcGxhdGVWZXJzaW9uIDEuMHJhdGluZy10ZW1wbGF0ZUZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcgBhAHQAaQBuAGcALQB0AGUAbQBwAGwAYQB0AGUAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwAtAHQAZQBtAHAAbABhAHQAZQByAGEAdABpAG4AZwAtAHQAZQBtAHAAbABhAHQAZQBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGcALQB0AGUAbQBwAGwAYQB0AGUARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwECAQMBBAAJZmlsbC1zdGFyCmVtcHR5LXN0YXIAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'rating-template' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sf-icon-fill-star:before {
content: "\e700";
}
.sf-icon-empty-star:before {
content: "\e701";
}
</style>
public ActionResult FullTemplate()
{
return View();
}
Using Emoji icon as rating symbol
You can use emojis of your choice as rating symbol by specifying them as template content within the EmptyTemplate
tag directive.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(4).EnableAnimation(false).EnableSingleSelection(true).EmptyTemplate("#template").Render()
<script id="template" type="text/x-jsrender">
${if(index==0)}
<span class='angry emoji'>😡</span>${else if(index==1)}
<span class='disagree emoji'>🙁</span>${else if(index==2)}
<span class='neutral emoji'>😐</span>${else if(index==3)}
<span class='agree emoji'>🙂</span>${else}
<span class='happy emoji'>😀</span>
${/if}
</script>
<style>
/* To change the color of an unselected rating item. */
.e-rating-item-container:not(.e-rating-selected) .emoji {
filter: grayscale(1);
}
</style>
public ActionResult EmojiIcon()
{
return View();
}
Using SVG icon as rating symbol
You can use SVG icons of your choice as rating symbol by specifying them as template content within the EmptyTemplate
and FullTemplate
tag directives.
@using Syncfusion.EJ2.Inputs
@Html.EJS().Rating("rating").Value(4).EnableAnimation(false).EmptyTemplate("#emptyTemplate").FullTemplate("#fullTemplate").Render()
<script type="text/x-jsrender" id="fullTemplate">
<svg width="35" height="25" class="e-rating-svg-icon">
<defs>
<linearGradient id="grad${index}" x1="0%" y1="0%" x2="100%" y2="0%">
<stop class="start" offset="0%" />
<stop class="end" offset="100%" />
</linearGradient>
</defs>
<rect width="35" height="25" fill="url(#grad${index})" style="stroke-width:2;stroke:rgb(173,181,189)" />
</svg>
</script>
<script type="text/x-jsrender" id="emptyTemplate">
<svg width="35" height="25" class="e-rating-svg-icon">
<rect width="35" height="25" fill="transparent" style="stroke-width:2;stroke:rgb(173,181,189)" />
</svg>
</script>
<style>
/* To change the size between items */
.e-rating-container .e-rating-item-container {
padding: 0px;
}
/* To set the gradient color */
.e-rating-svg-icon #grad0 .start {
stop-color: #FF0000;
}
.e-rating-svg-icon #grad0 .end,
.e-rating-svg-icon #grad1 .start {
stop-color: #ff5101;
}
.e-rating-svg-icon #grad1 .end,
.e-rating-svg-icon #grad2 .start {
stop-color: #ffc801;
}
.e-rating-svg-icon #grad2 .end,
.e-rating-svg-icon #grad3 .start {
stop-color: #dbe300;
}
.e-rating-svg-icon #grad3 .end,
.e-rating-svg-icon #grad4 .start {
stop-color: #8bc301;
}
.e-rating-svg-icon #grad4 .end {
stop-color: #4eaa01;
}
</style>
public ActionResult SVGTemplate()
{
return View();
}
Using PNG image as rating symbol
You can use PNG images of your choice as rating symbol by specifying them as template content within the EmptyTemplate
and FullTemplate
tag directives.
@using Syncfusion.EJ2.Inputs
@{
var fulltemplate = ""; //Provide the URL for the image here.
var emptytemplate = ""; //Provide the URL for the image here.
}
@Html.EJS().Rating("rating").Value(3).EmptyTemplate("#emptytemplate").FullTemplate("#fulltemplate").Render()
<script id="fulltemplate" type="text/x-jsrender">
<img src="@fulltemplate" width="25" height="25" />
</script>
<script id="emptytemplate" type="text/x-jsrender">
<img src="@emptytemplate" width="25" height="25" />
</script>
public ActionResult PNGImage()
{
return View();
}