Mvc3.0 adopts jquery for partial refresh

My advertisement unit. Please click here. Thank you!

 

Mvc3.0 is just getting started, and all of them are exploring. The official music has no intention of looking at it. You can only search for one function. Recently, a partial refresh function is provided to refresh the Grid Information on the right based on the content on the left side of the page.

 

Slice:

 

 

Click on the left side: (when you click, the loading effect will appear on the right side)

 

 

Here is the implementation logic, code

 

1. First, the Home Page

//////////////////////////////////////// ////////////////////////////////////
Homepage content
@ Model system. Data. datatable

@{
Viewbag. Title = "RFID wireless ordering system ";
Layout = "~ /Views/shared/_ layout. cshtml ";
Int I = 1;
}
@ Section head {
<SCRIPT type = "text/JavaScript">
Function search (shangdate, Series ){
// Click the row on the left to find the data on the right and return
$. Post ("/home/allgroupskc/", "fshangdate =" + shangdate + "& fseries =" + series, function (data ){
$ ("# Ajaxmain" ).html (data); // here is the focus. After obtaining the data on the right side, it will be displayed in the div.
}, "Text"
);
Returnfalse;
}
// Prepare
$ (Function (){
$ ("TR"). addclass ("clicktr"); // Add CSS and place the cursor over tr as the hand type. CSS is ignored.
$ ("TR"). Click (function (){
$ ("TR"). removeclass ("clickedtr"); // remove all clickedtr styles
$ (This). addclass ("clickedtr"); // click a tr to mark the color of the row
// Load the data to display an image.
$ ("# Ajaxmain" developer.html (" <br/> data refreshing, please wait ...");
// Execute the query
Search({(this}.children('td'{.eq(1}.html (), {(this}.children('td'{.eq(2}.html ());
})
})
</SCRIPT>
}
<H2> ...... </H2>
<Br/>
..........
<HR/>
<Div style = "float: Left; width: pixel PX; margin: 0 5px 0 0;">
<Table>
<Tr> <TH> NO </Th> <TH> here is the column... ignore... </Th> </tr>
@ Foreach (system. Data. datarow DR in model. Rows)
{
<Tr> <TD> @ (I ++) </TD> <TD> here is the column .... ignore ........ </TD> </tr>
}
</Table>
</Div>
<! -- Grid on the right -->
<Div id = "ajaxmain" style = "float: Left; width: auto;">
<Font style = "font-size: 40px; color: # cccccc"> click the row on the left <br/> to view the information </font>
@ {Html. Action ("allgroupskc");} // partial view
</Div>

　　

2. Local view page allgroupskc. cshtml

//////////////////////////////////////// //////////////////////////////////////// ////////////////////////////
The content of partialview allgroupskc. cshtml is as follows:

@ Model system. Data. datatable
<Table>
<Tr> <TH> ...... </Th> </tr>
@ Foreach (system. Data. datarow DR in model. Rows)
{
<Tr> <TD> ...... </TD> </tr>
}
</Table>

　　

3. Finally, the Controller Method

//////////////////////////////////////// //////////////////////////////////////// ///////////////////////////////
Controller. CS Method
// Left-side data
[Outputcache (duration = 300)]
Public actionresult allgroupshangdateseries ()
{
Return view (dbhelpersql. getrecordbyproc ("p_allgroupshangdateseries "));
}
// Data on the right
[Outputcache (duration = 300)]
Public partialviewresult allgroupskc (string fshangdate = "", string fseries = "")
{
If (request. isajaxrequest ())
Return partialview (dbhelpersql. lrgroupsdseries ("p_allgroupskc", fshangdate, fseries ));
Else
Returnnull;
}