使用jQuery转发器扩展页面预览,如 Google

分享于 

5分钟阅读

Web开发

  繁體 雙語

原来的帖子可以在这里找到,这里是

简介/目录

由于限制时间,同步不能在多个博客文章中保证。 在以下地址中,你可以查看电子邮件内容,希望你了解:

下载示例:JQueryElementDemo-en.zip,该目录为 /repeater/Default.aspx。

本文将详细介绍如何使用 Repeater 控件中的子视图,该目录如下所示:

准备

请查看 prepare prepare的准备部分 Grasp Grasp ASP.NET jQuery Repeater Repeater。

定义子视图示例

显示在 Repeater 中的Repeater 称为子视图,子视图是子视图的副本,并根据条件显示不同的数据。 子视图示例的定义没有特殊,例如:

<je:RepeaterID="<child view ID>"runat="server"FilterField="<child view search field>"></je:Repeater><je:RepeaterID="pictureRepeater"runat="server"FilterField="['url']"FillAsync-Url="webservice.asmx"FillAsync-MethodName="GetGooglePicture"><ItemTemplate><div><spanclass="url">#{url}</span><br/><br/> #{picture}
 </div></ItemTemplate></je:Repeater>

在大多数情况下,需要为子视图示例定义属性 FilterField,即用于在代码 上面 中搜索子视图的条件。

[WebMethod]public SortedDictionary<string, object> GetGooglePicture ( string url )
{
 // Return JSON}

因为这里只返回一行,所以你不必添加 pageindexpagesize 参数。

关于如何返回 JSON,请参考在不同的.NET 版本返回 JSON。 这里示例的所有代码都使用 .NET 4.0 编写。

switch 子视图

如果需要 switch,请关闭 Repeater 控件中的子视图,可以使用 shiftviewcollapseviewexpandview 三种方法,如:

//je-<javascripteventname>="shiftview,'<childviewID>'[,<searchfieldvaluen>]"<divid="list"><je:RepeaterID="googleRepeater"runat="server"Selector="'#list'"PageSize="2"IsVariable="true"FillAsync-Url="webservice.asmx"FillAsync-MethodName="SearchGoogle"><ItemTemplate><divclass="picture"><divje-button="label='More';"je-onclick="shiftview,'pictureRepeater','#{url}'"></div><divje-id="pictureRepeater"style="display: none;"></div></div></ItemTemplate></je:Repeater></div>

例如 shiftview 参数是子视图的ID,以下参数是搜索子视图的条件,例如在示例中搜索子视图的条件。子视图示例的属性 FilterField 中的URL。 如果有更多条件,则可以继续添加,但条件的顺序必须与子视图的FilterField 属性相同。

expandview 方法和 shiftview 是相似的,expandview 将打开子视图,而 shiftview 将 switch 视图的打开状态。

collapseview 方法将关闭子视图,它不需要通过条件。

默认情况下,当第一次打开子视图时,它将自动调用 fill 方法,然后 open 操作不再刷新数据。

定义容器

除了定义子视图外,还需要在行模板中定义子视图的容器:

//je-id="<childviewID>"<ItemTemplate><divclass="picture"><divje-id="pictureRepeater"style="display: none;"></div></div></ItemTemplate>

je-id 设置为子视图的in,元素可以绑定为子视图的容器,子视图将显示在目标容器中。

由于默认情况下,子视图在默认情况下处于关闭状态,所以我们将容器隐藏在 style="display: none;" 开头。


rep  EXP  PRE  Using  预览  Expand  
相关文章