Is it possible to load a dropdownlist in asp.NET just when the user click the DropDownList for the firs time?
I will try to explain it. I have an aspx page with a DropDownList with one item.
ListItem listlt = new ListItem("UNDEFINED", "-1");
ddl.Items.Insert(0, listlt);
I want to load all data in the DropDownList when the user click on the DropDownList. This is because the dropdownlist has a lot of data and the load of the page is very slow.
any ideas? thx in advance
You can use PageMethods instead.
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>
use jquery load
$("select#theDropdownID").click(function(){
$(this).load("thedropdownItems.html");
});
And in thedropdownItems.html
<option value='foo'>foo</option>
<option value='bar'>bar</option>
....
