Magic Ajax) (modified)

I am looking for a lot of information about Ajax because I need to use the "no refreshing" method on the interface. Today, the manager recommends something to me called magic Ajax, it is an open-source control (open-source control is good). At first, I thought it was similar to Atlas, but when I started using it, I obviously felt the magic of magic Ajax!

The main control is the AjaxPanel control. You can drag and drop this Panel to a place on the page, and then put all the controls that used to require PostBack in this panel, then ............ You don't have to do anything! The AjaxPanel will automatically obtain the PostBack method in the panel, encapsulate it, and then call XMLHTTP, thus achieving a complicated and refreshing effect!

However, I encountered a problem (Visual Studio 2005) when using it, that is, if I made a user-defined control by using the refreshing part, when you use the control multiple times on the same page, it seems that magic Ajax considers the server controls in these custom controls to be the same! For example, I made a custom a control, which contains an AjaxPanel control, a button and a label control in the panel, and then I put it in a default. two a controls (A1 and A2 respectively) are repeatedly used on the ASPX page. What I want to achieve is that when I click default. after the A1 control button on aspx, the label in the A1 control automatically obtains a value in the database. However, the strange thing is that after I click the button of the A1 control, the label values of A1 and A2 are obtained, I don't know how to solve this problem? Headache ing ......

I 've been checking on the Internet for a long time. There are few Chinese introductions to magic Ajax. I 'd like to find some useful ones. Remember:

1. Modify loading (the one in the upper right corner is the same as that in Gmail)

The method is to copy the script folder in the core to a folder on your site, and then add it to Web. config.


Code
< Magicajax outputcomparemode = " Hashcode " Tracing = " False " Scriptpath = " ~ /JS/script "   >
< Pagestore />
</ Magicajax >

 


Note the case sensitivity. It is scriptpath, not scriptpath.

open ajaxcallobject and go to the bottom to modify the following content
function createwaitelement () {
var ELEM = document. getelementbyid ('_ ajaxcall_wait');
If (! ELEM) {
ELEM = document. createelement ("Div");
ELEM. id = '_ ajaxcall_wait';
ELEM. style. position = 'absolute ';
ELEM. style. height = 17;
ELEM. border = "1px";
ELEM. style. paddingleft = "3px";
ELEM. style. paddingright = "3px";
ELEM. style. fontsize = "11px";
ELEM. style. bordercolor = "# cccccc";
ELEM. style. borderwidth = "1";
ELEM. style. borderstyle = "solid";
ELEM. style. backgroundcolor = "efefef";
ELEM. style. color = "darkred";
ELEM. innerhtml = 'loading data... ';
ELEM. style. visibility = 'ddn';
document. body. insertbefore (ELEM, document. body. firstchild);
}< br> waitelement = ELEM;
}< br> // end wait element

Another effect: Look at ajaxcallobject. JS. When a request is sent, a wait icon appears on the top right of the page like Gmail... the wait time is cool. You only need to make a small change here and change the createwaitelement part to achieve another effect. When I change the request data to WINDOWS shutdown, the entire page gets grayed out. JS is similar to the following:

< Script Type = "Text/JavaScript" >
<! --
Function Log_out ()
{
HT1 = Parent. frames. Item ( 0 Developer.doc ument. getelementsbytagname ( " Html " );
HT1 [ 0 ]. Style. Filter = " Progid: DXImageTransform. Microsoft. basicimage (grayscale = 1) " ;
Ht2 = Document. getelementsbytagname ( " Html " );
Ht2 [ 0 ]. Style. Filter = " Progid: DXImageTransform. Microsoft. basicimage (grayscale = 1) " ;
If (Confirm ('Are you sure you want to cancel? '))
{
Return True ;
}
Else
{
HT1 [ 0 ]. Style. Filter = "" ;
Ht2 [ 0 ]. Style. Filter = "" ;
Return False ;
}
}
// -->
</ Script >

Very cool wait... wait for the display location. I have found the modified location. You can change it in this function.

Function movewaitelement ()
{
If (! Waitelement)
Createwaitelement ();

VaR width = Document. Body. clientwidth;
Waitelement. style. Top = Document. Body. scrolltop;
Waitelement. style. Left = width + document. Body. offsetleft-waitelement. offsetwidth;
}

2. Process ajaxcall

Magicajaxcontext is generally used. current. isajaxcall is used to determine whether the event is an ajaxcall event. However, it is not accurate. If the event is triggered by a client, it will be fine. However, if the event is caused by another webform using transfer, it will judge the error, the correct method is to use magicajaxcontext. current. isajaxcallforpage.

3. Add functions for AjaxPanel without Ajax callback

Situation: Sometimes we need to include an AjaxPanel outside a group of ASP. NET controls, but a control in this group does not want to call Ajax.
EditSource codeIn the script \ ajaxcallobject. js file.
Ajaxcallobject. Prototype. getajaxcalltype = function (element)
{
.........................
}

Ajaxcallobject. Prototype. getenabledajaxcallattrib = function (element)
{
VaR attrib = element. getattribute ("enabledajaxcall ");
If (attrib! = NULL)
If (attrib. tolowercase () = "false ")
Return false;
Return true;
}
.....................
Ajaxcallobject. Prototype. onformsubmit = function ()
{
...............................

If (_ previusonformsubmit! = NULL)
If (_ previusonformsubmit () = false)
Return false;

VaR ecbattrib = ajaxcbo. getenabledajaxcallattrib (target );
If (! Ecbattrib)
{
Ajaxcbo. cleartracingwindows ();
Return true;
}

..............................
}

// Replaces normal _ dopostback
Ajaxcallobject. Prototype. dopostback = function (eventtarget, eventargument)
{
.............................

// Checks the unique ID and its parents until it finds a target Element
// I. e. For ajaxpanel_grid: row: field it checks
// Ajaxpanel_grid_row_field
// Ajaxpanel_grid_row
// Ajaxpanel_grid
For (VAR num = IDs. length; num> 0; num --)
{
VaR elemid = "";
For (VAR I = 0; I <num; I ++)
Elemid + = (I = 0? "": "_") + IDs [I];

Target = Document. getelementbyid (elemid );
If (target! = NULL)
Break;
}

VaR ecbattrib = ajaxcbo. getenabledajaxcallattrib (target );
If (! Ecbattrib)
If (_ previouspostback! = NULL)
{
_ Previouspostback (eventtarget, eventargument );
Return;
}
............................
}

Add the above blueCodeContent. Then re-compile the magicajax source code and apply it to your project.

Usage: In your project, if a control in the AjaxPanel does not want to call Ajax, add the following attributes to the control:

<Asp: linkbutton id = "btncancel" text = "button" runat = "server"Enabledajaxcall = "false"/>

For background code, add the following content:
Btncancel. Attributes. Add ("enabledajaxcall", "false ");

Source code: