首页 > Web开发 > 详细

.NET Bootstrap模态框数据绑定

时间:2019-12-26 14:45:13      阅读:98      评论:0      收藏:0      [点我收藏+]

模态框 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>

.NET Bootstrap模态框数据绑定

原文:https://www.cnblogs.com/dyd520/p/12101348.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!