MVC采用Jquery实现局部刷新

来源：互联网发布：ar相机软件下载编辑：程序博客网时间：2024/05/17 07:58

该文纯粹属于个人学习，有不足之处请多多指教！

效果图：

单击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>

Index

接着介绍局部视图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>

Detail

最后就是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             else15                 return null;16         }

View Code

关键性代码：

$.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局部刷新，文章部分内容可能摘自网络，如果侵犯您的权益，请及时联系我，谢谢。

（个人学习中，请多多指教）

0 0