2016-07-13 40 views
1

我在我的智慧在這裏結束。我爲用戶更改密碼的模式定義了一個用戶控件。在模式內部,這些字段包含在UpdatePanel中,並且我想顯示關於密碼更改請求結果的成功/錯誤消息。但是,Label控件根本不會改變。UpdatePanel中的標籤不會顯示從代碼隱藏中分配的值

標記:

<script type="text/javascript"> 
    var reqValidator1; 
    var reqValidator2; 
    var regValidator; 
    var compValidator; 

    function configPasswordValidators() { 
     reqValidator1 = $("#<%= RequiredFieldValidator1.ClientID %> ")[0]; 
     reqValidator2 = $("#<%= RequiredFieldValidator2.ClientID %> ")[0]; 
     regValidator = $("#<%= RegularExpressionValidator1.ClientID %> ")[0]; 
     compValidator = $("#<%= CompareValidator1.ClientID %> ")[0]; 
    } 

    function enablePasswordValidators() { 
     ValidatorEnable(reqValidator1, true); 
     ValidatorEnable(reqValidator2, true); 
     ValidatorEnable(regValidator, true); 
     ValidatorEnable(compValidator, true); 
    } 

    function disablePasswordValidators() { 
     ValidatorEnable(reqValidator1, false); 
     ValidatorEnable(reqValidator2, false); 
     ValidatorEnable(regValidator, false); 
     ValidatorEnable(compValidator, false); 
    } 

    function showProcessingSpinner() { 
     $("#dvChangeUserPasswordBtns").hide(); 
     $("#dvProcessing").show(); 
     $("#<%= btnChange.ClientID %>").click(); 
    } 
</script> 
<div class="new-container new-modal" id="newContainerPanel"> 
    <div runat="server" id="credentialManagerModal" class="new-container-inner panel panel-default" style="width: 600px;"> 
     <div class="panel-heading"> 
      <h4 class="modal-title">Change Password</h4> 
     </div> 
     <asp:UpdatePanel runat="server" ID="upnlChangePassword" ChildrenAsTriggers="true" UpdateMode="Always"> 
      <ContentTemplate> 
       <div class="modal-body"> 
        <div class="row"> 
         <div class="col-md-3 text-right" style="width: 160px; padding-top: 15px"> 
          <asp:Label ID="lblPassword1" runat="server" /> 
         </div> 
         <div class="col-md-5" style="margin-left: -20px; margin-right: -20px; padding-top: 8px"> 
          <asp:TextBox ID="txtPassword1" runat="server" TextMode="Password" MaxLength="100" Width="260px" CssClass="form-control" /> 
         </div> 
         <div class="col-md-4" style="padding-top: 15px;"> 
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="password" runat="server" ControlToValidate="txtPassword1" SetFocusOnError="true" Display="Dynamic" Enabled="false" Style="margin-left: 40px; color: red;"></asp:RequiredFieldValidator> 
         </div> 
        </div> 
        <div class="row" style="margin-top: 15px;"> 
         <div class="col-md-3 text-right" style="width: 160px; padding-top: 7px;"> 
          <asp:Label ID="lblPassword2" runat="server" /> 
         </div> 
         <div class="col-md-5" style="margin-left: -20px; margin-right: -20px;"> 
          <asp:TextBox ID="txtPassword2" runat="server" TextMode="Password" MaxLength="100" Width="260px" CssClass="form-control" /> 
         </div> 
         <div class="col-md-4" style="padding-top: 7px;"> 
          <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ValidationGroup="password" ControlToValidate="txtPassword2" SetFocusOnError="true" Display="Dynamic" Enabled="false" Style="margin-left: 40px; color: red;"></asp:RequiredFieldValidator> 
         </div> 
        </div> 
        <div class="row" style="padding-top: 15px; text-align: center;"> 
         <asp:RegularExpressionValidator ID="RegularExpressionValidator1" ValidationGroup="password" runat="server" ControlToValidate="txtPassword1" SetFocusOnError="true" Display="Dynamic" Enabled="false" Style="margin-left: 30px; color: red;"></asp:RegularExpressionValidator> 
         <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txtPassword2" Operator="Equal" Type="String" ValidationGroup="password" ControlToCompare="txtPassword1" Display="Dynamic" EnableClientScript="true" Enabled="false" Style="margin-left: 20px; color: red;"></asp:CompareValidator> 
        </div> 
        <div class="row text-center" style="margin-top: 15px;"> 
         <asp:Label runat="server" ID="lblChangePasswordSuccess" ForeColor="MediumSeaGreen"></asp:Label> 
         <asp:Label runat="server" ID="lblChangePasswordError" ForeColor="Red"></asp:Label> 
        </div> 
       </div> 
       <div id="passwordModalFooter" class="modal-footer"> 
        <div id="dvChangeUserPasswordBtns" class="text-center"> 
         <button id="btnClose" class="btn btn-default" onclick="HideChangePasswordModal();" style="float: left;">Cancel</button> 
         <button id="btnProcessChange" runat="server" class="btn btn-primary" onclick="showProcessingSpinner();" style="float: right;">Change Password</button> 
        </div> 
        <div class="text-center" id="dvProcessing" style="display: none;"> 
         <img src="../Images/progress-spinner.gif" />&nbsp;Processing... 
        </div> 
        <div style="display: none"> 
         <asp:Button ID="btnChange" runat="server" CssStyle="btn btn-primary change-password-button" OnClick="ChangePassword_Click" CausesValidation="true" ValidationGroup="password" /> 
        </div> 
       </div> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </div> 
