How to fire Onclick and Onclientclick with Bootstrap Modal?

Question

Here's My Markup :

Ps: I am using Metronic Inbuilt template which has all things included.

<link href="vendors.bundle.css" rel="stylesheet" type="text/css">
    <link href="style.bundle.css" rel="stylesheet" type="text/css">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="scripts.bundle.js" type="text/javascript"></script>
    <script src="vendors.bundle.js" type="text/javascript"></script>
    <script src="bootstrap-datepicker.js" type="text/javascript"></script>

<script>
        $(function () {

            $('#trigger').click(function () {
                $('#myModal').modal("toggle");
                return false;
            })

        });
    </script>

Here's my code:

<asp:Button runat="server" ID="trigger" OnClick="Unnamed_Click" Text="Click"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Bootstrap Date Picker Examples</h5>
    <asp:Label runat="server" ID="ShowLbl"></asp:Label>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true" class="la la-remove"></span>
    </button>
</div>
<div class="modal-body">
    <div class="form-group m-form__group row m--margin-top-20">
        <label class="col-form-label col-lg-3 col-sm-12">Minimum Setup</label>
        <div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="m_datepicker_1_modal" readonly="" placeholder="Select date">
        </div>
    </div>
    <div class="form-group m-form__group row">
        <label class="col-form-label col-lg-3 col-sm-12">Input Group Setup</label>
        <div class="col-lg-9 col-md-9 col-sm-12">
<div class="input-group date">
    <input type="text" class="form-control m-input" readonly="" placeholder="Select date" id="m_datepicker_2_modal">
    <div class="input-group-append">
        <span class="input-group-text">
<i class="la la-calendar-check-o"></i>
        </span>
    </div>
</div>
        </div>
    </div>
    <div class="form-group m-form__group row m--margin-bottom-20">
        <label class="col-form-label col-lg-3 col-sm-12">Enable Helper Buttons</label>
        <div class="col-lg-9 col-md-9 col-sm-12">
<div class="input-group date">
    <input type="text" class="form-control m-input" value="05/20/2017" id="m_datepicker_3_modal">
    <div class="input-group-append">
        <span class="input-group-text">
<i class="la la-calendar"></i>
        </span>
    </div>
</div>
<span class="m-form__help">Enable clear and today helper buttons</span>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-secondary m-btn">Submit</button>
</div>
        </div>
    </div>
</div>

When I load up the modal, clientclick is being fired.

I would also like to fire onclick event correspondingly. How to make it possible? It is my first time to ask a question. Please help me is it possible?

Here's my back-end :

protected void Unnamed_Click(object sender, EventArgs e)
{
   //ShowLbl.Text = "Clicked";
    do some SQL Work ();
    then show it to modal();
 }

Answer 1

C#:

protected void Unnamed_Click(object sender, EventArgs e)
{
    myModal.Visible = true;
   //ShowLbl.Text = "Clicked";
    do some SQL Work ();
    then show it to modal();
 }

HTML:

<div runat="server" Visible="False" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true;">