2011-08-25 3 views
1

I "업데이트"및 "기본값"버튼이 포함 된 aspx 페이지가 있습니다. 몇 가지 값이 들어있는 드롭 다운 목록이 있습니다 (예 : 1에서 10). Default 버튼을 클릭하면 드롭 다운이 기본값 4로 설정됩니다. 드롭 다운 값을 3으로 설정하려면 3을 선택하고 업데이트 버튼을 클릭하면 변경 사항이 어딘가에 저장됩니다.비활성화 버튼 새로 고침

처음에는 업데이트 버튼이 비활성화됩니다. 드롭 다운이 변경된 경우에만 업데이트 버튼이 활성화됩니다. 처음에 Update 버튼이 비활성화되었다고 가정하면 Default 버튼을 클릭하여 드롭 다운을 초기 값으로 설정합니다. 그렇게하면 업데이트 버튼이 갑자기 활성화되고 비활성화되는 포스트 백이 발생합니다. 어떻게 이것을 피할 수 있습니까? 페이지를 새로 고치는 동안 비활성화 된 업데이트 버튼이 활성화 된 다음 비활성화되는 것을 원하지 않습니다. ALI는 밀리 초 안에 발생하지만 여전히 볼 수 있습니다.

여기에서 벗어나는 방법이 있습니까? 다음과 같이

디자인 코드는 다음과 같습니다 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; 
     } 

    } 


} 
+2

로 설정합니다. 업데이트 버튼을 사용 중지하려면 ** javascript **를 사용하는 것으로 알고 있습니까? –

+0

AJAX 포스트 백을 사용하고 있습니까? – Kay

+0

일부 코드를 게시 할 수 있습니까? –

답변

0

버튼이 정의 된 type이 없기 때문에 숨김 코드, 기본 유형은 제출 인 사용 단추.
즉, Default 버튼을 클릭하면 JS 코드가 실행 중이지만 양식이 제출됩니다.

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

D 제안에 감사드립니다 :) –

0

다음은 포스트가 다시 발생하고 업데이트 버튼을 다시 비활성화, 잠시 동안 업데이트 버튼을 가능하게 setDefaults() 방법의 라인 :

는 제출 단순히 버튼을 일반 버튼 수 있도록 피하려면.
document.getElementById("btnUpdate").disabled = false; 

어느

는이 라인을 주석 또는 코드의 스냅을 넣어 주실 래요 true

+0

works wonderful :) –