Showing Current Time Every Second In AspNetCore

Question

I want to show the current time in my RazoreView and also want the time to be refreshed each second on the web page. Can any one help me ?

this is my View :

<nav aria-label="breadcrumb">
    <ul class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Page</a></li>
        <li class="breadcrumb-item active" aria-current="page">Register </li>
    </ul>
</nav>

<main class="client-page">
    <div class="container-content">

        <header><h2> Register </h2></header>

        <div class="form-layer">

            <form asp-action="Register" method="post">
                <div class="input-group">
                    <span class="input-group-addon" id="username"><i class="zmdi zmdi-account"></i></span>
                    <input asp-for="UserName" type="text" class="form-control" placeholder="نام و نام خانوادگی" aria-describedby="username">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" id="email-address"><i class="zmdi zmdi-email"></i></span>
                    <input asp-for="Email" type="text" class="form-control" placeholder="ایمیل" aria-describedby="email-address">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" id="password"><i class="zmdi zmdi-lock"></i></span>
                    <input asp-for="Password" type="password" class="form-control" placeholder="رمز عبور " aria-describedby="password">
                </div>

                <div class="input-group">
                    <span class="input-group-addon" id="password"><i class="zmdi zmdi-lock"></i></span>
                    <input asp-for="RePassword" type="password" class="form-control" placeholder="تکرار رمز عبور " aria-describedby="password">
                </div>

                <div class="link">
                    <a href=""> <i class="zmdi zmdi-account"></i> ورود به سایت </a>
                </div>
                <div asp-validation-summary="All" class="text-danger">

                </div>
                <button class="btn btn-success"> عضویت در سایت </button>

            </form>
        </div>

    </div>
</main>

Is there any way to use pure JS instead of Jquery?

start researching at [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) - from there, it's a no brainer — Bravo, Aug 09 '21 at 00:03
Welcome to Stack Overflow. Please provide a Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example — Twisty, Aug 09 '21 at 02:02

score 2 · Answer 1 · answered Aug 09 '21 at 02:24

2

Try to create a function to render a new Date, then use the setInterval() method repeats the function at every seconds.

Code as below:

<p id="demo"></p> 
<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

The result as below:

answered Aug 09 '21 at 02:24

Zhi Lv

18,845
1
19
30

thanks. and can I create a DateTime at an 'action' in a 'Controller' and get that DateTime with 'json' then show that DateTime every second? Can you explain it? – Hossein Dara Aug 09 '21 at 03:35
@HosseinDara You can create an action method and use JQuery call it, but you have to send the request per second. Then, you might meet the performance issue and request delay issue. So, if just display the current time, it is better to do it from client side (without calling the action method.) – Zhi Lv Aug 09 '21 at 05:20

Showing Current Time Every Second In AspNetCore

1 Answers1