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>

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

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

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