jquery - MVC4 - Refresh View based on the current index of a Model (which is a List of Items) - Next/Previous

Question

I have a MVC4 view that's bound to a list-Model (List). Now I have some fields that render the properties of an Item - so I initially render those fields with Model.ElementAt(0). I now have Next/Previous buttons on my page that should move to the next/previous Item in my Model (List) and refresh the fields on the View. What's the best way to accomplish this (using jquery preferably)?

Something of this sort...

@model IQueryable<Item>
@{
    var items = this.Model.ToList();
    var i = 0;
    var item = items.ElementAt(i);

}
<script type="text/javascript">
    $(document).ready(function () {
        $('input:submit').click(function (event) {
        event.preventDefault();
            @{
                i++;
                item = items.ElementAt(i);
            }

            var str = @Html.Partial("_PartialView", item); /* when I have this - it gives a runtime error saying cannot instantiate an Interface */
            $("partialQuestion").html(str);
        });
    });
</script>

@using (Html.BeginForm())
{
        <div id="partialQuestion">
        @{
            Html.RenderPartial("_PartialView", item); // this basically renders some fields on a usercontrol that's has the @model of type Item
        }
        </div>
        <div>
            <input type="submit" value="Next" id="next" />
        </div>
}
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}