在mvc5剃刀视图中用单选按钮的星级评级

Question

所以我有一个在我的表中创建记录的视图。其中一个守备是由单选按钮1-7组成的等级。

我希望在我看来将我的表单组转换为基于该代码的this等css星级评分。

这是我视图中表单组的代码

<div class="form-group">
                @Html.LabelFor(model => model.Rating, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.RadioButtonFor(model => model.Rating, "1")
                    @Html.RadioButtonFor(model => model.Rating, "2")
                    @Html.RadioButtonFor(model => model.Rating, "3")
                    @Html.RadioButtonFor(model => model.Rating, "4")
                    @Html.RadioButtonFor(model => model.Rating, "5")
                    @Html.RadioButtonFor(model => model.Rating, "6")
                    @Html.RadioButtonFor(model => model.Rating, "7")


                    @Html.ValidationMessageFor(model => model.Rating, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">

我需要在mvc5 html帮助程序代码中转换html组件jsfiddle中的代码，我不知道该怎么做