服务器端按钮单击事件没有在UpdatePanel内触发

server side button click event not firing inside UpdatePanel

本文关键字:UpdatePanel 按钮 单击 事件 服务器端      更新时间:2023-09-26

我有一个使用updatepanel的用户控件。当页面第一次加载按钮点击工作正常,并显示在一个DIV…当我再次搜索并点击按钮时,单击事件没有触发,甚至页面加载事件也没有触发。我使用谷歌地理编码找到最近的商店,当你输入邮政编码。我怀疑这是与javascript或页面验证,这是不让按钮触发点击事件。这是我的代码。

<标题> ASPX页
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ClickAndCollect.ascx.cs"
      Inherits="ConLib_Custom_ClickAndCollect" %>
<%@ Register Assembly="CommerceBuilder.Web" Namespace="CommerceBuilder.Web.UI.WebControls"
      TagPrefix="cb" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script src="/js/ClickAndCollectGeoCoding.js" type="text/javascript"></script>
 <asp:UpdatePanel ID="ClickAndCollectUpdatePanel" runat="server" UpdateMode="Always">
      <ContentTemplate>
        <div class="ClickAndCollectPanelTitle">
            Click and Collect
            <p>
                  Your order will be available to collect in store in 24 - 72 hours
                  <br />
                  We will email you as soon as your order is ready for collection
            </p>
        </div>
         <div class="errorPostcodeSummaryDiv">
              <asp:Label ID="errorPostcodeSummary" Text="" runat="server" Visible="false" CssClass="errorPostcodeSummary">
              </asp:Label>
         </div>        
        <div class="ClickAndCollectContainer">
                <div class="ClickAndCollectContents">
                    <div class="ClickAndCollectHeader">
                        <asp:Label ID="ClickAndCollectDesc" runat="server" Text="Find your nearest store" CssClass="ClickAndCollectDesc"></asp:Label>
                        <asp:TextBox ID="ClickAndCollectTextBox" runat="server" Text="" ToolTip="Enter Your Postcode" CssClass="ClickAndCollectTextBox"></asp:TextBox>
                        <ajax:TextBoxWatermarkExtender ID="ClickAndCollectTextWatermark" runat="server" TargetControlID="ClickAndCollectTextBox" WatermarkText="Postcode or Town" WatermarkCssClass="watermark"></ajax:TextBoxWatermarkExtender>
                        <asp:Button ID="ClickAndCollectSubmit" runat="server" CssClass="ClickAndCollectSubmit" Text="Find Stores" onClick= "ClickAndCollectSubmit_Click"/>
                        <asp:RequiredFieldValidator ID="ClickAndCollectTextBoxValidator" runat="server"  ValidationGroup="OPC"
                                ControlToValidate = "ClickAndCollectTextBox" CssClass="ClickAndCollectValidatorError"
                                ErrorMessage = "Please enter valid address to search for the nearest stores." Text="*">
                                </asp:RequiredFieldValidator>
                    </div>
                    <div class="ClickAndCollectResult">
                        <asp:Panel ID="ClickAndCollectResultPanel" Visible="false" CssClass="ClickAndCollectResult"
                            runat="server">
                            <div class="ClickAndCollectResultHeader">
                                Choose your nearest store
                            </div>
                            <div class="ClickAndCollectResultTable">
                                <asp:RadioButtonList ID="StoresRadioList" Visible="false" runat="server" ToolTip="Choose your nearest store" CssClass="ClickAndCollectResultRadios" ValidationGroup="OPC" onselectedindexchanged="StoresRadioList_SelectedIndexChanged" AutoPostBack="true">
                                </asp:RadioButtonList>
                                <asp:RequiredFieldValidator ID="StoresRadioValidator" runat="server"  ControlToValidate = "StoresRadioList"  Text ="*" CssClass="ClickAndCollectValidatorError" ErrorMessage = "Please choose one store for your delivery.">
                                </asp:RequiredFieldValidator>
                            </div>
                        </asp:Panel>
                    </div>
                    <div class="selectedAddress">
                        <asp:PlaceHolder ID="selectedStore" runat="server"></asp:PlaceHolder>
                    </div>
                    <asp:HiddenField ID="latValue" runat="server"/>
                    <asp:HiddenField ID="lanValue" runat="server"/>
                    <asp:HiddenField ID="statusCode" runat="server"/>
                </div>
            </div>
         </ContentTemplate>
</asp:UpdatePanel>
<标题> JS文件
var address;
var region;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
      if (args.get_error() == undefined) {
            AttachEventAfterPostback();
      }
}
function AttachEventAfterPostback() {
      $(document).ready(function () {
            address = $('.ClickAndCollectTextBox').val();
            if (address.length != 0) {
                  checkAddress(address);
                  getLatLong(address, region);
            }
            $('.ClickAndCollectTextBox').on('blur', function () {
                  address = $('.ClickAndCollectTextBox').val();
                  if (address.length != 0) {
                        checkAddress(address);
                        getLatLong(address, region);
                  }
            });
      });
}
function getLatLong(address, region) {
            var geocoder = new google.maps.Geocoder();
            var result = "";
            geocoder.geocode({
                  'address': address,
                  'region': region
            }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                        $("[id$='statusCode']").val("OK");
                        $("[id$='latValue']").val(results[0].geometry.location.lat());
                        $("[id$='lanValue']").val(results[0].geometry.location.lng());
                        //                        if (typeof (callback) == "function") {
                        //                              callback();
                        //                        }
                  } else {
                        $("[id$='statusCode']").val("ZERO_RESULTS");
                        $("[id$='latValue']").val("0");
                        $("[id$='lanValue']").val("0");
                  }
            });
      }
AttachEventAfterPostback();
function checkAddress(inputAddress) {
      switch (inputAddress.toUpperCase()) {
            //some code
      }
}
<标题> *编辑* * *

"我正在做的是一旦用户输入邮政编码和文本框失去焦点,我正在调用地理代码以在隐藏字段中准备好LAT和LNG值。一旦用户单击,单击事件就会在服务器上触发,并使用RadiobuttonList显示结果。一旦用户选择了一个单选项,就会显示一个div,其中包含他们选择的商店的详细信息。现在让我们说,如果他们不选择一个电台,并尝试输入不同的邮政编码,那么按钮点击不工作。但是,如果他们选择一个电台,然后尝试不同的邮政编码,点击按钮就可以了。

有人知道为什么会这样吗?

您以错误的方式附加事件。

更新面板使部分页面回发,并且在您手动刷新页面之前永远不会在文档中准备好。

删除AttachEventAfterPostback并在pagload函数中编写代码,这将在每次部分回发后自动重新绑定所有内容

function pageLoad(sender,args){
    address = $('.ClickAndCollectTextBox').val();
    if (address.length != 0) {
       checkAddress(address);
       getLatLong(address, region);
    }
    $('.ClickAndCollectTextBox').on('blur', function () {
       address = $('.ClickAndCollectTextBox').val();
          if (address.length != 0) {
              checkAddress(address);
              getLatLong(address, region);
          }
       });
}