ASP.NET.MVC查询出div的形式并显示出来的方法

开发工具与关键技术：VS2015  MVC
作者：超级小贱贱
撰写时间：2019年6月8日

学习到今天，用过的查询方法也已经滚瓜烂熟，普遍都是查询出数据并显示在页面插件数据表格中，当然你也可以自己创建。这一次呢我将分享一下一种新的查询方法，查出来的虽然也是数据，但是显示的效果不同，而是一个个的“div”却在Html层那里不用一个个的写那么多的div，下面就详细说说如何做到的吧。
先是控制器这边（本人喜欢先说控制器代码后写视图层，不喜勿喷），跟之前的那些查询方法没什么不同，都是一样的。首先，搭建好基本的代码public ActionResult RoomState(string RoomNumber)，然后声明一个变量 list 等于=from 自定义表名1房台表）tbRoom in myModels.(表名)SYS_Room，接着连接多表查询join 自定义表名2（房台状态表）tbRoomState in myModels.SYS_RoomState on 自定义表名1.RoomStateID equals tbRoomState.RoomStateID ，接着下一行select new RoomVo，这里的 RoomVo 是自己创建的一个新的类，主要是用来嵌套数据的，这样会比较方便点，接着在用一个{ }括号括着下面的内容:
RoomID = tbRoom.RoomID, 房台ID
RoomNumber = tbRoom.RoomNumber, 房台号
RoomName = tbRoom.RoomName, 房台名
RoomStateID = tbRoomState.RoomStateID 房台状态ID
这里有个判断，要确定房台号不能为空，因为在右边有个模糊查询input框（这不是今天的重点）
if (!string.IsNullOrEmpty(RoomNumber))
{
list = list.Where(m => m.RoomNumber.Contains(RoomNumber.Trim()));
}
最后在返回那个list，控制器的代码就完成了。
return Json(list, JsonRequestBehavior.AllowGet);

来到视图层，先在Html那边把要显示出来的房台div的位置给足

				<div class="col-lg-10 col-md-10 col-sm-10">
                	<div class="FangTaiBiao fl" id="FangTaiBiao">
                    	<ul class="col-lg-12 col-md-12 col-sm-12"></ul>
                	</div>
           		</div>

要给样式的对象：.FangTaiBiao 按照自己喜欢的样子去给就行
.FangTaiBiao > ul li 这里面的li呢，确实不在Html里，
.FangTaiBiao > ul li:hover 不过马上它就会出现
.FangTaiBiao > ul li div
接着来到<script></script>层，先给一个页面加载事件$(function () {,这里我选择的是使用Post的提交方法$.post("RoomState",function(Data)，给个参数Data，在括起来，给个for循环（声明一个变量，i=0，当i<上面给的参数Data长度length的时候，i++自增）接着继续声明一个变量RoomStateID（房台状态ID）=参数Data[变量i].RoomStateID，下面关键的地方来了，因为我一共有三个房台状态，分别是“可用台=2”，“已用台=3”，“停用台=4”，所以我就只给三个if，下面是方法：if（RoomStateID==2）如果房台状态ID等于2，就相当于是可用台，那么接着就$("#FangTaiBiao ul")选中左边装房态图的框框ID里面的ul，这里面的ul就是每个房台框，在css3给好样式大小就OK了，然后最关键的地方来了，$("#FangTaiBiao ul").append（），append是什么呢？样式嵌套，没有这个方法的加载，全部功夫都是徒劳的，继续，'<li align="center" class=" green" ondblclick="check()" id=" " ' 这里面的 li 就会被通过append方法嵌套进 ul 标签里面，接着让里面的内容居中显示，在给个类“green”，去到css3给颜色即可，在给个双击事件（双击房台可以打开某个功能，拓展吧），最后在给个id=，这里为什么要给id呢，+ Data[i].RoomID + '"><div>'，看出来了吗，它是要通过id去查询数据库的房台内容，从而到达在页面显示出房台号和房台名，既然需要用到房台号和房台名，那么就要继续获取到对应的 RoomNumber 和 RoomName

			+ Data[i].RoomNumber + '</div><div>'
            + Data[i].RoomName + '</div>' + '</li>')

这是房台状态=2为可用台的时候，剩下的=3已用台和=4停用台写法都是一样的，只要在else后面继续写个if衔接着就OK了，下面是效果图

其中绿色的就是可用台，蓝色的就是已用台，最后灰色的就是停用台，这样就可以实现一打开页面房台就会以 div 的形式显示出来。

下面加个拓展内容，就是一打开页面的时候，不仅仅会自动显示出这些房台 div ，右侧还有统计所有房间状态的统计数据，而且它会根据房台状态的改变去改变数字，下面就要讲解一下如何实现这个功能。
首先是控制器这边，常规创建好开头public ActionResult AllRoom(){ 统计所有房间，声明一个变量var list=（from tbRoom in myModels.SYS_Room
select tbRoom).Count();再用count来统计或者查询出有多少条数据
return Json(list, JsonRequestBehavior.AllowGet);最后返回list就搞定了。
}
紧接着就是统计可用台，创建好开头public ActionResult UsableRoom(){
声明一个变量var list = (from tbRoom in myModels.SYS_Room
join tbRoomState in myModels.SYS_RoomState on tbRoom.RoomStateID
equals tbRoomState.RoomStateID
where tbRoomState.RoomStateID == 2
select tbRoom).Count();
}
先是多表连接查询到房台状态表，在用where 指定只有是房台状态ID=2的时候才能被Count统计显示出来，剩下的 统计已用台 ，统计停用台方法，都和上述查询方法一样，只要将房台状态ID更改为 3 和 4 就OK
控制器这边就完成了。接下来就是视图层，非常简单，只需要请求一下在控制器写的方法就行。

$.post("AllRoom", function (data) {     全
	$("#AllRoom").val(data);					部
});															 台

$.post("UsableRoom", function (data) { 					可
	$("#UsableRoom").val(data); 								用
}); 																			台

$.post("UsingRoom", function (data) { 				已
	$("#UsingRoom").val(data); 							用
}); 																		台

$.post("BreakRoom", function (data) { 				停
	$("#BreakRoom").val(data);  							用
}); 																		台

下面是效果图

不信的话，可以去数数。