MVC採用Jquery實現局部刷新

該文純粹屬於個人學習，有不足之處請多多指教！

效果圖：

單擊Detail下麵出現詳細，效果如下：

為了使操作時兩個不同的數據源相互干擾，使用局部視圖刷新，代碼如下：

首先介紹主頁Index代碼：

 1 @model IEnumerable<Framework.Models.Customer>
 2 @using Common
 3 <script src="@Url.Content("~/Scripts/My97DatePicker/WdatePicker.js")"  type="text/javascript"></script>
 4 <script type="text/javascript">
 5     $(document).ready(function () {
 6         var id;
 7         $(".Detail").live("click", function () {
 8             id = $(this).attr("id");
 9             GetDetails(id);
10         });
11         $(".grey").live("click", function () {
12             $("#page").val($(this).attr("page"));
13             $("#jqtransform").submit();
14         });
15 
16         $(".grey2").live("click", function () {
17             $("#page2").val($(this).attr("page"));
18             //alert(id + "," + $("#page2").val());
19             if (typeof (id) != "undefined") {
20                 GetDetails(id);
21             }
22         });
23     });
24     function GetDetails(id) {
25         $.post("/BrowseLog/Detail", { id: id, page: $("#page2").val(), txtStarTime: $("#txtStarTime").val(), txtEndTime: $("#txtEndTime").val() }, function (data) {
26             $("#AJAXMAIN").html(data);//這裡是重點，右側數據獲取後要顯示到div中
27         }, "text");
28     }
29 </script>
30 <div id="rightcontent">
31     <div id="rightcontent-inner">
32         <h2>Customer</h2>
33 
34         <form class="jqtransform" action="/BrowseLog/Index" method="post" id="jqtransform">
35 
36             <div class="rowElem">
37                 <input type="hidden" id="page" value="1" name="page" />
38                 <span class="btnblock btn_title">StarTime:</span>
39                 <input type="text" name="txtStarTime" id="txtStarTime" value="@ViewData["txtStarTime"]" onclick="WdatePicker({ maxDate: '#F{$dp.$D(\'txtEndTime\')||\'%y-%M-%d\'}', lang: 'en', dateFmt: 'yyyy-MM-dd' });"
40                 class="input_length1" style="width: 200px" />
41                 <span class="btnblock btn_title">EndTime:</span>
42                 <input type="text" name="txtEndTime" id="txtEndTime"  value="@ViewData["txtEndTime"]" onclick="WdatePicker({ minDate: '#F{$dp.$D(\'txtStarTime\')}', maxDate: '%y-%M-%d', lang: 'en', dateFmt: 'yyyy-MM-dd' });"
43                 class="input_length1" style="width: 200px" />
44                 <input type="submit" value="Search" class="btnblock" />
45             </div>
46 
47         </form>
48 
49         <table cellspacing="0" cellpadding="0" border="0" class="jqtable">
50             <tr>
51                 <th>Customer Name</th>
52                 <th>First Name</th>
53                 <th>Last Name</th>
54                 <th>Phone</th>
55                 <th>Email</th>
56                 <th>Login Time</th>
57                 <th>Browser Products</th>
58             </tr>
59             @foreach (var item in Model)
60             {
61                 <tr>
62                     <td>@item.CustomerName</td>
63                     <td>@item.FirstName</td>
64                     <td>@item.LastName</td>
65                     <td>@item.Phone</td>
66                     <td>@item.Email</td>
67                     <td>@item.LoginTime</td>
68                     <td>
69                         <input type="button" class="Detail" id="@item.CustomerID" value="Detail"/>
70                     </td>
71                 </tr>
72             }
73         </table>
74 
75         <div class="seach_div">@Html.Paging(new { @class = "grey" })</div>
76 
77         <div id="AJAXMAIN">
78             @{Html.Action("Detail"); }
79         </div>
80 
81     </div>
82 
83 </div>

接著介紹局部視圖Detail代碼

 1 @using Common
 2 @model IEnumerable<Framework.Models.CustomersBrowseProducts>
 3 <div class="">Broswe Products Detail</div>
 4 
 5 <input type="hidden" id="page2" value="1" name="page2" />
 6 <table cellspacing="0" cellpadding="0" border="0" class="jqtable" id="tbDetails">
 7     <tr>
 8         <th>Customer Name</th>
 9         <th>Product Code</th>
10         <th>Color</th>
11         <th>CreateDate</th>
12     </tr>
13     @foreach (var item in Model)
14     {
15         <tr>
16             <td>@item.CustomerName</td>
17             <td>@item.ProductCode</td>
18             <td>@item.Color</td>
19             <td>@item.CreateDate</td>
20         </tr>     
21     }
22 </table>
23 
24 <div class="seach_div">@Html.Paging2(new { @class = "grey2" })</div>

最後就是Controllers代碼了

 1         public ActionResult Index(int? page, string txtStarTime, string txtEndTime)
 2         {
 3             ……
 4             var list= ……;
 5             return View(list);
 6         }
 7 
 8         public ActionResult Detail(int? page, string txtStarTime, string txtEndTime, int? id)
 9         {
10             ……
11             var list= ……;
12             if (Request.IsAjaxRequest())
13                 return PartialView(list);
14             else
15                 return null;
16         }

關鍵性代碼：

$.post("/BrowseLog/Detail",//Url
{ id: id, page: $("#page2").val(), txtStarTime: $("#txtStarTime").val(), txtEndTime: $("#txtEndTime").val() },//參數
function (data) {
$("#AJAXMAIN").html(data);//這裡是重點，局部視圖數據獲取後要顯示到div中
},
"text");

<div id="AJAXMAIN">
@{Html.Action("Detail"); }@*局部視圖*@
</div>

這樣就實現了MVC採用Jquery局部刷新，文章部分內容可能摘自網路，如果侵犯您的權益，請及時聯繫我，謝謝。

（個人學習中，請多多指教）