MVC采用Jquery实现局部刷新

2018-06-22 06:06:53来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

效果图:

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

(个人学习中,请多多指教)

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Razor语法中绑定一个值给checkbox

下一篇:.net MVC 中枚举类型Enum 转化成 下拉列表的数据源