Dynamic loading of ASP.NET MVC Rating Control using Partial Views

In this article, we will explore how to dynamically render an ASP.NET MVC Rating control using partial views. The scenario involves loading a Rating control through Ajax requests and appending it to a specified container on a button click.

Create a Partial View

Create a partial view named _PartialView.cshtml in the Views/Home/ directory that takes a string parameter, adds it to the Rating control’s ID, and utilizes the Syncfusion Rating component for rendering.

@model string

@Html.EJS().Rating(@Model).Render()

<br />
 
@Html.EJS().ScriptManager()

Define Controller Action

Within the HomeController.cs, define the controller action GetRatingControl that returns the partial view content.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Sample.Controllers
{
    public class HomeController : Controller
    {
        //... 

        public ActionResult GetRatingControl(string id)
        {
            return PartialView("_PartialView", id);
        }
    }
}

Implement the dynamic loading

In the Index.cshtml, add a button to dynamically render the Syncfusion MVC rating control through an Ajax call and then append the rendered control to the container with the ID #ratingContainer.

@{

    ViewBag.Title = "Home Page";

}

<main>
    <br />

    @Html.EJS().Button("button").Content("Click to render Rating control").Click("renderRatingControl").Render()

    <br />

    <div id="ratingContainer">
        <!-- The Rating control will be rendered here -->
    </div>

</main>

<script>

    var counter = 1;

    function renderRatingControl() {
        // Use Ajax to load the Rating control partial view
        $.ajax({
            url: '/Home/GetRatingControl',
            type: 'GET',
            data: { id: 'rating-' + counter },
            success: function (result) {
                $('#ratingContainer').append(result);
            },
            error: function () {
                alert('Error occurred while loading the Rating control.');
            }
        });
        counter++;
    }

</script>

Additional References

For more information about the Syncfusion ASP.NET MVC Rating control, you can refer to the following sections:

• Syncfusion ASP.NET MVC Rating Demo
• Syncfusion ASP.NET MVC Rating Documentation