MVC采用Jquery实现局部刷新

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

效果图：

单击Detail下面出现详细，效果如下：

为了使操作时两个不同的数据源相互干扰，使用局部视图刷新，代码如下：

首先介绍主页Index代码：

 @model IEnumerable<Framework.Models.Customer>
 @using Common
 <script src="@Url.Content("~/Scripts/My97DatePicker/WdatePicker.js")"  type="text/javascript"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         var id;
         $(".Detail").live("click", function () {
             id = $(this).attr("id");
             GetDetails(id);
         });
         $(".grey").live("click", function () {
             $("#page").val($(this).attr("page"));
             $("#jqtransform").submit();
         });

         $(".grey2").live("click", function () {
             $("#page2").val($(this).attr("page"));
             //alert(id + "," + $("#page2").val());
             if (typeof (id) != "undefined") {
                 GetDetails(id);
             }
         });
     });
     function GetDetails(id) {
         $.post("/BrowseLog/Detail", { id: id, page: $("#page2").val(), txtStarTime: $("#txtStarTime").val(), txtEndTime: $("#txtEndTime").val() }, function (data) {
             $("#AJAXMAIN").html(data);//这里是重点，右侧数据获取后要显示到div中
         }, "text");
     }
 </script>
 <div id="rightcontent">
     <div id="rightcontent-inner">
         <h2>Customer</h2>

         <form class="jqtransform" action="/BrowseLog/Index" method="post" id="jqtransform">

             <div class="rowElem">
                 <input type="hidden" id="page" value="1" name="page" />
                 <span class="btnblock btn_title">StarTime:</span>
                 <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' });"
                 class="input_length1" style="width: 200px" />
                 <span class="btnblock btn_title">EndTime:</span>
                 <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' });"
                 class="input_length1" style="width: 200px" />
                 <input type="submit" value="Search" class="btnblock" />
             </div>

         </form>

         <table cellspacing="0" cellpadding="0" border="0" class="jqtable">
             <tr>
                 <th>Customer Name</th>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Phone</th>
                 <th>Email</th>
                 <th>Login Time</th>
                 <th>Browser Products</th>
             </tr>
             @foreach (var item in Model)
             {
                 <tr>
                     <td>@item.CustomerName</td>
                     <td>@item.FirstName</td>
                     <td>@item.LastName</td>
                     <td>@item.Phone</td>
                     <td>@item.Email</td>
                     <td>@item.LoginTime</td>
                     <td>
                         <input type="button" class="Detail" id="@item.CustomerID" value="Detail"/>
                     </td>
                 </tr>
             }
         </table>

         <div class="seach_div">@Html.Paging(new { @class = "grey" })</div>

         <div id="AJAXMAIN">
             @{Html.Action("Detail"); }
         </div>

     </div>

 </div>

Index

接着介绍局部视图Detail代码

 @using Common
 @model IEnumerable<Framework.Models.CustomersBrowseProducts>
 <div class="">Broswe Products Detail</div>

 <input type="hidden" id="page2" value="1" name="page2" />
 <table cellspacing="0" cellpadding="0" border="0" class="jqtable" id="tbDetails">
     <tr>
         <th>Customer Name</th>
         <th>Product Code</th>
         <th>Color</th>
         <th>CreateDate</th>
     </tr>
     @foreach (var item in Model)
     {
         <tr>
             <td>@item.CustomerName</td>
             <td>@item.ProductCode</td>
             <td>@item.Color</td>
             <td>@item.CreateDate</td>
         </tr>
     }
 </table>

 <div class="seach_div">@Html.Paging2(new { @class = "grey2" })</div>

Detail

最后就是Controllers代码了

         public ActionResult Index(int? page, string txtStarTime, string txtEndTime)
         {
             ……
             var list= ……;
             return View(list);
         }

         public ActionResult Detail(int? page, string txtStarTime, string txtEndTime, int? id)
         {
             ……
             var list= ……;
             if (Request.IsAjaxRequest())
                 return PartialView(list);
             else
                 return null;
         }

关键性代码：

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

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