我想在从 Bootstrap 打开模型时传递一个 Id。我有一张 table ，想点击该行来执行此操作。我正在使用母版页，我正在母版页末尾加载 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">×</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>
最佳答案
$(this).data('id'); 实际上应该是 $(this).attr('data-id');
而且您提供的代码中不存在 ContentPlaceHolder1_Content3_HLineNumber。所以值(value)无处可去
关于javascript - 使用 bootstrap 模型传递 Id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33308066/