代码之家 › 专栏 › 技术社区 › MKN

在ASP.NET 7 Razor Pages中保存和加载部分表单而不进行全页回发?

partial-views razor-pages asp.net-core asp.net

MKN · 技术社区 · 2 年前

ASP.NET核心7
实体框架
在Azure上部署(应用程序服务和SQL Server)

我在一页纸上有三个文本框。文本框可以包含大量的文本。用户将与客户讨论并在这些文本框中记录信息。每次讨论的持续时间可以是几个小时。

问题 :在用户主动输入信息而不进行整页刷新的情况下,如何定期保存在文本框中输入的数据?我想确保用户不会丢失任何输入的信息,并且可以在不等待页面重新加载的情况下继续工作。

0 回复 | 直到 2 年前

Brando Zhang 2 年前

根据您的描述,我建议您可以使用Juqery ajax来实现这一要求。您可以使用setInterval方法,它将触发该方法将文本框发布到后端方法。

更多详细信息,您可以参考以下代码:

客户:

<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>
)



}

后端方法:

    [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 });
    }

结果: