How do you get the style of an element on an asp.net page

Question

I have an admin page with an accordion javascript to show/hide divs.

<div class="accordion">
    <h2>Pending</h2>
    <div id="pending" class="accordion-item">PARTIALVIEW</div>
    <h2>Current</h2>
    <div id="current" class="accordion-item">PARTIALVIEW</div>
    <h2>All</h2>
    <div id="all" class="accordion-item">PARTIALVIEW</div>
</div>

when they delete an item, the page refreshes and they are back to collapsed. I want to have it remember which ones were open and which ones were closed.

the accordion javascript gives the div style="display: none" or style="display: block"

is there a way to get what the style is before the page is reloaded and apply it after it is loaded again?

Answer 1

If you want to see the styles and changes actively on the page I recommend using Firebug (a FireFox plugin).

As for saving the state, there are two approaches. The first is an AJAX approach. The second a JS only, cookie-based approach.

For the AJAX method you need to write a JS function that fires off whenever the state is changed. This method then sends the state of all of the collapsible options to the server in a quick behind-the-scenes query. The server then saves this information to a session variable. Then when the page is reloaded the server can plant a JS array with the last known state information for each item on the page.

For the second method you must set a cookie that holds a variable with the state of all of the items. This can be a simple array. This works the same as the AJAX method except that the data is saved on the client-side browser instead of the server. You get the state from the cookie array instead of the server array.

For either one of these I would recommend using the JQuery library. For the cookie method I would recommend using the Cookie plugin for JQuery (http://plugins.jquery.com/project/Cookie). Here is a quick howto article about this: http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html

JQuery - http://jquery.com/
JQuery UI - http://jqueryui.com/
Visual JQuery (a great, easy to use reference for JQuery) - http://visualjquery.com/
Firebug - http://getfirebug.com/
Firefox - (never leave home without it) http://www.mozilla.com/en-US/firefox/fx/

Answer 2

to accomplish this i would handle the accordion's change event and store updated values in html5 localstorage or a cookie. when the page is loaded simply check for the existence of the saved values and restore the accordion's state.

if you're using jqueryui's accordion, the create and change events should give you what you need.

Answer 3

Sorry I didn't see the mvc tag.

You'll have to do this with javascript and cookies for the least impact on the user experience (html5 storage would bring up a prompt).

Answer 4

The ASP.NET AJAX framework uses hidden fields to accomplish this; while you may not be using this, hiddens have many advantages. They can store any kind of data and serialized on the server, they postback to the server and can be processed by the action method by matching the name.

HTH.

Answer 5

You could very well store the ID of the div that is currently being displayed in a hidden field. Of course that would require a little bit of Javascript but if the filed is runat="server" you should be able to access it easily at server side. Depending on that value you could do your hide/show logic.

IMO, hidden fields remain the easiest way for the client to share its state with the server.