[英]How to add gridview on modal bootstrap with dynamic parameter from multiple button
我一直在寻找在模态上显示gridview的解决方案。 gridview正确显示,没有错误,问题在于它的参数。 我意识到gridview是运行任何javascript之前的进程。 但是我需要它在单击模式按钮时显示。 此按钮将数据更改为模态,并且应更改sqldatasource的参数,这也会更改gridview内容。
这是我的javascript
$(document).ready(function () {
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var ckpt = button.data('whatever')
var clss = button.data('dtclass')
var modal = $(this)
modal.find('.modal-title').text(clss)
modal.find('.modal-title2').text(ckpt)
document.getElementById('ContentPlaceHolder1_lblckpt').innerText = clss;
})})
这是客户代码
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-dtclass="I010" data-whatever="Diameter">Go!</button></td>
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-dtclass="I030" data-whatever="Thickness">Go!</button></td>
这是我的GridView模态
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<p id="exampleModalLabel" style="font-size:22px;">Checkpoint :<asp:Label ID="txtckpt1" runat="server" class="form-control-label modal-title" style="font-size:22px;"></asp:Label> ~ <label id="txtckpt2" runat="server" class="form-control-label modal-title2" style="font-size:22px;"></label></p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txtequi" class="form-control-label">Equipment</label>
<table>
<tr>
<td colspan="2">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderStyle="Solid" BorderWidth="1px" ShowHeaderWhenEmpty="true"
CellPadding="3" DataSourceID="sdtequi"
OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:ButtonField Text="Delete" ControlStyle-ForeColor="Firebrick" CommandName="Select" ItemStyle-Width="30" />
<asp:BoundField DataField="mequid" HeaderText="Equipment" SortExpression="mequid" />
<asp:BoundField DataField="mequnm" HeaderText="Description" SortExpression="mequnm" />
<asp:BoundField DataField="mergdt" HeaderText="Creation Date" SortExpression="mergdt" DataFormatString="{0:dd/MM/yyyy}" />
<asp:BoundField DataField="meusid" HeaderText="User ID" SortExpression="meusid" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="sdtequi" runat="server" ConnectionString="<%$ ConnectionStrings:myConnectionString %>"
ProviderName="<%$ ConnectionStrings:m3ConnectionString.ProviderName %>" SelectCommand="SELECT mequid, mequnm, mergdt, meusid FROM fcis.mechkp WHERE mecpid = ? ORDER BY mequid">
<SelectParameters>
<asp:ControlParameter DefaultValue="" ControlID="lblckpt" Name="lblckpt" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</td>
</tr>
</table>
</div>
<div class="form-group">
<label for="txtckpt" class="form-control-label">LI Class</label>
<table>
<tr>
<td><asp:TextBox runat="server" ID="txtckpt" class="form-control"></asp:TextBox></td>
<td><button type="button" class="btn btn-primary">Add</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
如您所见,模态打开后,我将值设置为lblckpt标签(使用javascript)。 然后将sqldatasource参数链接到lblckpt,以便可以显示gridview数据。 我的项目中没有错误,此外,我尝试对参数进行硬编码,并且该参数可以正常工作。 请给我建议或解决方案。
如果有人使用gridview有解决方案,请告诉我。 现在,我找到了使用AJAX aspx的解决方案。 这是我正在使用的代码。 我喜欢它,因为它具有更好的性能,并且无需刷新整个页面就可以获取实时数据。
这是javascript
function AddTableEqui(clss){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
document.getElementById("div1").innerHTML = xhr.responseText;
}
xhr.open("GET", "GetEqui.aspx?clss=" + clss, true);
xhr.send(null);
}
然后,我在GetEqui.aspx中对表格进行编码,并使用response.write()返回所有html标记。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.