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));elsereturn null;        }

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