Webportal/WebPortal/GuestName/Views/Home/Index.cshtml

@{
    ViewData["Title"] = "Telemor Anniversary";
}


<div class='center'>
    <p class='top'>Welcome to Telemor 10-year Anniversary Event</p>
    <img class='logo' src="logo 10 year.png" alt="logo" />
    <p class='name'><span class="gender"></span> <span class="fullname"></span></p>
    <p class='position'></p>
    <p class='company'></p>
    <img class="next" src="next.png" onclick="next()" alt="next" />
</div>

@section Scripts {
    <script>
        function loadGuest(next) {
            $.ajax({
                url: "/Home/RefreshGuestName",
                type: 'POST',
                data: {
                    nextStatus: next
                },
                success: function (res) {
                    console.log(res);
                    if (res.error == "0") {
                        // reload name
                        $(".gender").html(res.gender);
                        $(".fullname").html(res.name);
                        $(".position").html(res.position);
                        $(".company").html(res.organize);
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }

        var timer;

        function next() {
            clearInterval(timer);
            loadGuest('1');
            timer = setInterval(loadGuest, 2000);
        }

        $(document).ready(function () {
            loadGuest("0");

            // interval
            timer = setInterval(loadGuest, 2000);
        });

    </script>

}