Как использовать next / prev для навигации по sidemenu в ASP. NET MVC?

Question

Я работаю над своим FYP, который является образовательным веб-сайтом.

У меня есть уроки (учебные пособия), поэтому я хочу, чтобы список уроков находился на боковой панели меню, и есть две кнопки «следующий / предыдущий», и есть div для отображения содержимого.

Вот мой сценарий: я хочу, чтобы я щелкнул любой урок в меню боковой панели, его содержание показывалось в div , а выбранный был активной ссылкой. Также, если я нажму на следующий, он перейдет ко мне на следующий урок, и этот урок, его содержание должно быть показано в div , так же как и в предыдущем, чтобы перейти к предыдущему уроку.

Может ли кто-нибудь помочь мне, как реализовать эту логику c в ASP. NET MVC?

Что мне нужно, это похоже на w3schools и tutorialsteacher .

Контроллер

public ActionResult Index()
{
    return View(db.Lessons.ToList());
}

public JsonResult LessonContent(int id)
{
    return Json(db.Lessons.Where(x=>x.LessonId == id).FirstOrDefault(), JsonRequestBehavior.AllowGet);
}

Просмотр

@model IEnumerable<WebApplication10.Models.Lesson>
@{
    ViewBag.Title = "Lessons";
}
<style>
    .active {
        border-left: 5px solid red;
    }

    .current {
        color: red;
    }

    li {
        cursor: pointer;
    }
</style>
<div class="row">
    <div class="col-md-2" id="sidemenu">
        <ul class="nav" id="sideinnermenu">
            @foreach (var item in Model)
            {
                <li class="lessons"><a id="@item.LessonId">@item.LessonName</a></li>
            }
        </ul>
    </div>
    <div class="col-md-9">
        <ul class="pager">
            <li class="previous"><a href="#" id="#">Previous</a></li>
            <li class="next"><a href="#" id="#">Next</a></li>
        </ul>
        <hr />
        <div id="sidemenucontent"></div>
        <hr />
        <ul class="pager">
            <li class="previous"><a href="#" id="#">Previous</a></li>
            <li class="next"><a href="#" id="#">Next</a></li>
        </ul>
    </div>
</div>
<ol>
    <li><a>1</a></li>
    <li><a class="active">2</a></li>
    <li><a>3</a></li>
</ol>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(function () {

        $("#sideinnermenu li").click(function (event) {
            event.preventDefault();
            $("#sideinnermenu .active").removeClass("active");
            $("#sideinnermenu .current").removeClass("current");
            $(this).addClass("active");
            $(this).find("a").addClass("current");
        });

        $("ul.nav li.lessons a").click(function () {          
            var id = $(this).attr("id");
            $.ajax({
                url: '/Lesson/LessonContent', type: "GET", dataType: "json",
                data: { id: id },
                success: function (data) {
                    $("#sidemenucontent").html(data.LessonContent);
                },
                error: function (xhr, status, error) {
                    alert(xhr.responseText);
                    alert(status);
                    alert(error);
                }
            });
        });

        $(".next a:eq(0)").click(function () {

        });

    });
</script>