Question

这是我的标记：

Ps：我正在使用Metronic内置模板，其中包含所有内容包括在内。

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

这是我的代码：

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

加载模式时，将触发clientclick。

我也想相应地触发onclick事件。如何使其成为可能？这是我第一次问一个问题。请可以帮我吗？

这是我的后端：

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;">

如何使用Bootstrap Modal触发Onclick和Onclientclick？

1 个答案: