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

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

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

public ActionResult selectRoomState()
        {
            var linqRoom = (from tbRoom in myModel.PW_Room
                            join tbRoomState in myModel.S_RoomState on tbRoom.RoomStateID equals tbRoomState.RoomStateID
                            join tbRoomType in myModel.S_RoomType on tbRoom.RoomTypeID equals tbRoomType.RoomTypeID
                            select 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("

" + date.linqRoom[i].RoomNumber + "

" + date.linqRoom[i].ForShort + "

"
) } else { $("#xiaogz").append("

" + date.linqRoom[i].RoomNumber + "

" + date.linqRoom[i].ForShort + "

"
) } } else { if (date.linqRoom[i].RoomStateID == 2) { $("#xiaogz").append("

" + date.linqRoom[i].RoomNumber + "

" + date.linqRoom[i].ForShort + "

"
) } else { if (date.linqRoom[i].RoomStateID == 3) { $("#xiaogz").append("

" + date.linqRoom[i].RoomNumber + "

" + date.linqRoom[i].ForShort + "

"
) } else { $("#xiaogz").append("

" + date.linqRoom[i].RoomNumber + "

" + date.linqRoom[i].ForShort + "

"
) } } } } }); });

记得在HTML的div加上ID。因为是新增在那个div里面。
这样就可以一个一个的新增那些小格子了。

你可能感兴趣的:(MVC)