Equivalent of a Rating Control

[Steven]

Good Evening,

Is there a control that I can use to have a rating system. I need a control that will allow me up to 5 stars and have the user click on the number of stars that the person should receive. I also need another control that will allow me to have 5 stars but be predefined and not be able to be edited. Is there a control that could do this? I saw one in xamarian but not for mvc.

Thanks,

Steven

[Muthukumar Kannan]

Hi Steven,

Thank you for contacting Syncfusion support.

We have checked your reported query and currently, the Rating component is not available in our Asp.Net MVC (Essential JS 2) platform. However, we have logged a feature request for this component and the status of the same can be tracked through our feedback portal below.

https://www.syncfusion.com/feedback/21000/rating-component 

If you have any more specifications/suggestions for the feature request, you can add them as a comment in the portal. Also, please upvote this feature to make this our priority. While this feature itself is important we will prioritize the features every release, based on the user demands. And, it’ll be available in any of our upcoming releases.

Also, we would like to let you know that we already have the Rating component in Essential JS 1 and you can check out the further details in the below links.

Demo:
https://mvc.syncfusion.com/demos/web/rating/precision 

Documentation:
https://help.syncfusion.com/aspnetmvc/rating/overview 

Please let us know if you have any concerns.

Regards,
Muthukumar K 

[Steven]

Thanks for that information. I would like to use the EJ1 Rating control. I downloaded the NuGet package for EJ1 as it shows in the documentation and then I added the following line to my View Page, All I see is a blank textbox. Am I missing something?

@Html.EJ().Rating("Rating").Value(4)

[Muthukrishnan Kandasamy]

 

Hi Steven, 

 

Good day to you. 

 

We have validated your requirement in EJ Rating control. We suspect that, you have may be missed to refer the required styles and scripts file in your application. Please refer to the below documentation for more details. 

 

https://help.syncfusion.com/aspnetmvc/getting-started#through-syncfusion-nuget-packages 

 

We have prepared sample application to meet your requirement, in this sample we have added two rating control.  The first one we can modify the value and for the second rating we have enabled the ReadOnly property. Please refer to the below code block. 

 

<label>Normal Rating</label> 

 

@Html.EJ().Rating("Rating").Value(4) 

 

<label>ReadOnly Rating</label> 

 

@Html.EJ().Rating("Rating2").ReadOnly(true).Value(5) 

 

 

The attached sample can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/161028/ze/MVC_Rating707195476 

 

Description	Link
Getting started	https://help.syncfusion.com/aspnetmvc/rating/getting-started
Customization	https://help.syncfusion.com/aspnetmvc/rating/rating-customization
API reference	https://help.syncfusion.com/api/js/ejrating
Live demo	https://mvc.syncfusion.com/demos/web/rating/default

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K 

[Steven]

Thank you for that sample. I saw what I did wrong. I forgot to include one of the script files. I have two more questions:

1. When I load the control It shows and works fine but I receive an error saying:

I do have <add key="ClientValidationEnabled" value="true" />

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

in my Web.config. I need them for the rest of my application. How can I fix this error?

2. Is there any way of making the stars bigger? I did this: @Html.EJ().Rating("Rating").ShapeWidth(30).ShapeHeight(30). This is as big as I can make it without having it repeat it self like this:

I need it to be about 60 pixels to match my other controls on the page. Is there any way to do this? I looked at the Documentation on changing the size of the the stars but it didn't really help me.

Thanks,

Steven

[Muthukrishnan Kandasamy]

 

Hi Steven, 

 

Thanks for the update. 

 

Query 1: When I load the control It shows and works fine but I receive an error  

 

We would like to let you know that, when we are enabling the unobtrusive mode in our application, we need to refer the ej.unobtrusive.min.js file. Please check the below documentation link for more details. 

 

https://help.syncfusion.com/aspnetmvc/unobtrusive 

 

Please refer to the below code block for referring the scripts. 

 

