Asp.net 30-minute master of refreshing Repeater

Download the sample code:/201109/yuanma/JQueryElementTest.rar
The content in this article is as follows:
* Preparation
* Main Functions
* Bind Fields
* Bind attributes
* Basic settings
* Set pagination
* Set Fields
* Set the called server Method
* Request/return data format
* Fill/search
* Update
* Delete
* New
* Line status description
* Sorting status description
* Set a template
* ItemTemplate
* UpdatedItemTemplate/InsertedItemTemplate
* RemovedItemTemplate
* EditItemTemplate
* FilterTemplate/NewItemTemplate
* HeaderTemplate/FooterTemplate/EmptyTemplate
* Special binding
* Je-id
* Je-<javascript event name>
* Je-class
* Je-checked/selected/readonly
* Je-value
* Je-<jQueryUI plug-in Name>
* Events
* Client Method
Example Repeater image:

Preparation
Make sure you have downloaded the latest JQueryElement version in the http://code.google.com/p/zsharedcode/wiki/Download.
Use commands to reference the following namespace:

Copy codeThe Code is as follows: <% @ Register Assembly = "zoyobar. shared. panzer. JQueryElement"
Namespace = "zoyobar. shared. panzer. ui. jqueryui"
TagPrefix = "je" %>
<% @ Register Assembly = "zoyobar. shared. panzer. JQueryElement"
Namespace = "zoyobar. shared. panzer. web. jqueryui"
TagPrefix = "je" %>

In addition to namespaces, you also need to reference jQueryUI scripts and styles that can be downloaded in the http://jqueryui.com, for example:Copy codeThe Code is as follows: <link type = "text/css" rel = "stylesheet" href = "[style path]/jquery-ui-1.8.15.custom.css"/>
<Script type = "text/javascript" src = "[script path]/jquery-1.6.2.min.js"> </script>
<Script type = "text/javascript" src = "[script path]/jquery-ui-1.8.15.custom.min.js"> </script>
<Script type = "text/javascript" src = "[script directory]/jquery. ui. datepicker-zh-CN.js"> </script>

Main functions
Bind Fields
In a row template, You can bind fields in the form of # {<field Name>}, for example:Copy codeThe Code is as follows: <ItemTemplate>
<Span >#{ id} </span>
<Span >#{ realname} </span>
<Span >#{ age} </span>
</ItemTemplate>

Fields can also be bound to tags, such:Copy codeThe Code is as follows: <ItemTemplate>
<Span >#{ id} </span>
<Span title = "# {realname}" >#{ realname} </span>
<Span >#{ age} </span>
</ItemTemplate>

Bind attributes
Attributes can be bound to all templates. The syntax is @ {<attribute name>}. For example:
<FooterTemplate>
Page @ {pageindex}/@ {pagecount}, entry @ {itemcount}
</FooterTemplate>
Basic settings
The Selector attribute of the Repeater is a javascript expression that acts as a Selector, writing can refer to the http://jquery.com, And the element corresponding to the Selector will be presented as the final repeater on the page, for example:Copy codeThe Code is as follows: <table id = "list"> </table>
<Je: Repeater ID = "studentRepeater" runat = "server"
Selector = "'# list'">
/*...*/
</Je: Repeater>

If the IsVariable attribute is set to True, a javascript variable with the same name as ClientID is generated on the client. For example:Copy codeThe Code is as follows: <je: Repeater ID = "studentRepeater" runat = "server"
IsVariable = "true">
</Je: Repeater>
<Script type = "text/javascript">
$ (Function (){
StudentRepeater. _ repeater ('fill ');
});
</Script>

Because the ClientID and ID on this page are the same, you can access repeater through studentRepeater. in addition, you can also use the JQueryScript control and the embedded syntax [% id: studentRepeater %] to ensure that pages with different ClientID and ID can also access the repeater variable.
Set pagination
You can use the PageSize attribute of Repeater to set how many pieces of data are contained on each page, and set the initial page number for the PageIndex attribute. The default value of PageIndex is 1.
Set Fields
The Field attribute of Repeater indicates the Field to be bound. It is an array of javascript strings, such as ['id', 'realname', 'age']. If the Field attribute is not set, it is determined by the Data filled for the first time, but this will lead to the failure to create a new one without data.
FilterField indicates the field used for search. It is also a javascript string array. FilterFieldDefault is the default value when the search field value is null or '', for example: ['', '', 0].
SortField indicates the fields involved in sorting, for example, ['id'].
Set the called server Method
You can use Async to set how to call the server-side method. If WebService is called, you need to set MethodName. If it is a general processing program like ashx, MethodName is ignored. For example:Copy codeThe Code is as follows: <je: Repeater ID = "studentRepeater" runat = "server"
FillAsync-Url = "<fill method address>"
FillAsync-MethodName = "<Fill Method Name>"
UpdateAsync-Url = "<update method address>"
UpdateAsync-MethodName = "<update Method Name>"
InsertAsync-Url = "<New Method address>"
InsertAsync-MethodName = "<New Method Name>"
RemoveAsync-Url = "<Delete method address>"
RemoveAsync-MethodName = "<Delete Method Name>"
>
/*...*/
</Je: Repeater>
<Je: Repeater ID = "studentRepeater" runat = "server"
FillAsync-Url = "Student. aspx"
FillAsync-MethodName = "Fill"
UpdateAsync-Url = "Student. aspx"
UpdateAsync-MethodName = "Update"
InsertAsync-Url = "Student. aspx"
InsertAsync-MethodName = "Insert"
RemoveAsync-Url = "Student. aspx"
RemoveAsync-MethodName = "Remove"
>
/*...*/
</Je: Repeater>

