In this article I will explain with an example, how to refresh a page after submit (post) in ASP.Net Core Razor Pages.
If the Browser is refreshed using F5 button after the Form is submitted (in other words after PostBack operation), the submitted data is resubmitted to Server.
Thus to prevent such behavior, the Page is redirect to same page after Form submit (post).
Note: For beginners in ASP.Net Core Razor Pages, please refer my article ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Problem
After a Form submission, when User refreshes the Page or presses the F5 key, the Browser tries to re-post the information again to the Browser and if the User responds as Retry then it could lead to duplicate entries in the Database.
ASP.Net Core Razor Pages: Refresh Page after Submit (POST)
 
 
Solution
In order to avoid the above situation, the Page needs to be redirect to itself after Form submission.
 
 
Model
Following is a Model class named PersonModel with two properties i.e. FirstName and LastName.
public class PersonModel
{
    [BindProperty]
    public string FirstName { get; set; }
 
    [BindProperty]
    public string LastName { get; set; }
}
 
 
Razor PageModel (Code-Behind)
The PageModel consists of two Action Handler methods.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
 
Handler method for handling Button Click and POST operation
This Handler method handles the POST call when the Submit Button is clicked and the Form is submitted.
The Handler method for POST operation accepts the values of First Name and Last Name sent from the Razor Page through PersonModel class object received as parameter.
Then the values are assigned to the Name property which is decorated with TempData Attribute.
Note: The TempData Attribute is used to save the value of the Property in TempData object and values stored in TempData objects are preserved during Page redirects.
 
In order to redirect the Page after Form Submission (Post), a client side redirection script is set in the ViewData object.
This script present in the ViewData object will be rendered in the Razor Page and will be executed once the Razor Page is loaded in the client’s Browser.
public class IndexModel : PageModel
{
    [TempData]
    public string Name { get; set; }
 
    public void OnGet()
    {
    }
 
    public void OnPostSubmit(PersonModel person)
    {
        this.Name = string.Format("Name: {0} {1}", person.FirstName, person.LastName);
        ViewData["JavaScript"] = "window.location = '" + Url.Page("Index") + "'";
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Form with two TextBox elements and a Submit Button.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
 
The value of the Name property stored in the TempData object is displayed using Razor syntax.
Finally, the script present in the ViewData object is rendered using Html.Raw function and after the script is executed, the Page is redirected to itself.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Razor_Refresh_Page_After_Submit.Pages.IndexModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <form method="post">
        <table>
            <tr>
                <td>First Name: </td>
                <td><input type="text" id="txtFirstName" name="FirstName"/></td>
            </tr>
            <tr>
                <td>Last Name: </td>
                <td><input type="text" id="txtLastName" name="LastName"/></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" asp-page-handler="Submit"/></td>
            </tr>
        </table>
        <hr/>
        @Model.Name
    </form>
    @if (ViewData["JavaScript"] != null)
    {
       <script>
           @Html.Raw(ViewData["JavaScript"])
       </script>
    }
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Refresh Page after Submit (POST)
 
 
Downloads
Download Code