MVC之模态框的使用（使用局部刷新，分部视图，传输多个Model，返回占位）

一、boostrap模态框的使用（编辑，新增功能）

（一）编辑功能（难）

1.使用Ajax.BeginForm辅助方法，通过提交表单(name值)，可先获取对象ID，再通过ID找到其对象

注意!!!（关键）：
(Ajax.BeginForm("_studentInfoByStuId", "manage",...）中的处理(控制器)的视图名要与分部视图同名

@using (Ajax.BeginForm("_studentInfoByStuId", "manage", new AjaxOptions
        {
         //要占位替换的元素ID
         UpdateTargetId = "ModalByGetStudent",
         //方式
         InsertionMode = InsertionMode.Replace,
         //提交方式
         HttpMethod = "POST"
　　　　}))
         {
　　　　 <input type="text" name="studentID" value="@item.ID" />

　　　　//注意!!!（关键）：submit处的onclick="$('#ModalByGetStudent').css('display', 'block');"模态框会自动隐藏(默认none)，需要我们手动将其display修改为“block”
        <input type="submit" value="" title="修改班级" id="editClassBtn" data-bs-toggle="modal" data-bs-target="#ModalByGetStudent" onclick="$('#ModalByGetStudent').css('display', 'block');"/>
       }

 　　　　　　　<!-- Start修改学生信息模态框占位符 -->
            <div class="modal" id="ModalByGetStudent" style="font-size:17px;">
                

            </div>
            <!--end修改学生模态框-->

 

2.控制器处理

 //POST：修改学生信息
        [HttpPost]
        public ActionResult _studentInfoByStuId()//(控制器)的视图名
        {
            //获取学生ID
            int sId = int.Parse(Request["studentID"]);           
            IEnumerable<Student> student = db.Student.Where(s => s.ID == sId).ToList();
            //民族
            IEnumerable<Nation> nationList = db.Nation.ToList();
            //专业
            IEnumerable<Professional> ProfessionalList = db.Professional.ToList();
　　　　　　　//Tuple:传输多个Model，返回至分部视图（看自己需要，如果是单个就直接返回对应MODEL）
         var tupleModel = new Tuple<IEnumerable<Student>, IEnumerable<Nation>, IEnumerable<Professional>>(student,nationList,ProfessionalList);
            return PartialView(tupleModel);
            
        }

3.分布视图

//强类型转换
@model Tuple<IEnumerable<LoveManagementWeb.Models.Student>, IEnumerable<LoveManagementWeb.Models.Nation>, IEnumerable<LoveManagementWeb.Models.Professional>>


    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width: 750px;margin: 0 auto;">
            <form action="/manage/addStudent" method="post" id="addStudentForm">
                <label></label>
                <input type="text" name="TbClassID" value="" id="stuByclass" style="display:none;" />
                <div class="modal-header">
                    <h4 class="modal-title">修改学生</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body" style="height: 781px; width: 800px;">
                    基本信息
                    <hr>
                    <div>
                        <div class="row">
                            <div class="col-3" style="margin-left:10px;">
                                <span style="color: red;">*</span>姓名:
　　　　　　　　　　　　　　　　　　　//注意!!!（关键）：Model.Item1:表示强类型的第一个，要按顺序写，后面民族和专业的绑定同理
                                @foreach (var item in Model.Item1)
                                {
                                    <input type="text" class="form-control" name="StuName" id="StuName" value="@item.StuName" style="width:190px;" />
                                }

                            </div>
                            <div class="col-3" style="margin-left: 10px;">
                                <span style="color: red;">*</span>学号:
                                @foreach (var item in Model.Item1)
                                {
                                    <input type="text" class="form-control" id="StuNumber" value="@item.StuNumber" name="StuNumber" style="width:190px;" />
                                }
                            </div>
                            <div class="col-3" style="margin-left: 10px;">
                                性别:<select name="StuSex" class="form-select" style="width:190px;font-size:1.0em;">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-3" style="margin-left: 10px;">
                                <span style="color: red;">*</span>出生日期:
                                @foreach (var item in Model.Item1)
                                {
                                    <input type="date" name="Birthday" class="form-control" value="@item.Birthday" />
                                }
                                </div>
                            <div class="col-3" style="margin-left: 10px;">
                                <span style="color: red;">*</span>民族:<select name="StuNation" class="form-select" style="font-size: 1.0em;">
                                @foreach (var item in Model.Item2)
                                    {
                                        <option value="@item.NationalName">@item.NationalName</option>
                                    }
                                </select>
                            </div>
                            <div class="col-3" style="margin-left: 10px;">
                                政治面貌:<select name="StuPolStatus" class="form-select" style="font-size: 1.0em;">
                                    <option value="群众">群众</option>
                                    <option value="共青团员">共青团员</option>
                                    <option value="党员">党员</option>
                                </select>
                            </div>
                        </div>
                        <br>
                    </div>
                    学生特征
                    <hr>

                    <div style="margin-left: 70px;">
                        <div class="row">
                            <div class="col-12" id="FamilyStatusRadio">
                                <span id="CIdText" style="display:none">选中值为: {{ picked }}</span>
                                <input type="text" style="display:none;" name="Cid" value="" id="Cid" />
                                <div style="float:left;padding-right:10px;">
                                    家庭境况:
                                </div>
                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="radio" name="FamilyStatus" value="普通" v-model="picked" class="form-check-input" checked>
                                    <label for="普通">普通</label>

                                </div>

                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="radio" name="FamilyStatus" value="良好" v-model="picked" class="form-check-input">
                                    <label for="良好">良好</label>

                                </div>

                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="radio" name="FamilyStatus" value="贫困" v-model="picked" class="form-check-input">
                                    <label for="贫困">贫困</label>

                                </div>

                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="radio" name="FamilyStatus" value="建档立卡户" v-model="picked" class="form-check-input">
                                    <label for="建档立卡户">建档立卡户</label>
                                </div>


                            </div>

                        </div>
                        <div class="row" style="font-size:15px;">
                            <div class="col-12">

                                <div style="float:left;padding-right:10px;">
                                    重点标注:
                                </div>
                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="checkbox" class="form-check-input" id="check1" name="KeyMark" value="入党积极分子">
                                    <label class="form-check-label" for="check1">入党积极分子</label>
                                </div>

                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="checkbox" class="form-check-input" id="check2" name="KeyMark" value="贫困生">
                                    <label class="form-check-label" for="check1">贫困生</label>
                                </div>

                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="checkbox" class="form-check-input" id="check3" name="KeyMark" value="孤残">
                                    <label class="form-check-label" for="check1">孤残</label>
                                </div>

                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="checkbox" class="form-check-input" id="check4" name="KeyMark" value="单亲">
                                    <label class="form-check-label" for="check1">单亲</label>
                                </div>

                                <div class="form-check" style="float:left;padding-right:10px;">
                                    <input type="checkbox" class="form-check-input" id="check5" name="KeyMark" value="烈士子女">
                                    <label class="form-check-label" for="check1">烈士子女</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    其他信息
                    <hr>
                    <div class="row">
                        <div class="col-6">
                            手机号码:
                            @foreach (var item in Model.Item1)
                            {
                                <input type="text" class="form-control" id="Phone" style="width:300px;" name="Phone" placeholder="11位手机号" value="@item.Phone" />
                            }
                        </div>
                        <div class="col-6">

                            身份证号:
                            @foreach (var item in Model.Item1)
                            {
                                <input type="text" class="form-control" id="IdentityCard" style="width:300px;" name="IdentityCard" value="@item.IdentityCard" />
                            }
                        </div>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col-6">
                            籍贯:
                            @foreach (var item in Model.Item1)
                            {
                                <input type="text" class="form-control" id="NativePlace" name="NativePlace" style="width:300px;" value="@item.NativePlace" />
                            }

                            </div>
                        <div class="col-6">
                            家庭住址:
                            @foreach (var item in Model.Item1)
                            {
                                <input type="text" class="form-control" id="Address" name="Address" style="width:300px;" value="@item.Address" />
                            }

                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-6">
                            专业:<select name="Professional" class="form-select" style="width:300px;font-size:1.0em;">
                            @foreach (var item in Model.Item3)
                            {
                                <option value="@item.ProfessionalName">@item.ProfessionalName</option>
                            }
                                </select>
                        </div>
                        <div class="col-6">
                            招生类型:<select name="AdmType" class="form-select" style="width:300px;font-size:1.0em;">
                                <option value="统招">统招</option>
                                <option value="预科">预科</option>
                                <option value="专升本">专升本</option>
                            </select>
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal" style="background-color: white;color: dimgray;border: 1px solid darkgray;">取消</button>
                    <input type="submit" value="保存" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: #40a9ff;border: 1px solid #40a9ff;" />
                </div>
            </form>
        </div>

    </div>


<!--End修改学生模态框-->

 

_studentInfoByStuId