MVC采用Jquery实现局部刷新
该文纯粹属于个人学习,有不足之处请多多指教!
效果图:
单击Detail下面出现详细,效果如下:
为了使操作时两个不同的数据源相互干扰,使用局部视图刷新,代码如下:
首先介绍主页Index代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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代码了
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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局部刷新,文章部分内容可能摘自网络,如果侵犯您的权益,请及时联系我,谢谢。
(个人学习中,请多多指教)