MVC采用Jquery实现局部刷新

@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>

@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>

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;
}