ユーザーが最初のドロップダウンリストをクリックしたときにasp.NETでドロップダウンリストをロードすることは可能ですか？jQueryを使ってドロップダウンリストをロードする
私はそれを説明しようとします。 1つの項目を持つDropDownListを持つaspxページがあります。
ListItem listlt = new ListItem("UNDEFINED", "-1");
ddl.Items.Insert(0, listlt);
ユーザーがDropDownListをクリックすると、DropDownListのすべてのデータをロードします。これは、ドロップダウンリストに大量のデータがあり、ページの負荷が非常に遅いためです。
事前に THX
でload。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static Dictionary<string, string> getItems()
{
return new Dictionary<string, string>(){
{"1","Item1"} ,{"2","Item2"}};
}
}
ASPX
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery to call page methods in ASP.NET</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
$(document).ready(function() {
$('select#<%= DropDownList1.ClientID %>').click(function() {
if (this.options.length <= 0) {
PageMethods.getItems(function(res) {
//alert('e');
for (r in res) {
//$(this).append($('<option value="'+ r+'">' + res[r] + '</option>'));
//$(this).append($('<option></option>'));
$('select#<%= DropDownList1.ClientID %>').append($('<option></option>').val(r).html(res[r]));
}
});
}
});
});
</script>
<asp:DropDownList ID="DropDownList1" runat="server" />
</form>
</body>
</html>
使用jqueryの
$("select#theDropdownID").click(function(){
$(this).load("thedropdownItems.html");
});
、あなたが代わりにPageMethodsを使用することができますthedropdownItems.html
<option value='foo'>foo</option>
<option value='bar'>bar</option>
....