How can I properly load A page or A div automatically?

Question

I'm creating A simple queuing system, right now when ever I click my button called BtnNxt() it will dequeue my enqueued data and render it to my page. and it also render from another page. which is my call screen page, but when I click it again my call screen page needs to be refresh to update the current number from my queue. so what I want is , Ithink i need to refresh my page or maybe my div to update it?

Here is my BtnNext() controller :

   public ActionResult BtnNext()
    {
        System.Threading.Thread.Sleep(500);
        var first = MyQueue.todayQueue.Dequeue();
        MyQueue.todayQueue.Count();
        TempData["QueueItem"] = first;
        TempData.Keep();
        return PartialView("_queuenumber");
    }

and here is my callscreen page:

@{
    var item = (Rosh.QueueMe.Web.Models.MyQueue)TempData["QueueItem"];
}
<table>
    <tr>
        <th scope="tickets">TICKETS</th>
        <th scope="name">NAME</th>
        <th scope="counter">COUNTER</th>
        <th scope="service">SERVICE</th>
    </tr>
    <tr class="data">
        <td>#@item.QueueNumber</td>
        <td>@item.Name</td>
        <td>Desk 1</td>
        <td>@item.ServiceId</td>
    </tr>
</table>

I tried to use this code

<meta http-equiv="refresh" content="1" />

this code refresh my page every 1 sec, but is it possible to just reload the div? maybe using ajax?

Answer 1

use asyn keyword both side server & client, add the spinner loaders to each and every div which you want to make automatically load. don't make any custom tread because sometime thread take more time but actually he didn't need more time for sleep, so best solution is make every controller ayns and caller must be asyn as well.

Answer 2

<script type="text/javascript">
    $(function() {
        setInterval(loadData,1000);  // invoke load every second
        loadData(); // load on initial page loaded
    });

    function loadData() {
        $('#Div').load( '/controller/BtnNext' );
    }
</script>