Refresh a webpage written in ASP.NET Core 6

Question

I'm searching for hours but could not find a solution for my problem. I have made lots of "hobby" projects in c# with WinForms and WPF. Now I want to start a simple website with asp.net.

In VS 2022 I started a new project ASP.NET Core-Web-App

I have a submit-button and in the meantime, I have managed to load an image from an FTP server and display it when I press this button.

However, I would like to periodically load and display a different image from the server without pressing a button. To do this, I have built in a timer that reloads the image over and over again.

I then assign this image to my image in Index.chtml, but unfortunately the page or the image is not updated.

My index.chtml looks like:

@page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }

    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        <p>@Model.Test</p>
        <form method="post">
            <label for="@Model.Test" id="LblTest" runat="server"/>
            <input type="text" id="txtName" name="name" width="300" value="@Model.Test"/>
            <input type="submit" id="btnSubmit" value="Get Current Time" asp-page-handler="Submit"/>
            <br />
            <p><img src="@Model.imageSrc" alt="InfoImage" width="800" border="0" /></p>>
        </form>
    }
    </div>

And my code is:

public class IndexModel : PageModel
{
      System.Timers.Timer ReloadTimer = new System.Timers.Timer(10000);

      public IndexModel(ILogger<IndexModel> logger)
      {
          _logger = logger;
      }

      public void OnGet()
      {
          ReloadTimer.Elapsed += ReloadTimer_Elapsed;
          ReloadTimer.Enabled = true;
      }

      private void ReloadTimer_Elapsed(object? sender, System.Timers.ElapsedEventArgs e)
      {
          ReloadTimer.Interval = 60000;
          Infoanzeige();
      }

      public void OnPostSubmit(string name)
      {
          Infoanzeige();
      }

      public void Infoanzeige()
      {
          //Code to get new image from FTP
      }
}

On pressing the button, the page refresh and shows the the image. But when the timer is elapsed, it runs the same code, but I see only old image. I have read on using StateHasChanged, but this command is not existing in my context. (??)

I would be very grateful for a solution.

Answer 1

JHBonarius is right saying you cannot update a page as you want from the server, you need to use technologies like ajax, using javascript

in this case with jQuery

<script type="text/javascript">  

function InvokeAction(param){
    $.ajax({
        type: "GET",
        async: true,
        data: param.data,
        url: param.url,
        success: function(response){
            // replace image with response.image
        },
        error: function (jqXHR, exception) {
            console.log('error')
        }
    })
}

$(function () {  
    setInterval(InvokeAction, 60000)
});  

Answer 2

Thank you very much for your all help. I marked the code of the answer as solution, because it is functional. Nevertheless I found another solution for me. I started a new project as blazor server app. With this I was able to integrate my C#-Code directly into the code of the website without any problems. In my code I have finally call "InvokeAsync(() => StateHasChanged() );", so the changes will render on client-side.

<img src="@ImageSrc" height="650" style="border:1px solid black;"/>

@code
{
    string ImageSrc = "";
    System.Timers.Timer TimerReload = new System.Timers.Timer();

    protected override void OnInitialized()
    {
        TimerReload.Interval = 10000;
        TimerReload.Elapsed += TimerReload_Elapsed;
        TimerReload.Start();

        InfoseiteLaden();
    }

    private void TimerReload_Elapsed(object? sender, System.Timers.ElapsedEventArgs e)
    {
        InfoseiteLaden();
    }

    private void InfoseiteLaden()
    {
        //Code to get new image from FTP

        InvokeAsync(() => StateHasChanged() );
    }
}
´´´