If you need to pass more parameters for the method, you can use the following form:Copy codeThe Code is as follows: <je: Repeater ID = "studentRepeater" runat = "server">
<FillAsync Url = "<fill method address>" MethodName = "<Fill Method Name>">
<ParameterList>
<Je: Parameter Name = "<Parameter 1>"
Type = "Expression"
Value = "<Value 1>"
Default = "<Default value 1>"/>
<Je: Parameter Name = "<Parameter Name 2>"
Type = "Selector"
Value = "<selector 2>"
Default = "<Default value 2>"/>
/*...*/
</ParameterList>
</FillAsync>
</Je: Repeater>
<Je: Repeater ID = "studentRepeater" runat = "server">
<FillAsync Url = "Student. aspx" MethodName = "Fill">
<ParameterList>
<Je: Parameter Name = "ws"
Type = "Expression"
Value = "website"
Default = "'-'"/>
<Je: Parameter Name = "year"
Type = "Selector"
Value = "'# year '"
Default = "2011"/>
/*...*/
</ParameterList>
</FillAsync>
</Je: Repeater>

By adding Parameter, you can pass more parameters. When Name is the Parameter Name and Type is Expression, Value contains a javascript Expression, in the example, Value = "website" indicates taking the website Value of the javascript variable. You can also set it to a constant, for example, Value = "'www .google.com '" or Value = "100 ", when Type is Selector, the javascript expression in Value will be used as the Selector, the Selector can be written with reference to the http://jquery.com, the Value of the element corresponding to the Selector will be used as the Value of the parameter. default is the Default javascript expression. When the parameter value is null or '', the Default value is used.
Format of request/returned data
Fill/search
For filling or searching operations, take WebService as an example. The server receives the following parameters: pageindex page number. pagesize contains the number of data entries per page, you can also receive parameters with the same name as a field, use the parameters added by Parameter as search conditions, or use the field parameters used for sorting in the form of <field Name> _ order, there are three sort parameters: "" indicates no sort, "asc" ascending, "desc" descending:
[WebMethod ()]
Public static object <Method Name> (int pageindex, int pagesize
[, <Type n, for example, string> <field or condition name used for search n>]
[, String <name of the field used for sorting m> _ order])
{
}
[WebMethod ()]
Public static object Fill (int pageindex, int pagesize
, String realname, int age
, String id_order)
{
}
The server should also return json data in the following format as the filling data, where _ success defaults to true, itemcount can be omitted, but pagecount page numbers cannot be calculated.Copy codeThe Code is as follows :{
"_ Success": <Boolean value indicating success or failure, true or false>,
"Rows": <the current page contains a javascript array of row data>,
"Itemcount": <total number of rows>
}
{
"_ Success": true,
"Rows ":
[
{"Id": 1, "realname": "jack", "age": 20 },
{"Id": 2, "realname": "tom", "age": 21}
],
"Itemcount": 120
}

In. NET 4.0, json can be returned using the anonymous type, for example:Copy codeThe Code is as follows: [WebMethod ()]
Public static object Fill (/* parameter */)
{
//...
List <object> students = new List <object> ();
Students. Add (new {
Id = 1,
Realname = "jack ",
Age = 20
});
//...
Return new {_ success = true, rows = students. ToArray (), itemcount = 120 };
}

