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"
　　　　}))
         {
　　　　 "text" name="studentID" value="@item.ID" />

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

2.控制器处理

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

3.分布视图

//强类型转换
@model Tuple, IEnumerable, IEnumerable>


    class="modal-dialog modal-lg">
        class="modal-content" style="width: 750px;margin: 0 auto;">
            "/manage/addStudent" method="post" id="addStudentForm">
                
                "text" name="TbClassID" value="" id="stuByclass" style="display:none;" />
                class="modal-header">
                    class="modal-title">修改学生
                    
                

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

                            
                            class="col-3" style="margin-left: 10px;">
                                "color: red;">*学号:
                                @foreach (var item in Model.Item1)
                                {
                                    "text" class="form-control" id="StuNumber" value="@item.StuNumber" name="StuNumber" style="width:190px;" />
                                }
                            
                            class="col-3" style="margin-left: 10px;">
                                性别:<select name="StuSex" class="form-select" style="width:190px;font-size:1.0em;">
                                    
                                    
                                select>
                            
                        
                        

                        class="row">
                            class="col-3" style="margin-left: 10px;">
                                "color: red;">*出生日期:
                                @foreach (var item in Model.Item1)
                                {
                                    "date" name="Birthday" class="form-control" value="@item.Birthday" />
                                }
                                
                            class="col-3" style="margin-left: 10px;">
                                "color: red;">*民族:<select name="StuNation" class="form-select" style="font-size: 1.0em;">
                                @foreach (var item in Model.Item2)
                                    {
                                        
                                    }
                                select>
                            
                            class="col-3" style="margin-left: 10px;">
                                政治面貌:<select name="StuPolStatus" class="form-select" style="font-size: 1.0em;">
                                    
                                    
                                    
                                select>
                            
                        
                        

                    

                    学生特征
                    

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

                                

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

                                

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

                                

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


                            

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

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

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

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

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

                                class="form-check" style="float:left;padding-right:10px;">
                                    "checkbox" class="form-check-input" id="check5" name="KeyMark" value="烈士子女">
                                    class="form-check-label" for="check1">烈士子女
                                
                            
                        
                    
                    

                    其他信息
                    
                    class="row">
                        class="col-6">
                            手机号码:
                            @foreach (var item in Model.Item1)
                            {
                                "text" class="form-control" id="Phone" style="width:300px;" name="Phone" placeholder="11位手机号" value="@item.Phone" />
                            }
                        
                        class="col-6">

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


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

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

                        
                    
                    

                    class="row">
                        class="col-6">
                            专业:<select name="Professional" class="form-select" style="width:300px;font-size:1.0em;">
                            @foreach (var item in Model.Item3)
                            {
                                
                            }
                                select>
                        
                        class="col-6">
                            招生类型:<select name="AdmType" class="form-select" style="width:300px;font-size:1.0em;">
                                
                                
                                
                            select>
                        
                    
                


                class="modal-footer">
                    
                    "submit" value="保存" class="btn btn-primary" data-bs-dismiss="modal" style="background-color: #40a9ff;border: 1px solid #40a9ff;" />

_studentInfoByStuId

Asp.netMVC

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

class="modal-title">修改学生

相关

Asp.Net Mvc + ComBoost.Mvc快速开发

这算是ASP.NET MVC的一个大BUG吗？

ASP.NET MVC5多语言切换快速实现方案

【ASP.NET MVC系列】浅谈数据注解和验证

ASP.NET MVC之从视图传递数据到控制器

ASP.NET MVC 在项目中使用面包屑导航

如何在现有的ASP.NET MVC项目上添加WEB API

在ASP.NET MVC 中获取当前URL、controller、action

asp.net mvc5中的过滤器重写

Asp.net mvc 大文件上传断点续传

[ASP.NET MVC] Real-time之HTML5 服务器发送事件（server-sent event）

asp.net -mvc框架复习（4）-ASP.NET MVC中的约定规则

标签