CODEWITHSUNDEEP
c#javascriptasp.net-mvcslider
RobinHood
RobinHood

Reputation: 2397

Implementing a Slider in ASP.NET MVC?

I am working in Slider Concept in ASP.NET MVC 2.

slider code snippet

 <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>

I don't understand how to load the slider with dynamic values (based on calculations or numbers from the database)

How do I do this?

Right now I populate a dropdownlist using the following SQL. How can this be used to populate the 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");
    }

Upvotes: 1

Views: 2614

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038850

As always you start with defining a view model which will represent your data for this given 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; }
}

Next you have a controller action which will use a repository to query the database and fill the view model which will be passed to a strongly typed 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);
}

and finally you use an HTML helper in the view to generate the dropdown":

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

Upvotes: 1

Related Questions