使用bootstrap模型传递Id

时间:2015-10-23 17:18:51

标签: javascript c# jquery html twitter-bootstrap

当我从bootstrap打开模型时,我想传递一个Id。我有一个表,想要点击该行来执行此操作。我正在使用母版页,我在母版页的末尾加载了jquery和bootstrap。 模型显示并工作,但隐藏的字段永远不会得到一个值。 另外,当我在我的页面(不是母版页)中移动脚本时,我会得到相同的行为。

由于

到目前为止尝试过:

<td data-toggle="modal" class="open" data-target="#OpenLine" data-id="<%# Eval("LineId") %>"><%# Eval("Quantity") %></td>

与 这是在我的母版页底部

<link rel="stylesheet" href="../../Libraries/Bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../../Libraries/Bootstrap/css/bootstrap-theme.css" type="text/css" />
<link rel="stylesheet" href="../../Libraries/Jquery-ui/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="../../Libraries/Jquery-ui/jquery-ui.theme.css" type="text/css" />
<link rel="stylesheet" href="../../Libraries/Jquery-ui/jquery-ui.structure.css" type="text/css" />
<link rel="stylesheet" href="../../Css/simple-sidebar.css" type="text/css" />

<script src="../../Libraries/Jquery/jquery.js" type="text/javascript"></script>
<script src="../../Libraries/Bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../../Libraries/Jquery-ui/jquery-ui.js" type="text/javascript"></script>
<script src="../../Javascript/timepicker.js" type="text/javascript"></script>

<script>
    $(function () {

        var active = true;

        $('#collapse-init').click(function () {
            if (active) {
                active = false;
                $('.panel-collapse').collapse('show');
                $('.panel-title').attr('data-toggle', '');
                $(this).text('Enable accordion behavior');
            } else {
                active = true;
                $('.panel-collapse').collapse('hide');
                $('.panel-title').attr('data-toggle', 'collapse');
                $(this).text('Disable accordion behavior');
            }
        });

        $('#accordion').on('show.bs.collapse', function () {
            if (active) $('#accordion .in').collapse('hide');
        });

    });

    $(".open").click(function () {
        var myBookId = $(this).attr('data-id');
        $("ContentPlaceHolder1_Content3_HLineNumber").val(myBookId);
        // As pointed out in comments, 
        // it is superfluous to have to manually call the modal.
        // $('#addBookDialog').modal('show');
        alert(myBookId);
    });
</script>

我的模特

<div class="modal fade bs-example-modal-lg" id="OpenLine" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Order Line</h4>
            </div>
            <div class="modal-body" style="text-align: center; vertical-align: top; background-color: #F7F7F7;">
                <asp:HiddenField ID="HLineNumber" runat="server" />
                <div id="LeftPane" style="display: inline-block; width: 50%; height: 620px; position: relative; float: left; background-color: white;">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist" style="background-color: white;">
                        <li role="presentation" class="active"><a href="#Basic" aria-controls="Basic" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>Basic</a></li>
                        <li role="presentation"><a href="#Styling" aria-controls="Styling" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Styling</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content" style="background-color: white;">
                        <div role="tabpanel" class="tab-pane active" id="Basic">
                            <table style="margin: 10px; padding: 10px; text-align: left;">
                                <tr>
                                    <td>Model: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TModel" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Species: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TSpecies" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Thickness: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TThickness" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Width: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TWidth" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Height: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="THeight" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Stile Width: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TStileWidth" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Top Rail: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TTopRail" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Sticking: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TSticking" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Panel: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TPanel" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Fire Rating: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TFireRating" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                            </table>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="Styling">
                            <table style="margin: 10px; padding: 10px; text-align: left;">
                                <tr>
                                    <td>Glass Type: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TGlassType" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Glass Thickness: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TGlassThickness" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Louver Type: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TLouverType" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Louver Size: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="TLouverSize" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Dutch Door: </td>
                                    <td style="padding: 5px;">
                                        <asp:RadioButton ID="YesDucth" runat="server" Text="Yes" GroupName="Dutch" />
                                        <asp:RadioButton ID="NoDutch" runat="server" Text="No" Checked="True" GroupName="Dutch" /></td>
                                </tr>
                                <tr>
                                    <td>Veneer: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="Veneer" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Bevel: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="Bevel" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Swing: </td>
                                    <td style="padding: 5px;">
                                        <asp:TextBox ID="Swing" CssClass="form-control" Width="150" runat="server" Height="30"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Protection Film: </td>
                                    <td style="padding: 5px;">
                                        <asp:RadioButton ID="YesFilm" runat="server" Text="Yes" GroupName="Film" />
                                        <asp:RadioButton ID="NoFilm" runat="server" Text="No" Checked="True" GroupName="Film" /></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="RightPane" style="display: inline-block; width: 50%; height: 620px; background-color: white;">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist" style="background-color: white;">
                        <li role="presentation" class="active"><a href="#image" aria-controls="image" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span>Image</a></li>
                        <li role="presentation"><a href="#Description" aria-controls="Description" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-list" aria-hidden="true"></span>Description</a></li>
                        <li role="presentation"><a href="#Pricing" aria-controls="Pricing" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-usd" aria-hidden="true"></span>Pricing</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content" style="background-color: white;">
                        <div role="tabpanel" class="tab-pane active" id="image">
                            <%if (ImagePath != "")
                              { %>
                            <embed id="svgImage" src="<%=ImagePath %>" type="image/svg+xml" class="svg-image" pluginspage="http://www.adobe.com/svg/viewer/install/" wmode="transparent" style="height: 568px;" />
                            <%} %>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="Description">...</div>
                        <div role="tabpanel" class="tab-pane" id="Pricing">...</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <asp:Button ID="BSaveLine" CssClass="btn btn-primary" runat="server" Text="Save" UseSubmitBehavior="False" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
    <asp:HiddenField ID="HiddenField7" runat="server" />
    <asp:HiddenField ID="HiddenField8" runat="server" />
    <asp:HiddenField ID="HiddenField9" runat="server" />
</div>

1 个答案:

答案 0 :(得分:0)

$(this).data('id');实际应该是$(this).attr('data-id');

并且您提供的代码中也不存在ContentPlaceHolder1_Content3_HLineNumber。所以价值不在哪里