</div> 

後面的代碼:

protected void ChangePassword_Click(object sender, EventArgs e) 
{ 
    string retVal = ChangePassword(Request.QueryString["ID"]); // Separate processing method that is working fine. 

    if (retVal == "Password changed.") 
    { 
     lblChangePasswordSuccess.Text = retVal; 
     lblChangePasswordError.Text = string.Empty; 
    } 
    else 
    { 
     lblChangePasswordSuccess.Text = string.Empty; 
     lblChangePasswordError.Text = retVal; 
    } 
} 

ScriptManager的母版頁是這樣的:

<asp:ScriptManager ID="ScriptManagerMain" runat="server" EnablePageMethods="True" EnablePartialRendering="True" LoadScriptsBeforeUI="true"> 

我已經試過:

  • 更改UpdatePanel屬性。如果我使用ChildrenAsTriggers="true"或手動定義觸發器,則無關緊要。如果我爲UpdateMode使用「始終」或「有條件」,則無關緊要。

  • 從調用的代碼背後UpdatePanel1.Update()沒有效果。

  • 嘗試編輯通過JavaScript調用標籤(或我放在它的位置的任何其他元素類型)也不起作用。像ScriptManager.RegisterStartupScript(upnlChangePassword, this.GetType(), "script", string.Format("DisplayProcessingMessage('{0}');", retVal), true);這樣的東西沒有效果。

我已經遍歷代碼遍歷所有事件正確觸發並返回正確的值。我在部分回發之前和之後檢查了DOM,並且元素始終保持不變。在瀏覽器中沒有檢測到javascript錯誤。

這位於使用母版頁的Web表單內的用戶控件中。在瀏覽器中,頁面上的內容遠遠多於在這裏發佈的內容,所以我認識到這個文件之外可能存在某些內容。但是如果我至少能夠了解可能導致這種行爲的內容,那將是一個巨大的幫助。

+0

它的工作好,如果你不使用UpdatePanel? – ConnorsFan

+0

所有ASP.NET控件都必須位於主窗體中才能正常工作。有時,模式會將其自身追加到頁面的底部,即在關閉標記之前。你使用哪種模式控制? –

+0

@ConnorsFan:有趣的是,沒有。我不確定那是什麼意思。激發完整的回發意味着父頁中的某些JavaScript被調用,但我無法想象或看到任何會阻止設置簡單Label.Text屬性的內容。 –

回答

1

只需添加一個PostBackTrigger您更新面板:

<Triggers> 
    <asp:PostBackTrigger ControlID="btnChange" /> 
</Triggers> 

OR

作爲變通,而不是喊你可以使用一個AJAX調用,它會發布到服務器端單擊事件C#[WebMethod]

1.Replace您showProcessingSpinner()功能與此:

function showProcessingSpinner() { 

    $("#dvChangeUserPasswordBtns").hide(); 
    $("#dvProcessing").show(); 
    //$("#<%= btnChange.ClientID %>").click(); 

    var id = getQueryStringParamByName("ID"); 
    alert("Query string parameter value for ID is - " + id); 

    $.ajax({ 
     type: "POST", 
     url: "ModalPopupAndUpdatePanel.aspx/ChangePasswordWeb", 
     contentType: "application/json;charset=utf-8", 
     data: '{id:"' + id + '"}', 
     success: function (data) { 
      debugger; 
      alert('Success Message - ' + data.d.SuccessMessage); 
      var successMessage = data.d.SuccessMessage; 
      $("#lblChangePasswordSuccess").text(successMessage); 
     }, 
     error: function (errordata) { 
      alert('Error.AJAX call failed') 
     } 
    }); 
} 


function getQueryStringParamByName(name, url) { 
    if (!url) url = window.location.href; 
    name = name.replace(/[\[\]]/g, "\\$&"); 
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
     results = regex.exec(url); 
    if (!results) return null; 
    if (!results[2]) return ''; 
    return decodeURIComponent(results[2].replace(/\+/g, " ")); 
} 

2.創建代碼的Web方法背後叫ChangePasswordWeb

[System.Web.Services.WebMethod] 
public static AJAXResponse ChangePasswordWeb(string id) 
{ 
    string retVal = ChangePassword(id); 
    var response = new AJAXResponse(); 

    if (retVal == "Password changed.") 
     response.SuccessMessage = retVal; 
    else 
     response.ErrorMessage = retVal; 

    return response; 
} 

3。在HTML - 不得不從btnChange刪除OnClick事件並更改ScriptManager控制到這個樣子 - <asp:ScriptManager ID="ScriptManagerMain" runat="server" EnableCdn="true" />

輸出:

Calling a WebMethod from jQuery using AJAX

相關問題