<head> 

    <meta charset="utf-8" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>@ViewBag.Title - My ASP.NET Application</title> 

    @Styles.Render("~/Content/css") 

    @Scripts.Render("~/bundles/modernizr") 

    <link rel='nofollow' href="~/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" /> 

    <script src="~/Scripts/jquery-3.3.1.min.js"></script> 

    <script src="~/Scripts/jsrender.min.js"></script> 

    <script src="~/Scripts/ej/web/ej.web.all.min.js"></script> 

    <script src="~/Scripts/ej/common/ej.unobtrusive.min.js"></script> 

</head> 

 

 

Query 2: Is there any way of making the stars bigger? 

 

Currently, we don’t have support for increasing the height and width of the Rating star. Because, we have used sprite image as background for the rating star. 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K 

[Steven]

Thank you so much for all of your help! Once I loaded that script, the error was resolved. I have a few other questions:

1. When I load a partial view modal window, the rating control in the parent page duplicates itself

How can I prevent it from loading more than once in the parent page?

2. In the modal view what is the correct way to load multiple ratings controls?

3. When I disable the reset button or make it read only, the control is off center. Is there any way to fix this aside from adjusting the margins or padding?

Thanks,

Steven

[Muthukrishnan Kandasamy]

 

Hi Steven, 

 

Query 1: When I load a partial view modal window, the rating control in the parent page duplicates itself 

 

We have validated your reported problem by rendering the Rating control inside the partial view modal dialog. But, we were unable to reproduce your reported issue in our end. We have attached the issue validation sample for reference.  

 

Query 2: In the modal view what is the correct way to load multiple ratings controls? 

 

Based on your provided details, we suspect that your requirement is to render the same control in multiple times. For achieving this requirement, we can use the RenderPartial method in MVC. Please refer to the below code block. 

 

[Index.cshtml] 

 

 

@{ Html.RenderPartial("_Dialog"); } 

 

@{ Html.RenderPartial("_Dialog"); } 

 

 

 

[_Dialog.cshtml] 

 

 

 

<button type="button" id="code" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

 

 

<div class="modal fade" id="myModal" role="dialog"> 

    <div class="modal-dialog" style="height:100%;width:100%"> 

        <!-- Modal content--> 

        <div class="modal-content"> 

            <div class="modal-header"> 

                <button type="button" class="close" data-dismiss="modal">&times;</button> 

                <h4 class="modal-title">Modal Header</h4> 

            </div> 

            <div class="modal-body"> 

                <div class="control-section"> 

                    <div class="content-wrapper"> 

                        <table class="slider_table"> 

                            <tbody> 

                                <tr> 

                                    <td> 

                                        <div class="sliderwrap"> 

                                            <label>Rating 1</label> 

 

                                            @Html.EJ().Rating("Rating1").Value(4).Width("600px") 

                                        </div> 

                                        <div class="sliderwrap"> 

                                            <label>Rating 2</label> 

 

                                            @Html.EJ().Rating("Rating2").Value(5).Width("600px") 

                                        </div> 

                                        <div class="sliderwrap"> 

                                            <label>Rating 3</label> 

 

                                            @Html.EJ().Rating("Rating3").Value(3).Width("600px") 

                                        </div> 

                                    </td> 

                                </tr> 

                            </tbody> 

                        </table> 

                    </div> 

                </div> 

            </div> 

        </div> 

    </div> 

</div> 

 

 

 

 

Query 3: When I disable the reset button or make it read only, the control is off center. Is there any way to fix this aside from adjusting the margins or padding? 

 

We were unable to reproduce your reported issue(control is off center), when we disable the reset button and ReadOnly. Please check the below issue validation sample. 

 

https://www.syncfusion.com/downloads/support/forum/161118/ze/Rating_partial1155012811 

 

Please check the above sample and if the issue still persists in your application, please share some additional details, it will help us to provide you the prompt solution. 

 

1. Share us the EJ Rating rendering code block.
2. If you face any script error in console window of the browser, then please share us those error screenshots.
3. Share us the issue replicating sample or else replicate your issue in the shared sample with exact version.
4. Share us the screen recorded video with issue replicating steps.

 

 

Regards, 

Muthukrishnan K 

[Sivakumar R]

We are glad to announce the release of Essential Studio 2022 Volume 4 (v20.40 which include Blazor Rating Component.

Blazor Rating Component Getting Started

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.