asp.net 30 minutes to master no refresh Repeater_jquery

Sample code download: /201109/yuanma/JQueryElementTest.rar
The content included in this article is as follows:
* Preparation
* Main functions
* Binding fields
* Binding attributes
* Basic settings
* Set paging
* Set fields
* Set the server method to be called
* Request/return data format
* Fill/search
* Update
* Delete
* New
* Row Status Description
* Sort Status Description
* Set Template
* ItemTemplate
* UpdatedItemTemplate/InsertedItemTemplate
* RemovedItemTemplate
* EditItemTemplate
* FilterTemplate/NewItemTemplate
* HeaderTemplate/FooterTemplate/EmptyTemplate
* Special binding
* je-id
* je-
* je-class
* je-checked/selected/readonly
* je-value
* je-
* event
* client method
Repeater example image:

Preparation
Please make sure you have downloaded the latest version of JQueryElement at http://code.google.com/p/zsharedcode/wiki/Download.
Please use the command to quote the following Namespace:

Copy code The code is as follows:

Namespace="zoyobar.shared.panzer.ui.jqueryui"
TagPrefix="je" %>
Namespace="zoyobar.shared.panzer.web.jqueryui"
TagPrefix="je" %>

In addition to the namespace, you also need to reference the jQueryUI script and Styles can be downloaded at http://jqueryui.com, for example:

Copy the code The code is as follows:

Main functions
Bind fields
In row templates, you can use the form #{} Bind fields, for example:

Copy code The code is as follows:

#{id}
#{realname}
#{age}
< ;/ItemTemplate>

fields can also be bound to tag attributes, such as:

Copy code The code is as follows:

#{id}

#{age}

Bind attribute
in Attributes can be bound to all templates, and the syntax is @{}, for example:

page @{pageindex}/@{pagecount}, @{itemcount} Article

Basic Settings
The Selector attribute of Repeater is a javascript expression, which will be used as a selector. For writing methods, please refer to http://jquery.com. The element corresponding to the selector Will be presented as the final repeater on the page, example:

Copy the code The code is as follows:

Selector="'#list'">
/ * ... */

Set the IsVariable attribute to True, then a javascript variable with the same name as ClientID will be generated on the client, example:

Copy code The code is as follows:

IsVariable="true">

Since the ClientID and ID are the same in this page, the repeater can be accessed through studentRepeater. In addition, you can also use the JQueryScript control and use the inline syntax [%id:studentRepeater%] to ensure that pages with different ClientID and ID can also access the repeater. Variable.
Set paging
Set how many pieces of data each page contains through the PageSize property of Repeater. The PageIndex property sets the initial page number. PageIndex defaults to 1.
Set the field
The Field property of Repeater indicates participation in binding. A certain field in the form of a javascript string array, such as: ['id', 'realname', 'age']. If the Field attribute is not set, it will be determined by the first filled data, but this will result in It cannot be created without data.
FilterField represents the field used for search and is also a javascript string array. FilterFieldDefault is the default value when the value of the search field is null or '', example: ['', ' ', 0].
SortField represents the fields involved in sorting, such as: ['id'].
Set the server-side method to be called
You can use Async to set how to call the server-side method, if you are calling WebService , you need to set the MethodName. If it is a general handler such as ordinary ashx, the MethodName is ignored. Example:

Copy code Code As follows:

FillAsync-Url=""
UpdateAsync-Url=""
UpdateAsync-MethodName=""
InsertAsync-Url=""
InsertAsync-MethodName=""
RemoveAsync-Url=""
RemoveAsync-MethodName=""
>
/* ... */

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"
>
/* ... */

If you need to pass more parameters to the method, you can use the following form:

Copy code The code is as follows:

Type="Expression"
Value=""
Default="" />
Type="Selector"
Value=""
Default="" />
/* ... */






Type="Expression"
Value="website "
Default="'-'" />
Type="Selector"
Value="'#year'"
Default ="2011" />
/* ... */