Update
Delete
New
The above three due to space reasons cannot be listed in all, if necessary please refer to: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
Line status description
In the client's javascript script, there are four types of row statuses: unchanged, updated, inserted new, and removed deleted.
Sorting status description
In client javascript scripts, there are four sorting statuses: none, default, asc, and desc.
Set Template
In various Repeater templates, you can set the final html code displayed by Repeater. These html code should be complete and valid, and do not use single quotes directly. You can escape single quotes, otherwise, the final display may be abnormal.
ItemTemplate
ItemTemplate is a type of row template that can display rows in the unchanged state. If UpdatedItemTemplate or InsertedItemTemplate is not set, the rows in the updated or inserted State are also displayed in the ItemTemplate. Example:Copy codeThe Code is as follows: <ItemTemplate>
<Tr>
<Td>
# {Id}
</Td>
<Td>
# {Realname}
</Td>
<Td>
# {Age}
</Td>
<Td>
/* Edit and delete buttons */
</Td>
</Tr>
</ItemTemplate>

UpdatedItemTemplate/InsertedItemTemplate
Unlike ItemTemplate, UpdatedItemTemplate and InsertedItemTemplate are used to display rows in the updated and inserted statuses. They are mainly used to display rows in different statuses in different styles, however, you can also use the simpler je-class to achieve the same effect. For example:Copy codeThe Code is as follows: <UpdatedItemTemplate>
<Tr style = "font-weight: bold;">
<Td>
# {Id}
</Td>
<Td>
# {Realname}
</Td>
<Td>
# {Age}
</Td>
</Tr>
</UpdatedItemTemplate>
<InsertedItemTemplate>
<Tr style = "color: green;">
<Td>
# {Id}
</Td>
<Td>
# {Realname}
</Td>
<Td>
# {Age}
</Td>
</Tr>
</InsertedItemTemplate>

RemovedItemTemplate
EditItemTemplate
FilterTemplate/NewItemTemplate
HeaderTemplate/FooterTemplate/EmptyTemplate
The above four due to space reasons cannot be listed in all, if necessary please refer to: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
Special binding
Je-id
You can use je-id = "<field Name>" to bind a special id. You can use the input element in the row template, FilterTemplate, and NewItemTemplate. in EditItemTemplate, the input of the specified je-id will contain the new value of this field. in FilterTemplate, the input of the specified je-id contains the values of the fields used for search. These fields should be included in the FilterField attribute. in NewItemTemplate, the input of the specified je-id contains the value of the field to be created.
Je-<javascript event name>
You can use je-<javascript event name> = "<behavior Name>" to bind a special operation to the event. it can be used in various templates. common actions include: inedit start editing, endedit cancel editing, update save update, remove Delete, toggleselect switch selected status, insert new, and filter search, togglesort switches the sorting. the first five can only be used in row templates. insert can be used in NewItemTemplate, filter can be used in FilterTemplate, and togglesort can be used in HeaderTemplate. For example:Copy codeThe Code is as follows: <ItemTemplate>
<Tr>
<Td>
# {Id}
</Td>
<Td>
# {Realname}
</Td>
<Td>
# {Age}
</Td>
<Td>
<Span je-onclick = "beginedit"> edit </span>
<Span je-onclick = "remove"> Delete </span>
</Td>
</Tr>
</ItemTemplate>
<EditItemTemplate>
<Tr>
<Td>
# {Id}
</Td>
<Td>
<Input type = "text" je-id = "realname" value = "# {realname}" class = "textbox"/>
</Td>
<Td>
<Input type = "text" je-id = "age" value = "# {age}" class = "textbox"/>
</Td>
<Td>
<Span je-onclick = "endedit"> cancel </span>
<Span je-onclick = "update"> Save </span>
</Td>
</Tr>
</EditItemTemplate>

It must be noted that togglesort also needs to specify a parameter to indicate the field for switching sorting. This field has been set in SortField, for example, je-onclick = "togglesort, realname ".
Je-class
You can use je-class = "<style>" to bind a special style to the event. je-class can be used in various templates. Common styles include: {header} indicating ui-widget-header, {active} indicating ui-state-active, {highlight} indicates ui-state-highlight, {disabled} indicates ui-state-disabled, {error} indicates ui-state-error, {default} indicates ui-state-default, {state} indicates the row status, and {sort} indicates the sorting status, for example:Copy codeThe Code is as follows: <HeaderTemplate>
<Thead je-class = "{header}">
<Tr>
<Td je-onclick = "togglesort, id">
<Span je-class = "{sort, id, ui-icon ui-icon-arrow-1-n icon, ui-icon ui-icon-arrow-1-s icon}">
</Span>
Serial number
</Td>
/*...*/
</Tr>
</Thead>
</HeaderTemplate>
<ItemTemplate>
<Tr je-class = "{state}-item">
/*...*/
</Tr>
</ItemTemplate>

