Razor Page rendering page twice .net5

Question

Cars razor page is invoking OnGet() twice on first load. When I click view button View razor page loads OnGet(int id) twice. Service.Submit method is inserting two records instead of one. Should it not call every page method only once ?

cars.cshtml

@page 
@model IndexModel
@using MyApp.Models;

@{
    <table class="table">
        <thead>
            <tr>
                <th>Reference No</th>
                <th>Car Make</th>
                <th>Car Model</th>
                <th>Price</th>
                <th>Year</th>
            </tr>
        </thead>
        <tbody>
            @foreach (Car item in Model.CarList)
            {
                <tr>
                    <td>@item.ReferenceNo</td>
                    <td>@item.Make</td>
                    <td>@item.Model</td>
                    <td>@item.Price</td>
                    <td>@item.Year</td>
                    <td>
                        <a asp-page="View" asp-route-id="@item.id" class="btn btn-success btn-sm text-white">View</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

cars.cshtml.cs

public class IndexModel : PageModel
{
    private readonly AppDbContext _context;
    public List<Car> CarList = new List<Car>();

    public IndexModel(AppDbContext context)
    {
        _context = context;
    }

    public void OnGet() // -----> this function is invoked twice.
    {
        try
        {
            CarList = _context.Car.FromSqlRaw("EXEC dbo.sp_GetCars").ToList();                
        }
        catch (Exception)
        {
            throw;
        }
    }
}

view.cshtml.cs

public class ViewModel : PageModel
    {
        private readonly AppDbContext _context;     
        private readonly IServiceScopeFactory _scopeFactory;

        public ViewModel(AppDbContext context, IServiceScopeFactory scopeFactory)
        {
            _context = context;
            _scopeFactory = scopeFactory;           
        }        
        public IActionResult OnGet(int id)
        {
            try
            {
                if (id != null) {
                    Service.Submit(id, _scopeFactory);  ------>Insert function is also invoked twice                   
                }
                return RedirectToPage("Index");
            }
            catch (Exception)
            {

                throw;
            }
        }
    }

Answer 1

Please allow me write a sample here. I had a form in cshtml and provide OnPost method to handle it, then using Dependency Injection to inject service to handle the database inserting method.

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

<form method="post">
    <table>
        <tr>
            <td>ID: </td>
            <td><input type="text" id="ID" name="ID"/></td>
        </tr>
        <tr>
            <td>Title: </td>
            <td><input type="text" id="Title" name="Title"/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit buttom" /></td>
        </tr>
    </table>
    <hr/>
</form>


public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger; 
    private readonly ICommonService _commonService;
    public IList<Movie> Movie { get; set; }

    public IndexModel(ILogger<IndexModel> logger, ICommonService commonService)
    {
        _logger = logger; 
        _commonService = commonService;
    }

    public void OnGet()
    {
        Movie = _commonService.getData();
    }

    public void OnPost(Movie mov) {
        var a = mov.Title;
    }
}