Question

我有一个包含2个按钮“更新”和“默认”的aspx页面。我有一个下拉列表，其中包含一些值，例如1到10.当我单击默认按钮时，下拉列表设置为默认值，例如4.如果我希望将下拉值设置为3，我选择3和单击“更新”按钮，更改将保存在某个位置，可能是数据库。

最初，“禁用更新”按钮。仅当对下拉列表进行任何更改时，才会启用“更新”按钮。假设最初禁用了“更新”按钮，我单击“默认”按钮将下拉列表设置为其初始值。当我这样做时，会发生回发，在此期间，“更新”按钮突然变为启用状态，然后被禁用。我该如何避免这种情况？在页面刷新期间，我不希望禁用“更新”按钮，然后禁用。这种情况发生在一毫秒内，但仍然可见。

有什么方法可以解决这个问题吗？

设计代码如下： ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LogSettings.aspx.cs" Inherits="Settings_LogSettings" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Diagnostic Server Configuration Tool</title>
    <link rel="stylesheet" type="text/css" href="../css/style001.css" />
    <style type="text/css">
        a.info
        {
            position: relative; /*this is the key*/
            z-index: 24; /*background-color:#ccc;*/
            color: #000;
            border-width: 0px;
            border-style: none;
            text-decoration: none;
        }

        a.info:hover
        {
            z-index: 25;
            background-color: #ff0;
        }

        a.info span
        {
            display: none;
        }

        a.info:hover span
        {
            /*the span will display just on :hover state*/
            display: block;
            position: absolute;
            bottom: 2em;
            right: 2em;
            width: 15em;
            border: 1px solid #0cf;
            background-color: #cff;
            color: #000;
            text-align: left;
            padding: 5px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function setDefaults() {
            if (document.getElementById("dlLoggingLevel").value != document.getElementById("dlLoggingLevel_Def").value) {
                document.getElementById("dlLoggingLevel").value = document.getElementById("dlLoggingLevel_Def").value;
                document.getElementById("imgLoggingLevel").src = "../images/field_ok.png";
                document.getElementById("imgLoggingLevelUndo").style.display = "inline";
                document.getElementById("btnUpdate").disabled = false;
            }
            if (document.getElementById("txtMaxFileSize").value != document.getElementById("txtMaxFileSize_Def").value) {
                document.getElementById("txtMaxFileSize").value = document.getElementById("txtMaxFileSize_Def").value;
                document.getElementById("imgMaxSize").src = "../images/field_ok.png";
                document.getElementById("imgMaxSizeUndo").style.display = "inline";
                document.getElementById("btnUpdate").disabled = false;
            }
        }
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;

            return true;
        }
    </script>
    <script language="javascript" type="text/javascript" src="../Css/wcf_validate.js"></script>
</head>
<body>
    <form id="form1" runat="server">

    <div>
        <br />
        <div class="divEditHeader" id="EditHeader">
            <h1>
                Logging Configuration
            </h1>
            <table width="100%">
                <tr>
                    <td align="left">
                        <asp:Button CssClass="formEditBtn" runat="server" ID="btnUpdate" Text="Update" OnClick="btnUpdate_Click"
                            Enabled="false" />
                        <button class="formEditBtn" onclick="javascript:setDefaults();" causesvalidation="false">
                            Default</button>
                    </td>
                    <td align="right">
                    </td>
                </tr>
            </table>
        </div>
        <br />
        <table class="InputTable">
            <tr class="Prompt">
                <td class="Prompt">
                    Logging Level
                </td>
                <td>
                    <asp:DropDownList runat="server" ID="dlLoggingLevel">
                        <asp:ListItem Text="NONE" Value="none"></asp:ListItem>
                        <asp:ListItem Text="FATAL" Value="fatal"></asp:ListItem>
                        <asp:ListItem Text="ERROR" Value="error"></asp:ListItem>
                        <asp:ListItem Text="WARNING" Value="warning"></asp:ListItem>
                        <asp:ListItem Text="INFO" Value="info"></asp:ListItem>
                        <asp:ListItem Text="DEBUGLOW" Value="debuglow"></asp:ListItem>
                        <asp:ListItem Text="DEBUGMEDIUM" Value="debugmedium"></asp:ListItem>
                        <asp:ListItem Text="DEBUGHIGH" Value="debughigh"></asp:ListItem>
                        <asp:ListItem Text="DEBUGALL" Value="debugall"></asp:ListItem>
                    </asp:DropDownList>
                    <img id="imgLoggingLevel" src="../images/blank.png" />
                    <asp:TextBox runat="server" ID="dlLoggingLevel_Init" Style="display: none"></asp:TextBox>
                    <asp:TextBox runat="server" ID="dlLoggingLevel_Def" Style="display: none"></asp:TextBox>
                    <img id="imgLoggingLevelUndo" src="../images/restore.png" style="display: none; cursor: hand"
                        onmouseover="this.src='../Images/restore_hov.png'" onmouseout="this.src='../Images/restore.png'"
                        onclick="restoreValue('dlLoggingLevel','dlLoggingLevel_Init','imgLoggingLevel','imgLoggingLevelUndo')" />
                </td>
                <td>
                    <a href="javascript: void 0" class="info">
                        <img src="../images/help.png" border="0">
                        <span><font size="2">Enter the desired level of diagnostic data logging. Default: INFO.
                        </font></span></a>
                </td>
            </tr>
            <tr class="Prompt">
                <td class="Prompt">
                    Maximum Log File Size(MB)
                </td>
                <td>
                    <asp:TextBox runat="server" ID="txtMaxFileSize" Width="36px" MaxLength="3"></asp:TextBox>
                    <asp:TextBox runat="server" ID="txtMaxFileSize_Init" Style="display: none"></asp:TextBox>
                    <asp:TextBox runat="server" ID="txtMaxFileSize_Def" Style="display: none"></asp:TextBox>
                    <img id="imgMaxSize" src="../images/blank.png" />
                    <asp:CustomValidator runat="server" ID="valMaxSize" ControlToValidate="txtMaxFileSize"
                        Display="Dynamic" ErrorMessage="" ClientValidationFunction="MaxSize_Validate"></asp:CustomValidator>
                    <img id="imgMaxSizeUndo" src="../images/restore.png" style="display: none; cursor: hand"
                        onmouseover="this.src='../images/restore_hov.png'" onmouseout="this.src='../images/restore.png'"
                        onclick="restoreValue('txtMaxFileSize','txtMaxFileSize_Init','imgMaxSize','imgMaxSizeUndo')" />
                </td>
                <td>
                    <a href="javascript: void 0" class="info">
                        <img src="../images/help.png" border="0">
                        <span><font size="2">Enter the maximum log file size in MB. Default: 2 MB. Range: 1
                            - 100 MB. </font></span></a>
                </td>
            </tr>
        </table>
        <br />
        <asp:Label runat="server" ID="lblMessage" Font-Bold="true"></asp:Label>
        <br />
    </div>
    </form>
