asp.net webforms和jquery:如何在回发之间保存/恢复jquery状态?

我正在使用jquery构建一个asp.net webforms(3.5 sp1)应用程序,我可以在其中为UI设置动画,更改其状态。 它一直运行良好,直到我开始做回发,其中UI显然将自身重置为其初始状态。

所以我的问题是,在回发之间保存和恢复jquery / UI状态的最佳实践是什么?

谢谢,埃吉尔。

更新:非常感谢大家,很棒的投入,糟糕的是我不能将多个答案标记为“答案”。

我通常通过AJAX在会话中存储菜单状态或filter(div中的输入集)可见性等服务器端。 当菜单展开或显示filter时,单击处理程序将向Web服务发出AJAX事件,该服务将记录菜单的状态或过滤用户会话中的可见性。 在回发中,我使用与每个菜单/filter对应的会话变量,通过CSS设置它的初始状态。 我发现这是更好的用户体验,因为如果您在客户端进行更改,则在加载后通过javascript更新页面时不会闪烁

示例 – 因为我在路上这不是项目中的实际代码,可能不完整。 使用jQuery。 Web服务的URL将取决于您如何实现Web服务。 我正在使用ASP.NET MVC(主要是)因此我的控制器动作。

 
> ...

服务器端代码

 [AcceptVerbs( HttpVerbs.POST )] [Authorization] public ActionResult SetFilterVisibility( string name, bool visible ) { Session[name] = visible; return Content( string.Empty ); // not used... } [AcceptVerbs( HttpVerbs.GET )] [Authorization] public ActionResult SomeAction( int id ) { ... ViewData["searchFilterVisibility"] = Session["searchFilter"]; ... return View(); } 

我认为你指的是在回发之间保存ui小部件的状态(而不是保存用户首选项)。

在特定的一系列交互之后,许多状态仅适用于特定小部件,特定用户(例如,展开此树节点,单击该网格行等)。 这些东西不必进入数据库,甚至不需要进入会话,除非在页面加载中恢复状态对您来说很重要。

所有那些我倾向于放入一两个对象的东西,例如:

 treeState.expandedNodeId = 'foo'; gridState.selectedRowIndex = 3; 

然后我定期将它保存在隐藏的字段中:

 $('.treeState').val(Sys.Serialization.JavaScriptSerializer.serialize(treeState)); 

等等

该值将与回发结果一起发回,我只是deserialize它并从保存的值中恢复我的小部件。 很烦人,但效果很好。

你有两个选择:

  • 客户端cookie
  • 通过回发或webmethod调用存储UI设置服务器端

第二个选项需要更多的努力,但允许您提供可以应用于用户而不管客户端计算机的“可移植”UI设置。 如果设置是’扔掉’,我会去客户端cookie。

如何使用javascript和cookies:

http://techpatterns.com/downloads/javascript_cookies.php

我通常通过回发将UI设置服务器端存储在数据库中,但是如果用户通过jQuery更改其UI并且您希望保留这些更改,我可能会这样做:

  • 将脚本管理器添加到您的aspx页面
  • 设置EnablePageMethods =“true”
  • 在代码隐藏中创建一个WebMethod
  • 在更新UI的jQuery方法中,添加对WebMethod的调用并传回UI设置
  • 存储传递给数据库中WebMethod的任何设置
  • 然后当用户下次访问该页面时,要么获取设置并尽可能多地填充控件服务器端,要么使用jQuery ready方法调用另一个从数据库中获取UI设置的web方法,传递它们回到jQuery,允许你填充控件。

这是关于jQuery和WebMethod调用的一篇不错的文章:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

您需要注意的问题是EventValidation; 如果您获取页面生命周期范围之外的控制值,然后期望在回发时使用这些设置,您将遇到麻烦。 例如,通过webmethod向下拉列表添加值将在回发时抛出错误,除非在构建页面时这些值也添加到下拉列表中。

我正在使用HTML5存储,您可以选择如何持久化(本地存储或每个浏览器会话)。 如果您担心非HTML5,可以使用Amplify.Storage。 缺点是你必须编写代码来调用save / read。 我正在寻找一种自动化的方法,如果有人有任何想法,那么请说。 谢谢。