c# - 在 ASP.NET MVC 中实现 slider ？

Question

我正在研究 ASP.NET MVC 2 中的 slider 概念。

slider 代码片段

 <script type="text/javascript">
    $(function () {
        var abc = $('select#speed').selectToUISlider().next();
        fixToolTipColor();
    });
    function fixToolTipColor() {
        $('.ui-tooltip-pointer-down-inner').each(function () {
            var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
            var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor')
            $(this).css('border-top', bWidth + ' solid ' + bColor);
        });
    }
</script>

 <form action="#">
<fieldset>
    <select name="speed" id="speed">
        <option value="Poor">Poor</option>
        <option value="Good">Good</option>
        <option value="Med">Med</option>
        <option value="VeryGood">VeryGood</option>
        <option value="Excellent">Excellent</option>
    </select>
</fieldset>
</form>

我不明白如何使用动态值加载 slider (基于计算或数据库中的数字)

我该怎么做？

现在我使用以下 SQL 填充 dropdownlist。如何使用它来填充 slider ？

 private void PopulateGradeScale(string tenantID)
    {
        List<scale> AttributesList = new List<scale>();
        if (!string.IsNullOrEmpty(tenantID))
        {
            Context.SetPrivilegeContext(PrivilegeConstant.ViewEmployee);
            Dictionary<string, scale> Attributes = Proxy.GetGrade(UserIdentity.TenantID);
            if (Attributes != null && Attributes.Count > 0)
            {
                AttributesList = Attributes.Values.ToList();
            }
        }
        if (!string.IsNullOrEmpty(tenantID))
            ViewData["Grade"] = new SelectList((IEnumerable)AttributesList, "Identifier", "Name");
        else
            ViewData["Grade"] = new SelectList((IEnumerable)AttributesList, "Identifier", "Name");
    }

Answer 1

与往常一样，您首先定义一个 View 模型，它将表示该给定 View 的数据:

public class SliderViewModel
{
    public string SelectedSpeed { get; set; }
    public IEnumerable<Item> Items { get; set; }
}

public class Item
{
    public string Value { get; set; }
    public string Text { get; set; }
}

接下来，您有一个 Controller 操作，它将使用存储库来查询数据库并填充 View 模型，该模型将传递给强类型 View :

public ActionResult Index()
{
    var model = new SliderViewModel
    {
        Items = new[]
        {
            new Item { Value = "Poor", Text = "Poor" },
            new Item { Value = "Good", Text = "Good" },
            new Item { Value = "Med", Text = "Med" },
            new Item { Value = "VeryGood", Text = "VeryGood" },
            new Item { Value = "Excellent", Text = "Excellent" }
        }
    };
    return View(model);
}

最后，您在 View 中使用 HTML 帮助器来生成下拉列表”:

<%= Html.DropDownListFor(
    x => x.SelectedSpeed, 
    new SelectList(Model.Items, "Value", "Text")
) %>