Question

In a view in Razor I’m passing a model which contains a list (‘usageList’) of objects that have a Name and UseDescription property.

In JQuery I’ve made a slider and i want the specific UseDescription to appear when I change the slider value.

The problem is getting the specific object in the list inside the model.
I’ve got this code (JQuery):

<script type="text/javascript">
    $(document).ready(function() {
        $("#slider").slider({
            min:1,
            max:3,
            value:1,
            range:"min",
            change: function(event,ui){
                var number = ui.value;
                alert("@Model.UsageList[ui.value].UseDescription");

            }
        });
    });
</script>

it is not possible to get ui.value in this line:

alert("@Model.UsageList[ui.value].UseDescription");

If I pass in a number (1 for expample) instead of ui.value things work fine. But I need to get the specific listobject.

Any help is very appreciated.

Answer 1

You need to download your list to the client side using javascript. Then, you can get an item by index. Something like this:

<script type="text/javascript">
        $(document).ready(function() {
            var usageList = []
            @foreach (var item in Model.UsageList)
            {
                <text>usageList.push('@item.UseDescription');</text>
            }

            }
            $("#slider").slider({
                min:1,
                max:3,
                value:1,
                range:"min",
                change: function(event,ui){
                    var number = ui.value;
                    alert(usageList[ui.value - 1]);

                }
            });
        });
    </script>