MVC3.0 采用Jquery实现局部刷新
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"
);
returnfalse;
}
//准备
$(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
returnnull;
}
版权声明:本文为qidian10原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。