</body>
</html>

代码隐藏

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DiagnosticCommon;
using System.Drawing;

public partial class Settings_LogSettings : System.Web.UI.Page
{
    const string EnvVariable = "DIAGNOSTICSERVER";
    const string ConfigFileName = "DiagnosticService.exe.config";
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Security.EnforceSecurity())
            Response.Redirect("Login.aspx");

        if (!IsPostBack)
        {
            DebugHelper.MaxDebugLevel = DebugHelper.Parse(ConfigReader.GetValue("LoggingLevel"));
            DebugHelper.MaxLogFileSize = long.Parse(ConfigReader.GetValue("LogFileSize"));

            txtMaxFileSize.Attributes.Add("onchange", "javascript:MaxSize_Validate('',this);");
            txtMaxFileSize.Attributes.Add("onkeypress", "return isNumberKey(event)");

            dlLoggingLevel.Attributes.Add("onchange", "javascript:Logging_Validate('',this);");

            BindData();
            BindInitData();
            BindDefaults();
        }

    }

    private void BindData()
    {
        string installPath = Environment.GetEnvironmentVariable(EnvVariable);
        try
        {
            dlLoggingLevel.SelectedValue = ConfigReader.GetValue("LoggingLevel");
            txtMaxFileSize.Text = ConfigReader.GetValue("LogFileSize");
        }
        catch (Exception ex)
        {
            lblMessage.Text += ex.Message + "<br>" + installPath;
            lblMessage.ForeColor = Color.Red;
        }

    }

    private void BindInitData()
    {
        string installPath = Environment.GetEnvironmentVariable(EnvVariable);
        try
        {
            dlLoggingLevel_Init.Text = ConfigReader.GetValue("LoggingLevel");
            txtMaxFileSize_Init.Text = ConfigReader.GetValue("LogFileSize");
        }
        catch (Exception ex)
        {
            lblMessage.Text += ex.Message + "<br>" + installPath;
            lblMessage.ForeColor = Color.Red;
        }

    }

    protected void btnCancel_Click(object sender, EventArgs e)
    { 
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    { 
    }

    protected void btnUpdate_Click(object sender, EventArgs e)
    {
        try
        {
            lblMessage.Text = "";
            ConfigReader.SetValue("LoggingLevel", dlLoggingLevel.SelectedValue);
            ConfigReader.SetValue("LogFileSize", txtMaxFileSize.Text);

            lblMessage.Text = "Configuration updated.";
            lblMessage.ForeColor = Color.Green;
            btnUpdate.Enabled = false;
            BindInitData();

        }
        catch (Exception ex)
        {
            lblMessage.Text += ex.Message;
            lblMessage.ForeColor = Color.Red;
        }
    }

    private void BindDefaults()
    {
        try
        {
            dlLoggingLevel_Def.Text = ConfigReader.GetDefault("LoggingLevel");
            txtMaxFileSize_Def.Text = ConfigReader.GetDefault("LogFileSize");
        }
        catch (Exception ex)
        {
            lblMessage.Text = ex.Message;
            lblMessage.ForeColor = Color.Red;
            btnUpdate.Enabled = false;
        }

    }


}

Answer 1

由于按钮没有定义type，因此使用默认类型，即提交按钮这意味着当您单击Default按钮时，JS代码正在运行，但随后表单已提交。

要避免提交，只需将按钮设为普通按钮：

<button type="button" class="formEditBtn" onclick="javascript:setDefaults();" causesvalidation="false">Default</button>

Answer 2

以下是setDefaults()方法中的一行，启用更新按钮一段时间后，发生回发并再次禁用更新按钮。

document.getElementById("btnUpdate").disabled = false;

对此行进行评论或将其设置为true

禁用按钮刷新

2 个答案: