search

Home >Web Front-end >JS Tutorial >asp.net 30 minutes to master no refresh Repeater_jquery

asp.net 30 minutes to master no refresh Repeater_jquery

WBOY
WBOYOriginal
2016-05-16 18:02:011630browse

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:

<%@ 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 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="< New method address>"
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="" />
/* ... */




< FillAsync Url="Student.aspx" MethodName="Fill">

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
[, < Field or condition name used for searching n>]
[, 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 students = new List ( );
students.Add ( new {
id = 1,
realname = "jack",
age = 20
} );
// ...
return new { __success = true, rows = students.ToArray ( ), itemcount = 120 };
}

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}


< /UpdatedItemTemplate>



#{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}


#{age}


Edit
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="