The syntax of {state} and {sort} is {state [, <unchanged row style> [, <new row style> [, <modify row style> [, <Delete row style>] },{ sort, <sorting field> [, <no sorting style> [, <ascending style> [, <descending style>]}. for {state}, if a style of a certain state is not specified, the row state name will be used instead of the style name, for example: {state, new-item }, because the row style has not been changed, if the row state is unchanged, unchanged is returned. for {sort}, if no sorting style is specified, the style name will be replaced by the sorting status.
Je-checked/selected/readonly
In ItemTemplate, je-checked = "selected" And je-onclick = "toggleselect" are used to indicate whether the row is in the selected state. je-selected can be used as the select element in EditItemTemplate, example:Copy codeThe Code is as follows: <ItemTemplate>
<Tr>
<Td>
<Input type = "checkbox"
Je-checked = "selected"
Je-onclick = "toggleselect"
/># {Id}
</Td>
</Tr>
</ItemTemplate>

Je-value
Use je-value = "<search field Name>" in FilterTemplate to bind the initialized search condition.
Je-<jQueryUI plug-in Name>
You can use je-<jQueryUI plug-in Name> = "<property name n >=< property value n>;" in any template to generate a jQueryUI plug-in, currently, only je-button and je-datepicker are supported. Example:Copy codeThe Code is as follows: <EditItemTemplate>
<Tr je-class = "{state}-item">
<Td>
<Input type = "checkbox" je-checked = "selected" je-onclick = "toggleselect"/>#{ id}
</Td>
<Td>
<Input type = "text" je-id = "realname" value = "# {realname}"/>
</Td>
<Td>
<Input type = "text" je-id = "age" value = "# {age}"/>
</Td>
<Td>
<Input type = "text" je-id = "birthday"
Je-datepicker = "dateFormat = 'yy-mm-dd ';"
Value = "# {birthday}"/>
</Td>
<Td>
<Span
Je-button = "label = 'edit'; icons = {primary: 'ui-icon-pemer '};"
Je-onclick = "beginedit">
</Span>
<Span
Je-button = "label = 'delete'; icons = {primary: 'ui-icon-trash '};"
Je-onclick = "remove">
</Span>
</Td>
</Tr>
</EditItemTemplate>

Property settings are consistent with the jQueryUI plug-in properties, you can refer to http://jqueryui.com.
Event
All Repeater events have tag and e parameters. tags are the elements of repeater, and e contains event-related data.
PreUpdate, events before and after Updated update, events before and after PreRemove, events before and after Removed deletion, and events before and after PreInsert and Inserted creation. the e parameters of these events include the row attribute, indicating the row currently involved in the related operation. The e parameters of Updated, Removed, and Inserted also include isSuccess, indicating whether the execution is successful. Example:Copy codeThe Code is as follows: <je: Repeater ID = "studentRepeater" runat = "server"
/*...*/
PreUpdate ="
Function (tag, e ){
If (e. row. realname = ''| e. row. age ='' | e. row. birthday = ''){
$ ('# Message'). text ('fill in the complete information ');
Return false;
}
}
"PreInsert ="
Function (tag, e ){
If (e. row. realname = ''| e. row. age ='' | e. row. birthday = ''){
$ ('# Message'). text ('fill in the complete information ');
Return false;
}
}
"PreRemove ="
Function (tag, e ){
If (! Confirm ('delete? '+ e. row. realname )){
Return false;
}
}
"Updated ="
Function (tag, e ){
$ ('# Message'). text ('update' + e. row. realname + (e. isSuccess? 'Success': 'failed '));
}
"Inserted ="
Function (tag, e ){
$ ('# Message'). text ('new' + e. row. realname + (e. isSuccess? 'Success': 'failed '));
}
"Removed ="
Function (tag, e ){
$ ('# Message'). text ('delete' + e. row. realname + (e. isSuccess? 'Success': 'failed '));
}
">
/*...*/
</Je: Repeater>

PreFill, Filled events before and after filling, PreExecute, Executed events before and after any operation, PreCustom, Customed events before and after the custom operation, the parameter e contains the command attribute to indicate the name of the custom operation, PreSubStep, and SubStepped before and after the distribution operation. The parameter e contains the count attribute to indicate the total number of items, and the completed attribute to indicate the number of rows that have been processed.
Navigable when the navigation availability changes, the parameter e contains the prev attribute to indicate whether the previous page exists, and the next attribute to indicate whether there is a next page. Blocked event when an operation is Blocked.

Client Method

This item cannot be listed in full due to space reasons, if necessary please refer to: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.

Download sample code:Http://zsharedcode.googlecode.com/files/JQueryElementTest.rar.

Demo of the actual process:Http://www.tudou.com/programs/view/GQeh0ZIJ0RY/, full screen viewing is recommended.

Welcome to panzer open source project, http://zsharedcode.googlecode.com/, which includes IEBrowser control WebBrowser to execute various js and jQuery scripts as well as recording functions and jQueryUI Asp.net controls JQueryElement.