If, there is no understanding of the problem, please first read 30 minutes master without refreshing Repeater.
Sample code Download: Http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar
This article will explain in more detail how to use the Repeater control in the following table of contents:
* Prepare
* Define a child View sample
* Toggle Child View state
* Define Child View Container
Sample Picture:
Get ready
Please refer to the preparation in Http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.
Defining a child View sample
The repeater displayed in repeater is called a child view, each of which is a copy of the Child View sample, and displays different data according to the criteria. The definition of a child view sample is nothing special, such as:
Copy Code code as follows:
<je:repeater id= "< sub view id>" runat= "Server"
Filterfield= < sub-view search Fields > >
</je:Repeater>
<je:repeater id= "Picturerepeater" runat= "Server"
filterfield= "[' url ']"
Fillasync-url= "Webservice.asmx"
Fillasync-methodname= "Getgooglepicture" >
<ItemTemplate>
<div>
<span class= "url" >#{url}</span>
<br/>
<br/>
#{picture}
</div>
</ItemTemplate>
</je:Repeater>
In most cases, you need to define the Filterfield attribute for a child view sample, which is the field or condition used to search for the child view data, where we added the URL as a condition, so the code that returns the data in the background can be written like this:
Copy Code code as follows:
[WebMethod]
Public sorteddictionary<string, object> getgooglepicture (string url)
{
Back to JSON
}
Because only one row of data is returned, you do not have to add pageindex and pagesize parameters.
For information on how to return JSON, refer to using the ASP.net generic handler or WebService to return JSON, and this example writes all of the code under. NET 4.0.
Toggle Child View State
If you need to control child view switching in Repeater, close and open, you can use Shiftview, Collapseview, Expandview three functions, such as:
Copy Code code as follows:
Je-<javascript event name >= "Shiftview, ' < sub view id> ' [,< child view search field value N>]"
<div id= "List" >
<je:repeater id= "Googlerepeater" runat= "Server"
Selector= "' #list '" pagesize= "2" isvariable= "true"
Fillasync-url= "Webservice.asmx"
Fillasync-methodname= "Searchgoogle" >
<ItemTemplate>
<div class= "Picture" >
<div
je-button= "label= ' more ';"
je-onclick= "Shiftview, ' picturerepeater ', ' #{url} '" >
</div>
<div je-id= "Picturerepeater" style= "Display:none;" >
</div>
</div>
</ItemTemplate>
</je:Repeater>
</div>
Take Shiftview as an example, the first parameter is the ID of the child view, and the subsequent argument is the condition used to search for the child view data, and the field URL as a parameter corresponds to the URL in the Filterfield property of the child View sample. If you have more criteria, you can continue adding, in order you need to be the same as the Child View sample Filterfield property.
The Expandview method is similar to the Shiftview, with different expandview opening the child view, and Shiftview switching the open state of the child view.
The Collapseview method is to turn off the child view without passing the condition.
By default, when a child view is first opened, the Fill method is automatically called to populate the data, and the subsequent opening shows the existing data and is no longer refreshed.
To define a child view container
In addition to defining a child view sample, you also need to define a child view container in the row template, in the previous code:
Copy Code code as follows:
Je-id= "< sub view id>"
<ItemTemplate>
<div class= "Picture" >
<div je-id= "Picturerepeater" style= "Display:none;" >
</div>
</div>
</ItemTemplate>
Binding to a child view ID through Je-id binds the element as a container for the child view, and the child view is displayed in the destination container.
The Toume considers the shutdown state so that the child view container is hidden at the beginning by style= "Display:none."
jqueryelement is an Open-source shared code that can be downloaded from a DLL or source code on a http://code.google.com/p/zsharedcode/wiki/Download page.
actual Process Demo: http://www.tudou.com/programs/view/uVx2BBMHgOQ/, recommended Full-screen viewing.
Welcome to Panzer Open Source project, http://zsharedcode.googlecode.com/, which contains Iebrowser control WebBrowser perform various JS and jQuery scripts as well as recording functions and jQueryUI The ASP.net control jqueryelement.
