Asp.Net MVC使用分部视图实现二级级联

实现功能： 根据选择的科室，加载医生列表的数据源。

实现页面效果

具体实现如下：

首先创建了医生下拉框的分部视图，

PartialViewDoctorDuty.cshtml代码如下：

</pre><pre name="code" class="csharp">@Html.DropDownList("DoctorId", ViewData["dutydoctorid"] as SelectList, "=请选择=", new { @class = "m-wrap small" })

主页面

DoctorDutyCreate.cshtml<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">代码如下：</span>

@Scripts.Render("~/Scripts/jquery-1.9.1.js")
<script type="text/javascript">
    $(document).ready(init);

    function init() {
        $("select[name='Roomid']").change(function () {
            var selectedroomid = $(this).val();
            Showdoctors(selectedroomid);
        });
    }

    function Showdoctors(roomid) {
        $.ajax({
            url: "@Url.Action("GetHopDoctorList", "RegistrationManage")",
            data: { roomid: roomid },
            success: function (data) {
                $("#dutydoctorid").html(data);
            }
        });
    }
</script>


<div class="widget-box">
    <div class="widget-title">
        <span class="icon"><i class="icon-th"></i></span>
        <h5>@ViewBag.Type</h5>
    </div>
    <div class="widget-content nopadding">
        @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "search-form", enctype = "multipart/form-data" }))
        { @Html.AntiForgeryToken()
            <table class="table table-bordered data-table">
                <tbody>
                   
                    <tr>
                        <td>科室：</td>
                        <td>
                            @Html.DropDownListFor(T => T.Roomid,ViewData["QueryRoomsList"] as SelectList, "=请选择=")
                            @Html.ValidationMessageFor(t=>t.Roomid)
                        </td>
                        <td>医生：</td>
                        <td>
                            <div id="dutydoctorid">
                                @Html.Partial("PartialViewDoctorDuty")
                                @Html.ValidationMessageFor(t => t.DoctorId)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <div class="form-actions form-operate text_center ">
                                <input type="submit" value="保存" class="btn btn-success" />
                                @Html.ActionLink("返回列表", "toList", new { }, new { @class = "btn btn-danger" })
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        }
    </div>
</div>

</pre><pre name="code" class="csharp">Controller代码：

<pre name="code" class="csharp">       #region 新增 医生排班
        public ActionResult DoctorDutyCreate()
        {
            var model = new DoctorDutyButty();
            int HospitalId = 1;

            //科室数据源
            var roomlist = db.OrgnizationSet.Find(HospitalId).Room.ToList();
            ViewData["QueryRoomsList"] = new SelectList(roomlist, "Id", "RoomName");
            //医生数据源初始数据为空
            List<SelectListItem> list = new List<SelectListItem>();
            ViewData["dutydoctorid"] = new SelectList(list, "Id", "DoctorName");

            ViewBag.Type = "新增";
            return View("DoctorDutyCreate", model);
        }
        #endregion


        //新增-医生排班页面-根据科室加载医生数据源
        public ActionResult GetHopDoctorList(int roomid)
        {
            int HospitalId = 1
            var doctorlist = db.DoctorSet.Where(m => m.RoomId == roomid).ToList();
            ViewData["dutydoctorid"] = new SelectList(doctorlist, "Id", "DoctorName");
            return PartialView("PartialViewDoctorDuty");
        }