By adding Parameter, more parameters can be passed. When Name is the parameter name and Type is Expression, the Value contains a javascript expression. Value="website" in the example means taking the value of the javascript variable website , of course, it can also be set as a constant, such as: Value="'www.google.com'" or Value="100". When Type is Selector, the javascript expression in Value will be used as the selector. How to write the selector You can refer to http://jquery.com. The value of the element corresponding to the selector will be used as the value of the parameter. Default is the javascript expression of the default value. When the value of the parameter is null or '', the value in Default will be used. .
Format of request/return data
Fill/search
For filling or search operations, taking WebService as an example, the server will receive the following parameters, pageindex page number, pagesize The number of data items included in each page, and You can receive parameters with the same name as the field or parameters added through Parameter as search conditions, or receive field parameters in the form of _order for sorting. The sorting parameter has three values, "" means no sorting, "asc " Ascending order, "desc" Descending order:
[WebMethod ( )]
public static object ( int pageindex, int pagesize
[, ]
[, string _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 fill data, where __success defaults to true, itemcount can be omitted, but the pagecount page number will not be calculated.

Copy code The code is as follows:

{
"__success": ,
"rows": ,
"itemcount":
}
{
"__success": true,
"rows":
[
{ "id": 1, " realname": "jack", "age": 20 },
{ "id": 2, "realname": "tom", "age": 21 }
],
"itemcount": 120
}

In .NET 4.0 you can use anonymous types to return json, such as:

Copy code The code is as follows:

[WebMethod ( )]
public static object Fill ( /* parameter */ )
{
// ...
List

Update
Delete
Create
Due to space reasons, the above three items cannot be listed in full. If necessary, please refer to: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
Row status description
In the client's javascript script, there are 4 row statuses, namely unchanged (unchanged), updated (updated), inserted (newly created row), removed (removed row).
Sort status description
In the client's javascript script In , there are 4 sorting states, namely none, no sorting or default sorting, asc ascending order, desc descending order.
Set templates
In the various templates of Repeater, you can set the html code finally displayed by Repeater. These The html code should be complete and legal, and do not use single quotes directly. You can escape the single quotes, otherwise the final display may be abnormal.
ItemTemplate
ItemTemplate is one of the line templates. You can Displays the rows in the unchanged state. If UpdatedItemTemplate or InsertedItemTemplate is not set, then the rows in the updated or inserted status are also displayed in the ItemTemplate. Example:

Copy code The code is as follows:

#{id}


#{realname}


#{age}

/* Edit and delete buttons*/

UpdatedItemTemplate/InsertedItemTemplate
Different from ItemTemplate, UpdatedItemTemplate and InsertedItemTemplate are used to display rows with status updated and inserted respectively. They are mainly used to use different styles to display rows with different statuses, but you can also use simpler je-class to achieve the same effect, example:

Copy code The code is as follows:

< ;UpdatedItemTemplate>


#{id}


#{realname}


#{age}






#{id}


#{realname}


#{age}

RemovedItemTemplate
EditItemTemplate
FilterTemplate/NewItemTemplate
HeaderTemplate/FooterTemplate/EmptyTemplate
The above 4 items cannot be listed in full due to space reasons. If necessary, please refer to: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
Special Binding
je-id
Use je-id=" " can be bound to a special id, which can be used in row templates or input elements in FilterTemplate and NewItemTemplate. In EditItemTemplate, the input specified with je-id will contain the new value of this field. In FilterTemplate, specified je-id The input contains the values ​​of the fields used for search, and these fields should be included in the FilterField property. In NewItemTemplate, the input of the specified je-id contains the values ​​​​of the newly created fields.
je-
Use je-="" to bind special operations to the event. It can be used in various templates. Commonly used behaviors are: beginedit to start editing, endedit cancels editing, update saves updates, remove deletes, toggleselect switches selected state, insert creates new, filter searches, togglesort switches sorting. Among them, the first five can only be used in row templates, insert can be used in NewItemTemplate, and filter can be used in FilterTemplate. , togglesort can be used in HeaderTemplate, example:

Copy code The code is as follows:

#{id}


#{realname}
td>

#{age}


Edit span>
delete






#{id}








Cancel
Save


< ;/EditItemTemplate>

It should be noted that togglesort also needs to specify a parameter, which indicates the field to switch the sorting. This field has been set in SortField, for example: je-onclick="togglesort,realname" .
je-class
Use je-class="

Serial number

/* ... */





/* ... */

The syntax of {state} and {sort} needs to be explained here, which are {state[,[, [,[,]]]}, {sort,[,[, [,]]]}. For {state}, if the style of a certain state is not specified, the state name of the row will be used instead of the style name, for example: {state,,new-item }, since the style of the unchanged row is not specified, if the status of the row is unchanged, then unchanged will be returned. For {sort}, if a sorting style is not specified, the sorted status will be used instead of the style name.
je-checked/selected/readonly
Use je-checked="selected" in ItemTemplate with je-onclick="toggleselect" to indicate whether the row is selected. je-selected can be used in EditItemTemplate. select element, example:

Copy code The code is as follows:

je-checked="selected"
je-onclick="toggleselect"
/> #{ id}

je-value
Use je-value=" in FilterTemplate " to bind initialized search conditions.
je-
You can use je-="=;" to generate a jQueryUI plug-in, but currently only supports je-button and je-datepicker, example:

Copy the code The code is as follows:

< ;td>
#{id}








je-datepicker="dateFormat='yy-mm-dd';"
value="#{birthday}" />


je-button="label='Edit';icons={ primary: 'ui-icon-pencil' };"
je-onclick="beginedit"> ;

je-button="label='delete';icons={ primary: 'ui-icon-trash' };"
je-onclick ="remove">

Attribute settings It is consistent with the properties of the jQueryUI plug-in, you can refer to http://jqueryui.com.
Event
All events of Repeater have two parameters, tag and e. tag is the element where the repeater is located, e It contains event-related data.
PreUpdate, Updated are events before and after updating, PreRemove, Removed are events before and after deletion, PreInsert, Inserted are events before and after new creation. The e parameter of these events contains the row attribute, indicating that the relevant operations are currently involved. lines, and the e of Updated, Removed, and Inserted also contains isSuccess, indicating whether the execution is successful, example:

Copy code The code is as follows :

/* ... */
PreUpdate="
function(tag, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('Please Fill in the information completely');
return false;
}
}
" PreInsert="
function(tag, e){
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){
$('#message').text('Please fill in the information completely');
return false;
}
}
" PreRemove="
function(tag, e){
if(!confirm('Whether to delete' e.row.realname)){
return false;
}
}
" Updated="
function(tag, e){
$('#message').text('Update' e.row. realname (e.isSuccess ? 'Success' : 'Failure'));
}
" Inserted="
function(tag, e){
$('#message').text( 'New' e.row.realname (e.isSuccess ? 'Success' : 'Failure'));
}
" Removed="
function(tag, e){
$(' #message').text('Delete' e.row.realname (e.isSuccess ? 'Success' : 'Failure'));
}
">
/* ... */

PreFill, Filled events before and after filling, PreExecute, Executed events before and after executing any operation, PreCustom, Customed events before and after executing custom operations, parameter e Contains the command attribute to represent the name of the custom operation. PreSubStep and SubStepped are events before and after executing the distribution operation. The parameter e contains the count attribute to represent the total number of items, and the completed attribute to represent the number of rows that have been processed.
Navigable When the navigation availability changes , the parameter e contains the prev attribute indicating whether there is a previous page, and the next attribute indicating whether there is a next page. Blocked is an 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.

Sample code download: http://zsharedcode.googlecode.com/files/JQueryElementTest.rar.

Actual process demonstration: http://www.tudou.com/programs/view/GQeh0ZIJ0RY/, it is recommended to watch it in full screen.

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