ASP.NET.MVC 移入房台显示信息

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

关于题目想要实现的功能是什么呢？先看一下截图

如图所示，当我鼠标移到“01”号房台的时候，（触发伪类变色证明我鼠标是放在了“01”号房台）最底下就会自动显示出一个信息 div ，里面装着对应房台的一些具体信息，然后当我鼠标移出去的时候那个 信息 div 就又会自动消失，就是要做到想要就要不想要就不想要的目的，下面是实现功能的方法。
首先来到控制器，先分析，因为鼠标移入就会自动显示对应的一些信息，所以是数据回填，那么数据回填就要在控制器写个“根据ID查询对应信息”的方法，那么接下来就是连表查询数据代码，具体代码就不敲了，说明一下细节就好，因为房台ID和预定消费ID都是一一对应的，所以要用.Single();结尾，记得喔，有Single（）最好就用try……catch来包裹着全部代码，这样一来发生错误比较好找。
然后来到视图层写JS代码，首先得去到生成房台的拼接循环代码里面给两个方法名，分别是“鼠标移入事件οnmοuseοver=“Move(this)”” 和“鼠标移出事件οnmοuseοut=“Left(this)””，括号里面的this的作用是用来获取一下关于每个房台的一些基本信息，用来方便获取数据对接相等，记得给那两个方法的时候一定要注意好，当房台处于什么状态的时候，还有，是否属于空房或者预定房，在给控制器方法，别的房台的话比如说“停用台”，就可以直接显示对应的房台状态就行了，随机应变就好。
接着先写鼠标移入事件方法，这里要注意一个小细节，就是一开始先把那个显示信息的div 隐藏起来，给个display：none；就搞定了，然后在鼠标移进去的一开始就先让信息div显示出来，随后获取我鼠标移进的那个房台的id来回填数据，还记得前面说过的移入移出事件后面的（this）了吗，没错，就是要根据它来获取id。RoomId=LJ.id;那个RoomId是一个全局变量，随机应变，然后提交方法回填数据

然后鼠标移入事件就完成了。
最后是鼠标移出事件，其实非常简单，就一句话，document.getElementById(‘HideRoom’).style.display=‘none’;在让那个div隐藏起来不就好了吗？最后就可以达成开头说的鼠标移进去，那个信息 div 就会显示出来并回填对应的数据，一移出它就会自动隐藏。