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。 我正在寻找一种自动化的方法,如果有人有任何想法,那么请说。 谢谢。