Question

我在更新面板中有一个下拉列表，我点击按钮，从服务器端向下载列表中加载数据。现在我有一个document.getElementById（＆＃39; dropdownlist＆＃39;）。javascript中的onchange事件处理程序，从javascript中选择值时没有被调用。

不使用更新面板，它可以正常工作。但是，然后整个页面会在按钮单击时返回，以便在下拉列表中加载数据。

这是aspx代码：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">  
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Text="From Date:" style="display:inline" Font-Size="12"></asp:Label> &nbsp
<asp:TextBox ID="TextBox1" runat="server" ReadOnly = "false" ></asp:TextBox>
<img src="calender.png" />  &nbsp
<asp:Label ID="Label2" runat="server" Text="To Date:" style="display:inline" Font-Size="12"></asp:Label> &nbsp
<asp:TextBox ID="TextBox2" runat="server" ReadOnly = "false" ></asp:TextBox>
<img src="calender.png" style="display:inline"/> &nbsp

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
        <asp:Button ID="btnGetTop20Cust" runat="server" Text="Get Top 20 Customers in the selected date range" onclick="btnGo_Click" /><br /> 
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"  ></asp:DropDownList> 
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

这是javascript：

document.getElementById('MainContent_DropDownList1').onchange = function () {
             var dropDown = document.getElementById('MainContent_DropDownList1');
             var value = dropDown[dropDown.selectedIndex].value;
             var startDate = document.getElementById('MainContent_TextBox1').value;
             var endDate = document.getElementById('MainContent_TextBox2').value;

             GetData(value, startDate, endDate);
}

Answer 1

检查下拉列表的ID，可以在更新面板中更改。

Answer 2

请在pageLoad（）中添加更改功能代码，每次UpdatePanel刷新后都会调用pageLoad（）。

function pageLoad() {
        document.getElementById('MainContent_DropDownList1').onchange = function () {
             var dropDown = document.getElementById('MainContent_DropDownList1');
             var value = dropDown[dropDown.selectedIndex].value;
             var startDate = document.getElementById('MainContent_TextBox1').value;
             var endDate = document.getElementById('MainContent_TextBox2').value;

             GetData(value, startDate, endDate);
}
    }

除了上面描述的问题之外，还有其他方法可以解决这个问题。从这个link我得到了一个非常有用的想法..

ASP.NET AJAX确实提供了相应的事件。 Application.Init事件每次页面加载仅触发一次，非常适合一次性初始化任务。它不是通过快捷功能提供的，需要稍微谨慎一点，但是可以实现其目的：

<asp:ScriptManager runat="server" /> 

<script type="text/javascript"> 
  Sys.Application.add_init(function() { 
    // Initialization code here, meant to run once.
  }); 
</script>

请注意，对Application.add_init的调用放在ScriptManager之后。这是必要的，因为ScriptManager在该位置注入对MicrosoftAjax.js的引用。尝试在该点之前引用Sys对象将导致“sys is undefined”JavaScript错误。

Answer 3

使用这样的代码

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent" ClientIDMode="Static">

然后更改你的javascript代码

document.getElementById('MainContent_DropDownList1').onchange = function () {}

到

$(document).ready(function () { document.getElementById('DropDownList1').onchange = function () {} });

OR 你可以改变

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="false" onchange="ddlchange(this);" ></asp:DropDownList>

AND

function ddlchange(ddl) 
{
           var value = ddl.value; 
             var startDate = document.getElementById('MainContent_TextBox1').value;
             var endDate = document.getElementById('MainContent_TextBox2').value;
             GetData(value, startDate, endDate);
}

javascript中的DropDownlist onchange事件在Update Panel中没有为dropdownlist触发

3 个答案: