在点击

Question

我有一个带有标签控件的bootstrap模态。通过单击按钮启动它，我想在标签启动之前更改标签的文本。出现的文本将来自它的C＃结尾......但是永远不会触发。我想回发永远不会发生（我猜测模式会阻止它？）因此文本没有设置。

我想要实现的是：点击按钮，设置标签文字（文字必须来自后端），显示模态。以下是我到目前为止的情况：

<asp:Button ID="btnEasy" runat="server" CssClass="btn btn-success" Text="Easy" Width="200px" Height="50px" data-toggle="modal" data-target="#modalQuestion" data-backdrop="static" data-keyboard="false" OnClick="btnEasy_Click"/>

<div class="modal fade" id="modalQuestion" tabindex="-1" role="dialog" aria-labelledby="questionHeader">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="questionHeader">Easy Question</h4>
      </div>
      <div class="modal-body">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
              <ContentTemplate>
                <asp:Label ID="lblQuestion" runat="server" Text="Question"></asp:Label>
                  <br />
                  <br />
                <asp:Label ID="lblAnswer" runat="server" Text="Answer"></asp:Label>
              </ContentTemplate>
              <Triggers>
                  <asp:AsyncPostBackTrigger ControlID="btnEasy" EventName="Click" />
                  <asp:AsyncPostBackTrigger ControlID="btnShowAnswer" EventName="Click" />
              </Triggers>
          </asp:UpdatePanel>
      </div>
      <div class="modal-footer">
        <asp:Button ID="btnShowAnswer" runat="server" CssClass="btn btn-primary" Text="Show Answer" UseSubmitBehavior="false" OnClick="btnShowAnswer_Click"/>
        <asp:Button runat="server" CssClass="btn btn-default" data-dismiss="modal" Text="Close" />
      </div>
    </div>
  </div>
</div>

C＃：

protected void btnEasy_Click(object sender, EventArgs e)
{
    lblQuestion.Text = "Easy clicked";
}

Answer 1

在btnEasy_Click函数中，设置文本值后，发出将要执行的javascript代码。 例如

protected void btnEasy_Click(object sender, EventArgs e) 
{   
    lblQuestion.Text = "Easy clicked";
    if(!ClientScript.IsStartupScriptRegistered("JSScript"))
    {
        ClientScript.RegisterStartupScript(this.GetType(),"JSScript",
        "ShowModalPopUp()");
    } 
}

编写你的js函数：

<script>
    function ShowModalPopUp(){
       $('#modalQuestion').modal('show');
    } 
</script>

Answer 2

您可以使用JS轻松完成此操作。这里我展示了使用jQuery的示例。使用您的按钮绑定onclick事件将打开模态。并在那个时候更改标签文本。像这样 -

    //button code    
        <asp:Button ID="btnEasy" runat="server" CssClass="btn btn-success" Text="Easy" Width="200px" Height="50px" data-backdrop="static" data-keyboard="false" OnClientClick="showModal();"/>

    //scripts    
    <script>
        function showModal(){
            $('#<%=lblQuestion.ClientID%>').text('Easy clicked');
            $('#modalQuestion').modal('show');
        } 
    </script>