Use ajax to obtain remote page information

When we click the title in the table to display relevant details, such as clicking the news title to display the body, and the body is usually in a page, we can query the database by obtaining the passed parameter ID, then display

As follows:

Post to the front-end firstCode: The key code is to bind the ID through the data (custom attribute) marked by span.

<Asp: gridview id = " Gvcollect " Runat = " Server " Autogeneratecolumns = " False "
Datakeynames = " ID " Onrowdeleting = " Gvcollect_rowdeleting "
Enablemodelvalidation = " True " >
<Columns>
<Asp: boundfield datafield = " ID " Headertext = " No. " />
<Asp: templatefield headertext = " Title " >
<Itemtemplate>
<Span Class = " Showcon " Data = ' <% # Eval ("ID") %> ' > <% # Eval ( " Title " ) %> </Span>
</Itemtemplate>
</ASP: templatefield>
<Asp: boundfield datafield = " Addtime " Headertext = " Time " />
<Asp: templatefield headertext = " Operation " >
<Itemtemplate>
<A href = " Show_coll.aspx? Id = <% # databinder. eval (container. dataitem, " ID " ) %> " Target = " _ Blank " > View </a>
<Asp: linkbutton id = " Lbtn " Runat = " Server " Commandname = " Delete " Onclientclick = " Return confirm ('Confirm delete ') " > Delete </ASP: linkbutton>
</Itemtemplate>
</ASP: templatefield>
</Columns>
</ASP: gridview>

<Table width = " 100% " >
<Tr>
<TD>
<Asp: button id = " Btnallmove " Runat = " Server " TEXT = " All warehouse receiving " Onclick = " Btnallmove_click " />
<Asp: button id = " Btnalldelete " Runat = " Server " TEXT = " Clear all records " Onclick = " Btnalldelete_click " />
</TD>
<TD>
& Nbsp; </TD>
</Tr>
<Tr>
<TD>
& Nbsp; </TD>
<TD>
& Nbsp; </TD>
</Tr>
</Table>

Then there is the pop-up layer quick code:

< Div ID = "Divtip" Title = "Content display" Style = "Overflow: auto ;" >

</ Div >

Next, let's take a look at the CSS style reference file and JS call (I use the jqueryui library)

<Link href = "JS/jquery-ui-1.8.16.custom.css" rel = "stylesheet" type = "text/CSS"/>
<SCRIPT src = "JS/jquery-1.4.1.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "JS/jquery-ui-1.8.16.custom.min.js" type = "text/JavaScript"> </SCRIPT>

 

View code

<SCRIPT type = "text/JavaScript">
$ ( Function (){
// Initialize the pop-up layer and load is not displayed
$ ("# Divtip"). Dialog ({
Show: Null ,
Width: 500,
Height: 500,
Bgiframe: False ,
Autoopen: False ,
Buttons :{
"OK ": Function (){
$ ( This ). Dialog ("close ");
},
"Cancel ": Function (){
$ ( This ). Dialog ("close ");
}
}
});
// Cancels event bubbles of an object.
$ ("# Divtip"). BIND ("click ", Function (Event ){
Event. stoppropagation ();
});

// Dynamic prompt class pop-up layer. When you click an object, the loading page is displayed.
$ (". Showcon" ).css ("cursor", "Pointer"). Click ( Function (Event ){
$ ("*"). Stop ();
$ ("# Divtip"). Dialog ("close ");
Event. stoppropagation ();
VaR Top = upper (event.tar get). offset (). Top + 20;
VaR Left = iterator (event.tar get). offset (). Left;
// Get the object source ID
VaR Objid = Response (event.tar get). ATTR ("data ");
// Alert (objid );
$. Ajax ({
Type: "Post ",
URL: "show_coll.aspx ",
Data: "id =" + objid,
Success: Function (CON ){
$ ("# Divtip" corner. html (CON );
}
});
// $ ("# Divtip" pai.html (objid );
$ ("# Divtip"). Dialog ("option", "position", [left, top]);
$ ("# Divtip"). Dialog ("open ");
});

})
</SCRIPT>

Next is the Server Page:

Generally, all the obtained parameters are request. querystring [""], but this is to get the parameters in the URL, but now it is to get the parameters in the HTTP object, so we use request [""],

Otherwise, no data can be obtained.

 

// Request. querystring ["ID"] = NULL
If (Request [ " ID " ] = Null )
Return 0 ;
Return Convert. toint32 (request [ " ID " ]. Tostring ());