我的计划是使用ASP MVC 3创建一个双窗格页面。左窗格应该是一个小的过滤器窗格,右边是主要内容,显示一个对象列表(比如产品)。
最初所有产品都会显示,因为没有应用过滤器。选择“仅红色”时,列表中仅显示红色产品。在进一步选择价格范围时,只会显示该价格范围内的产品。
从功能上来说,计划是将过滤窗格实现为带有复选框的树视图(以便能够深入查看越来越多的特定过滤选项),从图形上看,它可能会以某种方式得到增强,以提高可用性。
在筛选器窗格和主列表之间实现耦合的最佳方法是什么?一切都应该在服务器端工作,但当然应该尽可能使用javascript(jQuery)进行直接反馈。
最简单的方法可能是使其紧密耦合解决方案,使用自定义构建的javascript调用特定的Asp MVC操作(回退到表单帖子)。可行,当然,但如何使解决方案可重用?在向前和向后导航时不放松所有过滤数据会很好,我想GET参数是唯一可行的方法吗?
是否有任何最佳实践,任何指南或基于此的任何内容,以便为过滤创建一个漂亮的模块化结构。
答案 0 :(得分:2)
维克多,我最近不得不解决同样的问题。我不承诺这是最好的方式,但它非常清楚,甚至可以在JavaScript被禁用的情况下运行良好(谁甚至会这样做?)。
使用所有可选字段的搜索选项(例如“仅红色”)创建一个调用操作。
对于相同的表单,为事物添加空的隐藏值而不是直接作为字段(分页,排序......)
使用优秀且易于使用的JQuery.Forms(http://www.malsup.com/jquery/form/)设置您的表单,使您通过JQuery提交表单(所有表单值都将是在表单提交时以JSON身份传递。
让你的back / next / paging / sorting链接通过查询(no-JS fallback)传递它们各自的值,并使用JQuery捕获它们的点击事件。这些链接上的JQuery单击事件应该将链接传递的值的值(页码,排序列名...)分配给表单中相应的隐藏字段并调用submit(感谢Jquery.Forms将通过AJAX)。
配置JQuery.Forms时,可以定义回调方法。在回调方法中,取结果(您的操作返回的HTML应包含已过滤+已排序+分页的结果)并替换文档(如果您使用了部分操作+视图,则替换为DIV)。
结果是一个JQuery解决方案,在JS关闭时有效。除了连接事件处理程序之外,您还可以编写非常少的JS代码。
我不确定它是否有用但是在MVC 3中你可以从视图中访问一个名为IsAjax的属性,这样你就可以在从AJAX调用时为服务器提供稍微不同的视图。
干杯