使用 .NET 和 AJAX 轻松自动保存表单

• 下载源代码 - 3.86 KB

引言

本文将展示如何在后台自动保存 Web 表单，而不会影响用户输入。

背景

我正在处理一个大型表单，并希望找到一种简单的自动保存方法，以便在会话超时或用户未点击保存按钮等情况下，不会丢失数据。我找到了一些实现起来不太容易的示例。我只想实现与点击保存按钮相同的效果。然后我尝试使用 AJAX 控件来完成此操作，并发现它非常简单。

Using the Code

本文中的代码很简单，只是将文本从一个文本框移动到另一个文本框。但这可以替换为实际保存表单内容（例如，保存到数据库）。

为此，首先创建一个表单和表单字段。然后从工具箱的 AJAX 扩展选项卡中添加 ScriptManager、Timer 和 UpdatePanel 。

如果您不希望在保存时显示任何内容，请将 UpdatePanel 保留为空。

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="15000" ontick="Timer1_Tick"></asp:Timer> 

<div> 

    <asp:TextBox ID="TextBox1" runat="server" 
	Height="118px" TextMode="MultiLine" Width="468px"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Save" 
	onclick="Button1_Click" /><br /><br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>
        <asp:TextBox ID="TextBox2" runat="server" Height="120px" 
		TextMode="MultiLine" Width="466px"></asp:TextBox>
    </ContentTemplate>

    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>
    </Triggers>

</asp:UpdatePanel> 

</div>

</form>       

在代码背后，保存按钮的点击事件调用 save 方法，在本例中仅在文本框之间复制文本。

protected void Button1_Click(object sender, EventArgs e)
{
    Save();
}

private void Save()
{
    //Add the save function here ex store the text to DB
    //Here we only move between the two textboxes to show that it works
    TextBox2.Text = TextBox1.Text;
}

现在只需要为计时器 onTick 事件添加一个处理程序，并让该处理程序调用相同的 Save 函数。

protected void Timer1_Tick(object sender, EventArgs e)
{
    Save();
}

完成了！

关注点

这里的关键是 AsyncPostBackTrigger。如果没有触发器，表单将执行回发，表单将对用户闪烁并失去当前表单字段的焦点（并且您不希望在您编写长文本的时间间隔内发生这种情况）。

历史

• 2009 年 3 月 20 日：初始发布
• 2009 年 3 月 25 日：进行了一些小的文本修改