MVC3.0 采用Jquery实现局部刷新

转自 http://www.cnblogs.com/qidian10/archive/2011/07/27/2118021.html

 

MVC3.0刚入门，所有的都在摸索中，官方的MUSIC也无心看，只能做一个功能海搜一下。最近做了一个局部刷新的功能，功能大致是根据页面左侧的内容，刷新右侧的Grid信息

效果图片：

单击左侧后：（单击时候右侧将会出现加载效果）

这里是实现逻辑，代码

1.首先主页面

////////////////////////////////////////////////////////////////////////////
主页面内容
@model System.Data.DataTable

@{
    ViewBag.Title = "RFID无线订货系统";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int i = 1;
}
@section head{
    <script type="text/javascript">
        function search(shangdate,series) {
            //这里是根据左侧单击的行，查找右侧的数据，并返回
            $.post("/Home/AllGroupSKC/", "fshangdate=" + shangdate + "&fseries=" + series, function (data) {
                $("#AJAXMAIN").html(data);//这里是重点，右侧数据获取后要显示到div中
            }, "text"
            );
            return false;
        }
        //准备
        $(function () {
            $("tr").addClass("clicktr");//添加css，鼠标放到tr上为手型，css忽略
            $("tr").click(function () {
                $("tr").removeClass("clickedtr");//去掉所有的clickedtr样式
                $(this).addClass("clickedtr");   //单击某tr后，将该行的颜色标记下
 //加载数据效果，其实就是显示一张图片
                $("#AJAXMAIN").html("<img src='/content/images/load.gif' /><br />数据刷新中，请等待...");
                //执行查询
                search($(this).children('td').eq(1).html(), $(this).children('td').eq(2).html());
            })
        })
    </script>
}
<h2>.........</h2>
<br />
   ..........
<hr />
<div style="float:left;width:380px;margin:0 5px 0 0;">
<table>
    <tr><th>NO</th><th>这里是列....忽略........</th></tr>
    @foreach (System.Data.DataRow dr in Model.Rows)
    {
        <tr><td>@(i++)</td><td>这里是列....忽略........</td></tr>
    }
</table>
</div>
<!-- 右侧的grid -->
<div id="AJAXMAIN" style="float:left;width:auto;">
    <font style="font-size:40px; color:#CCCCCC">请单击左侧行<br />查看相应信息</font>
    @{Html.Action("AllGroupSKC"); }//局部View
</div>

　　

2.局部视图页面AllGroupSKC.cshtml

////////////////////////////////////////////////////////////////////////////////////////////////////////////
PartialView   AllGroupSKC.cshtml 内容如下

@model System.Data.DataTable
<table>
    <tr><th>.............</th></tr>
    @foreach (System.Data.DataRow dr in Model.Rows)
    {
        <tr><td>................</td></tr>
    }
</table>

　　

3.最后是Controller的方法

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
Controller.cs  方法
        //左侧数据
        [OutputCache(Duration = 300)]
        public ActionResult AllGroupShangDateSeries()
        {
            return View(DbHelperSQL.GetRecordByProc("P_AllGroupShangDateSeries"));
        }
        //右侧数据
        [OutputCache(Duration = 300)]
        public PartialViewResult AllGroupSKC(string fshangdate = "",string fseries="")
        {
            if (Request.IsAjaxRequest())
                return PartialView(DbHelperSQL.LRGroupSDSeries("P_AllGroupSKC", fshangdate, fseries));
            else
                return null;
        }

　　

博客声明

本站部分内容转自网络，如果侵害到您的权利，请及时联系我
转载请注明出处: http://www.cnblogs.com/qidian10
Mail:[email protected];QQ:710782046