Bootstrap】模态框（Modal）前后端传值

最近在帮公司写网站时，需要实现的一个功能就是点击按钮，弹出模态框，然后给表格中某一行添加一个信息，这个功能的本质其实就是利用模态框进行前后端的数值传递。下面对其中的一些过程记录如下：

思路分析：

该链路分为三个部分：

（1）button  （传递参数）

点击后，既引出模态框，又需要传递一个id值给模态框。

<td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal1" onclick="editInfo(@dataRow["id"])">消失</button></td>

模态框是利用：data-target="#myModal1" 

传递参数则是利用：οnclick="editInfo(@dataRow["id"])"

（2）javascript  （接受参数，并传递给模态框）

 <script>
       
        function editInfo(ID) {
            //获取行的id
            let id = ID;
            //设置表单的action,附加id参数
            $("#editForm").attr("action", "/one_student/ManagerAdd1?id=" + id);
        }
 </script>

这部分就是接收id值，然后利用模态框中表单的id值 editForm，将button中想传递的id值加入到url链接中，再传递给模态框。

（3）模态框部分

<!-- 消失模态框（Modal） -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        消失
                    </h4>
                </div>


                <form action="/one_student/ManagerAdd1" method="post" id="editForm">

                    
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">消失方位</label>

                        <input type="text" name="xiaoshi" class="form-control" id="xiaoshi">

                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">
                            关闭
                        </button>
                        <button type="submit" class="btn btn-primary">
                            提交
                        </button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->

其中，表单的id是editForm（用于与js对接），方式是post。

其实，最后再加上后端的处理函数，整个链路才算闭环。

public ActionResult ManagerAdd1(string xiaoshi,int id)
{

}

该函数接收模态框传来的id值，以及表单传递过来的xiaoshi的值。