ASP.NET Bootstrap模态框数据绑定

模态框 html

模态框弹出关键参数：

　　data-toggle="modal" data-target="#模态框ID"

<%-- 模态框按钮--%>
<button id="Buttonadd" type="button" class="btn btn-rounded btn-primary" data-toggle="modal" data-target="#myModal">
    新增记录
</button>
<!-- 模态框（Modal） -->
<div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">添加麸皮入库记录</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <span class="form-control-label" id="basic-addon" hidden="hidden">id:</span>
                        <asp:TextBox ID="BranEnterID" class="form-control" placeholder="id" Style="display: none"
                            aria-describedby="basic-addon1" runat="server"></asp:TextBox>
                        <span class="form-control-label" id="basic-addon1">姓名:</span>
                        <asp:TextBox ID="BranEnterName" class="form-control" placeholder="姓名"
                            aria-describedby="basic-addon1" runat="server"></asp:TextBox>
                        <asp:ScriptManager ID="ScriptManager1" runat="server">
                        </asp:ScriptManager>
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                <span class="form-control-label" id="basic-addon2">斤数类型:</span>
                                <asp:DropDownList ID="ddlWeightType" CssClass="form-control" runat="server" AutoPostBack="true"></asp:DropDownList>

                                <span class="form-control-label" id="basic-addon4">审核批准人:</span>
                                <asp:DropDownList ID="ddlApprover" CssClass="form-control" runat="server" AutoPostBack="true"></asp:DropDownList>
                            </ContentTemplate>
                        </asp:UpdatePanel>

                        <span class="input-group-addon" id="basic-addon3">总数:</span>
                        <asp:TextBox ID="BranSum" class="form-control" placeholder="总数" aria-describedby="basic-addon1" runat="server"></asp:TextBox>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <asp:Button ID="Button3" class="btn btn-primary" runat="server" Text="保存" OnClick="Button3_Click" />
                </div>
            </div>
        </div>
    </div>
</div>

数据绑定按钮

数据绑定格式：

　　data-[名字]=绑定的数据

<input type="button" value="修改" data-toggle="modal" data-target="#myModal" class="btn btn-rounded btn-primary"
    data-id='<%# Eval("id") %>'
    data-sum='<%# Eval("bran_sum_number") %>'
    data-userid='<%# Eval("approver_id") %>'
    data-name='<%# Eval("bran_enter_name") %>'
    data-type_name='<%# Eval("bran_weight_type_id") %>' 
/>

Jquery部分

<script>   
    $(function () {
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var modal = $(this); 
            modal.find('.modal-title').text('修改麸皮入库记录');

            modal.find('#BranEnterID').val(button.data('id'));
            modal.find('#BranSum').val(button.data('sum'));
            modal.find('#ddlApprover').val(button.data('userid'));
            modal.find('#BranEnterName').val(button.data('name'));
            modal.find('#ddlWeightType').val(button.data('type_name'));
        })
    })
</script>