【问题标题】:How to popup a confirmation box on condition on ASPX page?如何在 ASPX 页面上弹出确认框?
【发布时间】:2016-12-18 04:44:58
【问题描述】:

我看过几个教程/演示,但无法解决我的 ASPX 页面 (C#) 的问题。 我想在按钮单击事件上弹出一个带有是和否按钮的确认消息框但在检查条件后

点击按钮后会检查条件,如if(a>b),如果条件为真则弹出确认框,否则跳过且无消息会弹出。 之后,如果用户单击确认消息框上的“是”按钮,它将继续进行。

由于我是初学者,请提供代码。

【问题讨论】:

  • 你尝试了什么?这是直截了当的。
  • 您是否有任何代码显示您正在尝试使用什么?您可以将按钮 onclick 事件设置为指向 js 函数。在函数中检查条件并使用 confirm();
  • 我在变量 A 和 B 中有两个值。我想检查 A 应该低于 B 并执行 insert command 。当 A 不低于 B 时,应弹出消息框并要求确认执行该插入命令。如果用户单击“是”,则该命令将执行并且如果单击“否”按钮则不执行任何操作。

标签: javascript c# asp.net .net ajax


【解决方案1】:

这应该让你走上正轨。 yesno 不是由 confirm() 实现的,你必须切换到像 sweetalert 这样的替代方案

var select = document.getElementById('c'),
    btn    = document.getElementById('check');

// Add click event
btn.onclick = function(){

   var value = select.options[select.selectedIndex].value; // I could also use Boolean(value); to convert it to boolean and not use quote for comparsion.
 
   // Checking if condition is true. If yes, then ask for user confirmation.
   if(value == '1'){
     
      console.log('condition is true; asking for confirmation');
     
      var ask = confirm('The condition is true, do you want to continue?');
      // if confirmed;
      if(ask){
         console.log('confirmed');
      // if denied/cancelled
      } else {
         console.log('cancelled');
      }
   }

}
Condition:
<select id="c">
   <option value="1">true</option>
   <option value="0">false</option>
</select>
<button id="check">Check</button>

【讨论】:

  • 用您自己的情况替换value == '1'。我为您提供了一个最小的示例来帮助您入门。
  • 在哪个标签下我应该写下面的代码条件:
  • 我不确定我是否听懂了您的最后评论。你能澄清一下吗?
  • 对不起,作为我的初学者,我试着澄清一下。我有两个用于 aspx 页面的文件,一个是代码文件(example.aspx.cs),另一个是 GUI 文件(example.aspx)。我在 example.aspx.cs 中编写了您的第一个代码。现在我应该在example.aspx中哪里写你的HTML代码
【解决方案2】:

下面是一个非常简单的示例,适用于使用 Bootstrap 的初学者。简单复制并粘贴下面的代码即可:

代码隐藏(.cs 文件):

protected void Page_Load(object sender, EventArgs e)
{
}

protected void btnClick_Click(object sender, EventArgs e)
{
    lblOutput.Text = String.Empty;
    bool showModal = true;

    if(showModal)
        ScriptManager.RegisterStartupScript(this, this.GetType(), "myModal", "$('#myModal').modal('show');", true);
}

protected void Decision_Command(object sender, CommandEventArgs e)
{
    lblOutput.Text = "User clicked - " + e.CommandArgument;
}

.ASPX:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="btnClick" runat="server" Text="OK" OnClick="btnClick_Click" />
        <asp:Label ID="lblOutput" runat="server"></asp:Label>
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Would you like to continue?</h4>
                    </div>
                    <div class="modal-body">
                        <h3>Would you like to coninue?</h3>
                        <asp:Button ID="btnYes" runat="server" Text="Yes" OnCommand="Decision_Command" CommandArgument="Yes" />
                        <asp:Button ID="btnNo" runat="server" Text="No" OnCommand="Decision_Command" CommandArgument="No" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

输出:

【讨论】:

  • 谢谢,我终于得到了我想要的……但我没有什么问题。 1.我的页面在确认后没有激活,它仍然隐藏 2.如果我不想使用“
  • 您必须使用
猜你喜欢
  • 1970-01-01
  • 2021-02-08
  • 1970-01-01
  • 1970-01-01
  • 2012-04-18
  • 2020-12-02
  • 1970-01-01
  • 2014-02-09
  • 1970-01-01
相关资源
最近更新 更多