jQuery Data() Method
Although jQuery has many useful methods, one that can save server memory from those expensive, and often unnecessary session variables to store state is data(). The jQuery data() method makes use of named value pairs to add any string, number, array, and other data types to an HTML page element.
Let's start with the page elements within the <form> tags in the ASP.NET page:
<div>A div - Set the div to a string My Name or integer 1 value with the 2nd and 3rd buttons, and then get the value stored in the div (named object) with the 1st Get object button. Remove the value with the last Remove button.</div> <button>Get "object" from the div</button> <button>Set "object" to "My Name"</button> <button>Set "object" to 1</button> <button>Remove "object" from the div</button> <p>The "object" value of this div is <span>?</span></p>
The div will be used by the data() method to add the values. The first value to add is a string "My Name" set by the second button of the four buttons. The first button can then be clicked to show the user that the string can be retrieved. The third button click will add a 1 to the div. Note that each time the value pair is "object" plus the value itself. The fourth button can remove the value from the div.
The form load event is used to add the jQuery code through a Client Script Manager. The page load and code-behind methods are:
protected void Page_Load(object sender, EventArgs e) {
this.GenerateStoreDataScript(); }
//--------------------------------------------------------------------------- /// <summary> /// Method Name: GenerateStoreDataScript /// Description: Loads javascript to Store Data with jQuery Script /// </summary> //--------------------------------------------------------------------------- public void GenerateStoreDataScript() {
string jScript = string.Empty; jScript = "<script language='javascript' type='text/javascript'>window.onload = (function(){try{" + "$('button').click(function(e) {" + " var value; " + " switch ($('button').index(this)) { " + " case 0 : " + " value = $('div').data('object');" + " break;" + " case 1 : " + " $('div').data('object', 'My Name');" + " value = 'Stored!';" + " break;" + " case 2 : " + " $('div').data('object', 1);" + " value = 'Stored!';" + " break;" + " case 3 : " + " $('div').removeData('object');" + " value = 'Removed!';" + " break;" + " } " + " $('span').text('' + value); " + " }); " + "}catch(e){}}); " + "</script>"; if (!ClientScript.IsClientScriptBlockRegistered("StoreDataScript")) {
ClientScript.RegisterClientScriptBlock(this.GetType(), "StoreDataScript", jScript); }
}
When the form loads, the user sees:
Clicking the "Set object to My Name" button, adds the value pair "object" and "My Name" to the div. The feedback to the user is through the span shown initially as the "?".
As can be seen above, the value pair has been added to the div (client-side), and when the user clicks the "Get object from the div" button:
Clicking on the "Remove object from the div" button, removes the value pair from the div:
The value pair is now undefined. Setting the object to 1 will be shown later to be utilized as a Dirty Flag to show the user that a value has been changed on the form.
