转自 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:ovenjackchain@gmail.com;QQ:710782046
转载请注明出处: http://www.cnblogs.com/qidian10
Mail:ovenjackchain@gmail.com;QQ:710782046
