Partial form saving and loading without full page postback in ASP.NET Core 7 Razor Pages?

Question

• ASP.NET Core 7
• Entity Framework
• Deployed on Azure (App service and SQL Server)

I have three textboxes on a page. The text boxes can contain a substantial amount of text. Users will discuss with clients and record information in these text boxes. The duration of each discussion can be a few hours.

Question: how can I save the data entered in the textbox at regular intervals where the user actively inputs information without performing a full page refresh? I want to ensure the user does not lose any entered information and can continue working without waiting for the page to reload.

Answer 1

According to your description, I suggest you could use Juqery ajax to achieve this requirement. You could use setInterval method which will trigger the method to post the textbox to the backend method.

More details, you could refer to below codes:

Client:

<input id="textbox1"  type="text"/>
<br/>

<input id="textbox2" type="text" />
<br />

<input id="textbox3" type="text" />
<br />


@section scripts {
    <script>
        $(function() {
        setInterval(function() {
        var textbox1Content = $('#textbox1').val();
        var textbox2Content = $('#textbox2').val();
        var textbox3Content = $('#textbox3').val();
        $.ajax({
        url: 'home/SaveTextboxesContents',
        type: 'POST',
        data: { textbox1: textbox1Content, textbox2: textbox2Content, textbox3: textbox3Content },
        success: function(data) {
        console.log('Data saved successfully');
        },
        error: function() {
        console.log('Error saving data');
        }
        });
        }, 60000); // 1 min
        });
    </script>
)



}

Backend method:

    [HttpPost]
    public IActionResult SaveTextboxesContents(string textbox1, string textbox2, string textbox3)
    {
        // Save the textbox content to the database or a file
        // ...
        return Json(new { success = true });
    }

Result: