I came with a very weird situation.
I have form with a AspNet multiview control on it. I want to save its content every N seconds. So I send an ajax Post request every N seconds.
The issue comes after the postback number 10. The view state seems to get corrupted after the Post number 8 and all the controls inside the non visible view loose their values.
My aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="multiview-ajax-bug- test.aspx.cs"
Inherits="multiview_ajax_bug_test" Theme=""%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src='<%= ResolveUrl("~/JS/auto-save.js") %>'></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="subnavigation">
<ul>
<li>
<asp:LinkButton ID="lnk_one" runat="server" Text="Page1" Font-Bold="true" OnClick="lnk_one_Click"></asp:LinkButton></li>
<li>
<asp:LinkButton ID="lnk_two" runat="server" Text="Page2" OnClick="lnk_two_Click"></asp:LinkButton></li>
<li>
<asp:LinkButton ID="lnk_three" runat="server" Text="Page3" OnClick="lnk_three_Click"></asp:LinkButton></li>
<li>
<asp:LinkButton ID="lnk_four" runat="server" Text="Page4" OnClick="lnk_four_Click"></asp:LinkButton></li>
</ul>
<asp:MultiView ID="ProjectMultiView" runat="server" ActiveViewIndex="0">
<asp:View ID="vw_one" runat="server">
one
<asp:TextBox runat="server" ID="one"></asp:TextBox>
</asp:View>
<asp:View ID="vw_two" runat="server">
two
<asp:TextBox runat="server" ID="two"></asp:TextBox>
</asp:View>
<asp:View ID="vw_three" runat="server">
three
<asp:TextBox runat="server" ID="three"></asp:TextBox>
</asp:View>
<asp:View ID="vw_four" runat="server">
four
<asp:TextBox runat="server" ID="four">
</asp:TextBox>
</asp:View>
</asp:MultiView>
<div class="clearboth">
</div>
</div>
</div>
<script type="text/javascript">
// save every two minutes
$(function () {
var formId = '<%= Form.ClientID %>';
var url = location.href;
var interval = 1 * 1 * 1000; // 1 secs
setInterval(saveDraft, interval);
function saveDraft() {
autoSave(formId, url);
}
});
</script>
</form>
</body>
</html>
My autosave function:
// auto-save.js
// Posts an ajax request to the server, the server side needs to check that it is an ajax request and save the content
// Requires JQuery 1.10 at least
function autoSave(formId, url, statusControlId) {
$.ajax({
url: url,
cache: false,
method: "POST",
data: $("#" + formId).serialize(),
success: function (data) {
if (statusControlId) {
$("#" + statusControlId).html("");
$("#" + statusControlId).html("success");
}
},
error: function () {
if (statusControlId) {
$("#" + statusControlId).html("");
$("#" + statusControlId).html("error");
}
}
});
}
Code behind:
using System;
public partial class multiview_ajax_bug_test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void lnk_one_Click(object sender, EventArgs e)
{
ProjectMultiView.SetActiveView(vw_one);
}
protected void lnk_two_Click(object sender, EventArgs e)
{
ProjectMultiView.SetActiveView(vw_two);
}
protected void lnk_three_Click(object sender, EventArgs e)
{
ProjectMultiView.SetActiveView(vw_three);
}
protected void lnk_four_Click(object sender, EventArgs e)
{
ProjectMultiView.SetActiveView(vw_four);
}
}
Is there anything obvious that I'm missing, or is it a bug on the Multiview control?
