如何用for循环出数据库的数据

开发工具与关键技术：Visual Studio、MVC
作者：幻奏
撰写时间：2019.5.30

在客房管理的系统中有很多不同的小格子，它们分别代表了不同的房间，可以动态的显示每间房间的状态，这个就是房态图。有很多系统应该都有类似房态图的东西吧。
大概就是这个样子的。
在这里插入图片描述
它就是根据数据库有多少房间就新增多少个格子，根据不同的房间状态，显示不同的颜色。好了，接下来就和你们讲一下我是如何写的，如果你有更好的方法，请告诉我。
我们要显示房态图当然要用linq查询出它的数据才可以啊。
所以我们的第一步就是查询出它的数据。

public ActionResult selectRoomState(){var linqRoom = (from tbRoom in myModel.PW_Roomjoin tbRoomState in myModel.S_RoomState on tbRoom.RoomStateID equals tbRoomState.RoomStateIDjoin tbRoomType in myModel.S_RoomType on tbRoom.RoomTypeID equals tbRoomType.RoomTypeIDselect new{RoomStateID =tbRoomState.RoomStateID,RoomNumber = tbRoom.RoomNumber,ForShort = tbRoomType.ForShort,RoomState = tbRoomState.RoomState,Reserve=tbRoom.Reserve}).ToList();return Json(new { linqRoom }, JsonRequestBehavior.AllowGet);}

我这里连了三张表，有房间类型的，有房间状态的，当然最主要的肯定是房间表啦，然后返回数据。
第二步就是for循环啦
因为我不单单要加载出和数据库一样的格子，还要根据不同的房间状态显示不同的颜色，所以我就要加上很多的判断才可以。循环加载出的格子嘛，当然是自己写的样式啦，我把不同的状态都写了一个类，用不同的颜色代表，还有客人预定的也是，我给它加了一个箭头，这样就差不多了。
首先我们写一个post请求控制器那里的方法，然后就是for循环，然后和linq查询出来的数量不一样就继续新增。

$(function () {$.post("/ShiShiFangTai/FangTai/selectRoomState", function (date) {for (var i = 0; i < date.linqRoom.length; i++) {if (date.linqRoom[i].RoomStateID == 1) {if (date.linqRoom[i].Reserve == true) {$("#xiaogz").append("<div class='greenGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p><span class='YDF'></span></div>")} else {$("#xiaogz").append("<div class='greenGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p></div>")}} else {if (date.linqRoom[i].RoomStateID == 2) {$("#xiaogz").append("<div class='blueGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p></div>")} else {if (date.linqRoom[i].RoomStateID == 3) {$("#xiaogz").append("<div class='purpleGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p></div>")} else {$("#xiaogz").append("<div class='grayGZ p-3'><p>" + date.linqRoom[i].RoomNumber + "</p><p>" + date.linqRoom[i].ForShort + "</p></div>")}}}}});});