用C#做床位一览功能(上)

开发工具与关键技术：VS/MVC
作者：何桂朋
撰写时间：2019年6月7日
我这个床位一览功能是医疗系统的一部分。

创建数据库是按照 每个区域中，有多栋楼房，每栋楼房中也有多楼层，
每层楼中又有多个房间，每个房间里放置床位，床位标志有床位号、床位费、病人ID

区域表：区域ID，区域名称
楼房表：楼房ID，区域ID，楼房名称
楼层表：楼层ID，楼房ID，楼层名称
房号表：房号ID，房号，楼层ID
床位表：床位ID，房号ID，病人ID，床位号，床位费

首先搭建一个区域的下拉框。

<div class="row">
<div class="col-form-label col-sm-3 text-right bor">区域：</div>
        <select class="col-form-label col-sm-6" id="Area">
           <option value="0">----请选择----</option>
         </select>
</div>
<script>
$(function () {
     appendOption("Area", "SelectArea");
 })
function appendOption(id, url) {
      $.getJSON(url, function (data) {
            $("#" + id).empty();
            $("#" + id).append("<option value=" + 0 + ">" + "----请选择----" + "</option>");
            $.each(data, function (i) {
        $("#" + id).append("<option value=" + data[i].id + ">" + data[i].text + "</option>");
           });
     });
}
</script>

控制器代码

public ActionResult SelectArea()
{
    var Department = (from tbArea in myModel.D_Area
                      select new
                      {
                         id = tbArea.AreaID,
                         text = tbArea.Areaname
                        }).ToList();
     return Json(Department, JsonRequestBehavior.AllowGet);
}

public ActionResult SelectArea()
{
    var Department = (from tbArea in myModel.D_Area
                      select new
                      {
                         id = tbArea.AreaID,
                         text = tbArea.Areaname
                        }).ToList();
     return Json(Department, JsonRequestBehavior.AllowGet);
}

然后更换下拉框，用失去焦点事件通过区域ID获取该区域的所有楼房的楼房ID、楼房名称。声名“btns”用于拼接切换卡，用楼房ID给切换卡“id”赋值。切换卡的“text”为楼房名称。

$("#Area").blur(function () {
    var btns = "";
    var AreaID = $("#Area").val();
$.post("/Nurseworkstation/BedView/FoolBySelectArea?AreaID=" + AreaID,
 function (data) {
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            if (i==0) {
 btns += '/<a class="nav-item nav-link active" data-toggle="tab" href="" id="' + data[i].FloorID + '" onclick="tabUse(this)">' + data[i].Floorname + '</a>'
            }
            else {
                   btns += '/<a class="nav-item nav-link" data-toggle="tab" href="" id="' + data[i].FloorID + '" onclick="tabUse(this)">' + data[i].Floorname + '</a>'
            }
        }
        $("#nav-tab").html(btns);
    })
});

效果如下：
点击下拉框，会显示该区域楼房名称和楼层。