In this article I will explain with an example, how to persist the variables created in JavaScript code across PostBacks in ASP.Net using C# and VB.Net.
This article also explains how to preserve JavaScript objects, variables and data across PostBacks without using ViewState in ASP.Net using C# and VB.Net.
HTML Markup
The HTML Markup consists of an ASP.Net Button, an HTML Hidden Field (array_store) to store the values and send them to server and an HTML SPAN (array_disp) to display the preserved values.
The Button has been assigned an OnClientClick event handler which makes call to a JavaScript function UpdateArray.
The value of the array_store Hidden Field is set with the ArrayStore variable using Inline Server Tags.
C#
<span id="array_disp"></span>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="UpdateArray()" />
<input type="hidden" id="array_store" name="ArrayStore" value='<%=this.ArrayStore %>' />
VB.Net
<span id="array_disp"></span>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="UpdateArray()" />
<input type="hidden" id="array_store" name="ArrayStore" value='<%=Me.ArrayStore %>' />
Client Side
When the Submit Button is clicked the UpdateArray JavaScript function gets called, which creates an array object and then adds an item to it, and then the Array items are joined and converted to a String and stored in the array_store Hidden Field and the PostBack is performed.
Then inside the JavaScript window load event handler, the contents of the array_store Hidden Field is displayed in HTML SPAN.
<script type="text/javascript">
var array_store;
window.onload = function () {
array_store = document.getElementById("array_store");
document.getElementById("array_disp").innerHTML = array_store.value;
};
function UpdateArray() {
var arr;
if (array_store.value == "") {
arr = new Array();
} else {
arr = array_store.value.split(",");
}
arr.push((arr.length + 1).toString());
array_store.value = arr.join(",");
};
</script>
Server Side
On Server Side a protected string variable (ArrayStore) is created, so that it can be accessed in the ASPX page too.
The value of the array_store Hidden Field is fetched from the Request.Form collection and is set in the ArrayStore variable.
C#
protected string ArrayStore = "";
protected void Page_Load(object sender, EventArgs e)
{
this.ArrayStore = Request.Form["ArrayStore"];
}
VB.Net
Protected ArrayStore As String = ""
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
Me.ArrayStore = Request.Form("ArrayStore")
End Sub
Screenshot
![Persist JavaScript variables and objects across PostBack in ASP.Net]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
