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

本文关键字：模式 标签 文本 单击 | 更新日期: 2024-10-20 03:56:28

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

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

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

使用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>
相关文章：