How to add Function into Gridview?

Question

I have a Gridview contain button

    <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

Thx

Answer 1

Try this below example. What I am doing here is creating a GridView, which has 2 columns. 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. I assume you are aware of those.

This is the Aspx. You don't need much to do here. Aspx + Bootstrap is very powerful and does the most

            <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. Well, I usually get this from the Bootstrap as per my requirement

 <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">&times;</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

    <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.