how to refresh page in razor pages?

Question

how to refresh page that has list of table?

I do not want to use window.location.href.reload();

is there anyway to refresh it?

Answer 1

Hi @打玻璃

how to refresh page that has list of table? I do not want to use window.location.href.reload();

I assume you just want to refresh the table and show the latest data, right?

If that is the case, you can try to use JQuery Ajax to call the handler method and get the data, the in the Ajax function dynamically add the table elements (tr/td) based on the response data.

Besides, I suggest you can use a partial view to show the table, then use JQuery ajax or JQuery load method to call the handler method and directly update the partial view. Refer to the following sample:

In the Pages/Shared folder, create a _CarPartial.cshtml page: in this page we could display the table.

@model List<Car>
<table class="table table-striped">
    <tr>
        <th>Model</th><th>Make</th><th>Year</th><th>Price</th>
    </tr>
    @foreach (var car in Model)
    {
        <tr>
            <td>@car.Model</td>
            <td>@car.Make</td>
            <td>@car.Year</td>
            <td>$@car.Price</td>
        </tr>
    }
</table>

Then in the Pages folder, add a AjaxPartial.cshtml razor page,

AjaxPartial.cshtml: when page load uses the <partial> tag helper to display the partial view, to be clear, when the page load, I only display the top 3 records.

@page "/ajaxpartial"
@model RazorAspNet6Sample.Pages.AjaxPartialModel
<p><button class="btn btn-primary" id="load">Load Partial View</button></p>
<div id="grid">
    <partial name="_CarPartial" model="@Model.Cars" />
</div>
@section scripts{
    <script>
        $(function () {
            $('#load').on('click', function () {
                $('#grid').load('/ajaxpartial?handler=CarPartial');
            });
        });
    </script>
}

AjaxPartial.cshtml.cs:

    public class AjaxPartialModel : PageModel
    {
        private ICarService _carService;
        public AjaxPartialModel(ICarService carService)
        {
            _carService = carService;
        }
        public List<Car> Cars { get; set; }
        public void OnGet()
        {
            Cars = _carService.GetAll().Take(3).ToList(); //when page load only display 3 records,
        }
        public PartialViewResult OnGetCarPartial()
        {
            Cars = _carService.GetAll();
            return Partial("_CarPartial", Cars); 
        }
    }

Then, after clicking the load button, it will call the CarPartial handler and get the _CarPartial partial view to display all records.

The result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion