Click here to Skip to main content
13,862,120 members
Click here to Skip to main content
Add your own
alternative version

Stats

23.4K views
6 bookmarked
Posted 5 Dec 2011
Licenced CPOL

Using jQuery Repeater to Mark a Multi-line EMail Message As Spam and Show Progress

, 26 Dec 2011
Rate this:
Please Sign up or sign in to vote.
How to perform operations on multi rows in jQuery Repeater and display the progress? Here is an example of mark spam email message.

The original post can be found here.

Introduction/Catalog

Due to limited time, synchronization cannot be guaranteed in more than one blog article. At the following address, you can view up-to-date content, hope you understand:

Please download the sample code at the section JQueryElement demo download of Download jQueryElement, the directory is /repeater/Default.aspx.

This article will explain in detail how to perform operations on multi rows and show the progress in a Repeater control; the catalog is as follows:

295338/MarkSpam1.jpg

Prepare

Please view the Prepare section at 30 Minutes Grasp ASP.NET jQuery Repeater.

MultipleSelect Property

Property MultipleSelect indicates whether you can select more than one row in the Repeater, default is true. If set to false, you can have only one row is selected.

toggleselect Method

In the row template of Repeater, set je-onclick to toggleselect, you can toggle the selected status of the current row:

<ItemTemplate>
 <tr>
  <td>
   <input type="checkbox" je-checked="selected" 
     je-onclick="toggleselect,false" />
  </td>

 </tr>
</ItemTemplate>

In the code above, toggleselect is followed by a boolean parameter, the parameter defaults to true, which means cancel the selected status of the prev row, if you set the parameter to false, you can select multiple rows.

In addition, you can call the methods select and unselect to select or unselect a row.

selectall Method

In general, we will add select all button in footer template:

<FooterTemplate>
 <tfoot>
 <tr>
  <td colspan="4">
  <a href="#" je-onclick="selectall">Select all</a>
  <a href="#" je-onclick="unselectall">Unselect all</a>
  <a href="#" je-onclick="toggleselectall">Toggle all</a>
  </td>
 </tr>
 </tfoot>
</FooterTemplate>

Set the je-onclick to selectall, when you click on this link, all rows will be selected.

In addition, you can also set je-onclick to unselectall, toggleselectall.

Perform Operations On Multi Rows

Repeater supports the use of removeselected and customselected methods for multiple rows operation:

<je:Repeater ID="emailRepeater" runat="server" 
  Selector="'#list'" CustomAsync-Url="webservice.asmx"
  CustomAsync-MethodName="CustomEMail"
 ... >
<FooterTemplate>
 <tfoot>
 <tr>
  <td colspan="4">
  <a href="#" je-onclick="customselected,'spam'">Mark spam</a>
  <a href="#" je-onclick="customselected,'unspam'">Not spam</a>
  </td>
 </tr>
 </tfoot>
</FooterTemplate>
</je:Repeater>

In the above example, customselected is called to perform custom operation on the selected rows, the names of the custom operations are spam and unspam. Custom operation will call the method CustomEMail of WebService.asmx:

[WebMethod]
[ScriptMethod]
public SortedDictionary<string, object> CustomEMail (
 int id, string no, bool isspam, string command
 )
{
 this.Context.Response.Cache.SetNoStore ( );

 if ( command == "spam" )
 {
  isspam = true;
  Thread.Sleep ( 1000 );
 }
 else if ( command == "unspam" )
 {
  isspam = false;
  Thread.Sleep ( 1000 );
 }
 else if ( command == "togglespam" )
  isspam = !isspam;

 // Return JSON
}

In the method, CustomEMail, we use the Sleep method of the Thread class to extend the time of execution, so they can see the progress of the implementation on the page.

Getting Progress

You can set the SubStepping property to a JavaScript method to get the progress:

<je:Repeater ID="emailRepeater" runat="server" 
  Selector="'#list'" PageSize="5" IsVariable="true"
 ...
 CustomAsync-Url="webservice.asmx"
 CustomAsync-MethodName="CustomEMail"
 PreSubStep="
 function(pe, e){
  pb.progressbar('option', 'value', 0).show();
 }
 " SubStepping="
 function(pe, e){
  pb.progressbar('option', 'value',
   (100 * e.substep.completed / e.substep.count));

  emailRepeater.__repeater('showtip',
   'Completed ' + e.substep.completed);
 }
 " SubStepped="
 function(pe, e){
  pb.hide();
 }
 ">
</je:Repeater>

In SubStepping, the parameter e has a property named substep, count property of substep represents the total row count, completed property indicates the number of rows that have been completed. In addition, through the showtip method of repeater, we display a progress message. About how to display a message, you can refer to Show Message in jQuery Repeater When Validate Or Update.

PreSubStep is the event before getting started, SubStepped is the event after the end of operations.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

zoyobar
United States United States
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190214.1 | Last Updated 26 Dec 2011
Article Copyright 2011 by zoyobar
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid