单击前更改引导模式上的标签文本

Question

我有一个带有标签控件的引导模式。它是通过单击一个按钮启动的，我想在它启动之前更改标签的文本。出现的文本将来自它的 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>