[英]How to add Function into Gridview?
I have a Gridview contain button我有一个 Gridview 包含按钮
<asp:GridView ID="Gridview1" runat="server">
<Columns>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<button type="button">Click me</button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
and I want to add bootstrap Modal我想添加引导程序模态
how can I add Onclick Function inside Gridview to push the bootstrap Modal如何在 Gridview 中添加 Onclick 函数来推送引导程序模态
Thx谢谢
Try this below example.试试这个下面的例子。 What I am doing here is creating a GridView, which has 2 columns.
我在这里做的是创建一个 GridView,它有 2 列。 The second column is button.
第二列是按钮。 When you click on the button, the Modal is shown displaying the value.
当您单击按钮时,会显示显示值的模态。
Note: I'm not showing the GridView bindings here which are the server-side.注意:我没有在此处显示服务器端的 GridView 绑定。 I assume you are aware of those.
我假设你知道这些。
This is the Aspx.这是aspx。 You don't need much to do here.
在这里你不需要做太多事情。
Aspx + Bootstrap
is very powerful and does the most Aspx + Bootstrap
非常强大,做的最多
<asp:GridView ID="Gridview11" runat="server">
<Columns>
<asp:TemplateField HeaderText="Item">
<ItemTemplate>
<label id="lblItem" runat="server" text='<%#Eval("ItemId")%>'></label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="<%#Eval("ItemId")%>">Click on '<%#Eval("ItemName")%>'</button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
This is the Bootstrap Modal part.这是 Bootstrap 模态部分。 Well, I usually get this from the Bootstrap as per my requirement
好吧,我通常根据我的要求从Bootstrap 中获取这个
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
Now, the last is the Javascript/JQuery that triggers the Modal现在,最后一个是触发 Modal 的 Javascript/JQuery
<script type="text/javascript" language="javascript">
$('#exampleModal').on('shown.bs.modal',
function (event) {
var button = $(event.relatedTarget); // this is where the button is triggering the modal
var recipient = button.data('whatever'); // reading a value form the triggered button
var modal = $(this);
modal.find('.modal-title').text('New message to the person ' + recipient); // assigning a new value,which will be displayed on the Modal title
});
</script>
I hope this helps, Let me know if you have any question or feedback.我希望这会有所帮助,如果您有任何问题或反馈,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.