Let's start with some basic knowledge:
Syntax: $.ajax ({option})
Option represents the parameter. appear in key/value form.
Common parameters: Type:post/get.
URL: The address where the request is sent.
Data:{object:object} data sent to the server must be in key/value format. You can set the ProcessData property without converting the data format.
Success:function (msg) {} callback function after successful request.
Error:function (msg) {} callback function after failed request.
The data type returned by DATATYPE:XML/HTML/SCRIPT/JSON/JSONP.
Then look at the example to understand:
1. Use Ajax to achieve no refresh audit function (click Audit, LinkButton is not available, and changed to have been approved).
The interface is as follows:
Here the data is displayed with the Repeater control, where the audit button is the LinkButton server control.
Page HTML code:
Copy Code code as follows:
<body>
<form id= "Form1" runat= "Server" >
<div>
<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" class= "main_list_table"
rules= "None" >
<tr class= "MAIN_LIST_TABLE_TR1" >
<TD width= "5%" >
Choose
</td>
<TD width= "18%" >
Number
</td>
<TD width= "15%" >
State
</td>
<TD width= "18%" >
Shop
</td>
<TD width= "18%" >
Purchased by
</td>
<TD width= "13%" >
RMB
</td>
<td>
Operation
</td>
</tr>
<asp:repeater id= "Rpt_review" runat= "Server" >
<ItemTemplate>
<tr onmouseover= "this.classname= ' main_list_table_tr_over '" onmouseout= "This.classname=" Main_List_Table_Tr_ Out ' ">
<td>
<input type= "checkbox" Id= orderid_<% #Eval ("OrderId")%> "name=" OrderId "value=" <% #Eval ("OrderId")%> "/>
</td>
<td>
<% #Eval ("OrderId")%></a>
</td>
<td>
<%# Eval ("Ostate"). ToString ()%>
</td>
<td>
Shop No. 1th
</td>
<td>
Tom
</td>
<td>
100.00
</td>
<td>
<asp:linkbutton id= "Lbtn_audit_eshop_price" runat= "Server" > Audit </asp:LinkButton>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
<div class= "PADDING_TOP10" >
<label for= "Sel_all" style= "Cursor:pointer" >
<input type= "checkbox" Name= "Sel_all" id= "Sel_all" onclick= "SelectAll (' Sel_all ', ' OrderId ');/> Select/Reverse </ Label>
<input type= "button" id= "Btn_batch_review" onclick= "return Batch_review ();" Value= "Batch audit"/>
</div>
</form>
</body>
The implementation code is as follows:
A. Scripting code:
Copy Code code as follows:
function Lbtn_audit_eshop_price_command (Obj,orderid)
{
if (obj.innerhtml!= "Audit") return false;
if (!confirm) are you sure you want to audit? ")) {
return false;
}
$.ajax ({
Type: "Post",//post send mode
URL: "Ajaxtest.aspx",//Request address is this page address
Data:{orderid:orderid,action: "Single_review"},//incoming data for order number and Action
Success: (function (msg) {
if (msg!= "")
{
var chkid = "Orderid_" +orderid;
document.getElementById (chkid). Disabled = "disabled";
obj.disabled = "Disabled";
obj.innerhtml = "audited";
}
})
});
return false;
}
B. Server code:
Judge the execution of the event according to the action.
Copy Code code as follows:
protected void Page_Load (object sender, EventArgs e)
{
Conn.Open ();
Perform action
String Action = Commfun.get_safe_str (request["action");
if (! IsPostBack)
{
if (Action = = "")
{
Rpt_pro_order_list_bind ();
}
else if (Action = = "Single_review")//Click Audit
{
Lbtn_audit_eshop_price_command ();
}
else//Click Batch Review
{
Btn_batch_review_eshop_price ();
}
}
}
Repeater bind the data, add the OnClick property for LinkButton to execute the page scripting code.
Copy Code code as follows:
protected void Rpt_pro_order_list_bind ()
{
......
This.rpt_Review.DataSource = Dt;
This.rpt_Review.DataBind ();
for (int i = 0; i < This.rpt_Review.Items.Count; i++)
{
LinkButton Lbtn_audit_eshop_price = (LinkButton) this.rpt_review.items[i]. FindControl ("Lbtn_audit_eshop_price");
if (dt.rows[i]["Audit_eshop_price"]. ToString () = = "1")
{
lbtn_audit_eshop_price.enabled = false;
Lbtn_audit_eshop_price.text = "audited";
}
Else
{
Lbtn_audit_eshop_price.enabled = true;
LBTN_AUDIT_ESHOP_PRICE.ATTRIBUTES.ADD ("onclick",
"Return Lbtn_audit_eshop_price_command (This, '" + dt.rows[i]["OrderId"]. ToString () + "');");
}
}
}
[Code]
2. Use Ajax to achieve no refresh batch audit.
Note: The control used here must be an HTML control, or it can cause a postback. However, internal server controls can also be used in repeater.
Just add an onclick attribute to input= "Btton" and execute the Ajax script directly.
The script reads as follows:
[Code]
Bulk audits
function Batch_review ()
{
if (!checkselitem ("OrderId", "Please select order!") ")) return false;
if (!confirm) are you sure you want to audit? ")) return false;
var orderids = ""; Record all order numbers
var elements = document.getelementsbyname ("OrderId");
For (Var m=0 m < elements.length; m++) {
if (m = = elements.length-1)
{
OrderIDs = OrderIDs + elements[m].value;
}
Else
{
OrderIDs = orderids + Elements[m].value + ",";
}
}
var Orderidarr = Orderids.split (', ');
var neworderidstr = "";
var j = 0;//record number of orders selected
var position = "";//Record Selected order location
for (var i = 0;i<orderidarr.length;i++)
{
var chk_id = "Orderid_" +orderidarr[i];
if ($_id (chk_id). Checked)//record the selected order
{
if (i = = orderidarr.length-1)
{
Neworderidstr + = Orderidarr[i];
Position = i;
}
Else
{
Neworderidstr + = orderidarr[i]+ ",";
Position + = i + ",";
}
j + +;
}
}
Neworderidstr = Removerightcomma (NEWORDERIDSTR);//Remove the order number after the end comma
Position = Removerightcomma (position);//Remove the position after the end comma
$.ajax ({
Type: "POST",
URL: "Ajaxtest.aspx",
Data: {order_id_arr:neworderidstr, Action: "Batch_review"},
Success:function (msg) {
if (msg!= "") {
for (var k = 0; k<j;k++)
{
var Neworderidarr = Neworderidstr.split (', ');
var Positionarr = Position.split (', ');
$_id ("Orderid_" +neworderidarr[k]). Disabled = "disabled";
if (parseint (Positionarr[k]) <10)
{
$_id ("Rpt_review_ctl0" +parseint (positionarr[k)) + "_lbtn_audit_eshop_price"). InnerHTML = "audited";
$_id ("Rpt_review_ctl0" +parseint (positionarr[k)) + "_lbtn_audit_eshop_price"). Disabled = "disabled";
}
Else
{
$_id ("Rpt_review_ctl" +parseint (positionarr[k)) + "_lbtn_audit_eshop_price"). InnerHTML = "audited";
$_id ("Rpt_review_ctl" +parseint (positionarr[k)) + "_lbtn_audit_eshop_price"). Disabled = "disabled";
}
}
}
}
})
return true;
}
Remove comma on right
function Removerightcomma (str)
{
if (str = = "") return;
var i;
for (i = str.length-1;i>=0;i--)
{
CharAt (i) take a character from a position
if (Str.charat (i)!= ",") break;
}
Intercepts the string, substring (start,stop), and the returned result does not contain the last
str = str.substring (0,i+1);
return str;
}
This example explains the end.
Finally, the thought of retrospect:
1. Single Audit: When the page is initialized, the audit button plus the OnClick property, execute the page script, click Audit, the background of the Page_Load event according to the action to select the event to perform.
2. Batch Audit: The batch audit button plus the onclick attribute, execute Ajax script, the background of the Page_Load event also based on the action to choose to perform events. The bulk audit button must be an HTML control.
