ASP.NET MVC 可以将视图绑定数据,非常方便地做数据展现。具体做法是在控制器中获取数据,然后采用Return View(data)的方式将数据发送到视图,在视图中使用@model IEnumerable<T>的形式来获取数据,在数据展现时,我们使用@foreaach的方式,具体如下:
1.控制器
public ActionResult Index()
{
return View(EmployeeViewModel.Employees);
}
2.视图
@model IEnumerable<AspNetMvcDemo.Models.Employee>
3.展示
<table>
@foreach (var item in @Model)
{
<tr>
<td>@item.Id</td>
<td>@item.EmloyeeId</td>
<td>@item.EmloyeeName</td>
<td>@item.Role</td>
<td>@item.Department</td>
</tr>
}
</table>
效果如下:
非常朴素的效果,并不美观,可以请美工做一些工作,但是美工通常给出的样式是静态页面的。他们只会给出行在选中状态下的css class及鼠标滑过的时候的css class,但是问题来了,我们的这个列表是根据数据生成的,如果给tr标签增加选中的class,所有的行都是选中的,同理,也不能给鼠标滑过的css,这时候我们需要自己写行的mouseover和mouseout函数,同时还要实现click的函数。听起来复杂,做起来很简单。
1.css 样式
<style type="text/css">
.on{
background-color:red
}
.over{
background-color:lightblue
}
.out{
background-color:#FFFFFF
}
</style>
2.js
<script type="text/javascript">
$(document).ready(function () {
$("tr").mouseover(function () {
$(this).addClass("over");
})
$("tr").mouseout(function () {
$(this).removeClass("over");
})
$("tr").click(function () {
$(this).removeClass("over")
$(this).removeClass("over").addClass("on");
})
});
</script>
3.列表
<table id="tab">
@foreach (var item in @Model)
{
<tr>
<td>@item.Id</td>
<td>@item.EmloyeeId</td>
<td>@item.EmloyeeName</td>
<td>@item.Role</td>
<td>@item.Department</td>
</tr>
}
</table>
效果如下:
鼠标滑过和鼠标选中的样式就都有了。
有的同学会提到多行选中的问题,通常是加check box列,这个有待研究。