如何在 asp.net 页面上获取元素的样式

Question

我有一个带有手风琴 javascript 的管理页面来显示/隐藏 div。

<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>

当他们删除一个项目时，页面会刷新并且他们会回到折叠状态。 我想让它记住哪些是开放的，哪些是关闭的。

手风琴 javascript 给出了 div style="display: none"或style="display: block"

有没有办法在重新加载页面之前获取样式并在再次加载后应用它？

Answer 1

如果您想查看 styles 并在页面上积极更改，我建议使用 Firebug（FireFox 插件）。

至于保存state，有两种方法。 第一种是 AJAX 方法。 第二种只有 JS，基于 cookie 的方法。

对于 AJAX 方法，您需要编写一个 JS function ，只要 state 更改就会触发。 然后，此方法在快速的幕后查询中将所有可折叠选项的 state 发送到服务器。 然后，服务器将此信息保存到 session 变量中。 然后，当页面重新加载时，服务器可以为页面上的每个项目植入一个带有最后已知 state 信息的 JS 数组。

对于第二种方法，您必须设置一个 cookie，该 cookie 包含所有项目的 state 变量。 这可以是一个简单的数组。 这与 AJAX 方法的工作方式相同，只是数据保存在客户端浏览器而不是服务器上。 您从 cookie 数组而不是服务器数组中获取 state。

对于其中任何一个，我建议使用 JQuery 库。 对于 cookie 方法，我建议使用 JQuery 的 Cookie 插件（http://plugins.jquery.com/project/Cookie）。 这是一篇关于此的快速操作文章： http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html

JQuery - http://jquery.com/
JQuery UI- http://jqueryui.com/
Visual JQuery（一个伟大的，易于使用的 JQuery 参考） - http://visualjquery.com/
萤火虫 - http://getfirebug.com/
Firefox - （没有它永远不要离开家） http://www.mozilla.com/en-US/firefox/fx/

Answer 2

为此，我将处理手风琴的change事件并将更新的值存储在 html5 本地存储或 cookie 中。 加载页面时，只需检查保存的值是否存在并恢复手风琴的 state。

如果您使用 jqueryui 的手风琴， create和change事件应该可以满足您的需求。

Answer 3

抱歉，我没有看到 mvc 标签。

您必须使用 javascript 和 cookies 来执行此操作，以尽量减少对用户体验的影响（html5 存储会带来提示）。

Answer 4

ASP.NET AJAX 框架使用隐藏字段来实现这一点； 虽然您可能不会使用它，但隐藏有很多优点。 它们可以存储任何类型的数据并在服务器上序列化，它们回发到服务器并可以通过匹配名称由action方法处理。

HTH。

Answer 5

您可以很好地将当前显示在隐藏字段中的 div 的 ID 存储起来。 当然，这需要一点 Javascript 但如果文件是runat="server"你应该能够在服务器端轻松访问它。 根据该值，您可以执行隐藏/显示逻辑。

IMO，隐藏字段仍然是客户端与服务器共享其 state 的最简单方法。