HtmlSelect vs DropDownList
Between HtmlSelect and DropDownList, which one has the best performance (initializes and renders faster)? Are there any recommendations for use that?
Other questions: If I want to access the select control from JScript, should I use HtmlSelect (because the ID doesn't change) or is there a way to make the DropDownList use my ID instead of one like "ctl00_MainContainerContentPlaceHolder_Day1DropDownList"?
a source to share
Since no one has dealt with the performance aspect of this question, I thought I'd give it up. My initial hypothesis was that either of these two options will show you similar performance as they result in almost identical rendered HTML. However, I put together the following .aspx page to test my theory.
public enum ListType
{
DropDownList,
HtmlList
}
public partial class ListControlRenderTimeComparison : System.Web.UI.Page
{
private Dictionary<ListType, Action<Int32>> _listMap = new Dictionary<ListType, Action<Int32>>();
protected void Page_Load(object sender, EventArgs e)
{
InitializeListMap();
for (int i = 0; i < ControlsToRender; i++)
{
_listMap[ListToRender](NumberOfItems);
}
}
private void InitializeListMap()
{
_listMap.Add(ListType.DropDownList, AddDropDownList);
_listMap.Add(ListType.HtmlList, AddHtmlList);
}
private void AddDropDownList(Int32 controlsToAdd)
{
var ddl = new DropDownList();
for (int i = 0; i < controlsToAdd; i++)
ddl.Items.Add((i + 1).ToString());
form1.Controls.Add(ddl);
}
private void AddHtmlList(Int32 controlsToAdd)
{
var ddl = new HtmlSelect();
for (int i = 0; i < controlsToAdd; i++)
ddl.Items.Add((i + 1).ToString());
form1.Controls.Add(ddl);
}
private Int32 NumberOfItems
{
get
{
Int32 timesToRender;
return Int32.TryParse(Request.QueryString["numItems"], out timesToRender) ? timesToRender : 1;
}
}
private Int32 ControlsToRender
{
get
{
Int32 timesToRender;
return Int32.TryParse(Request.QueryString["numControls"], out timesToRender) ? timesToRender : 1;
}
}
private ListType ListToRender
{
get
{
String listType = Request.QueryString["listType"];
if (String.IsNullOrEmpty(listType)) return ListType.DropDownList;
return (ListType)Enum.Parse(typeof (ListType), listType, true);
}
}
}
I tested each of these controls with different inputs and found that the trace is almost the same in every case. The HtmlOption control gives you a tiny performance advantage over the DropDownList, but even rendering 100 from each control with 100 items, the difference is only a few hundredths of a second.
So in the end ... stick with the DropDownList control as it has more options available to you. The problem with an identity styled in the ASP.Net runtime can easily be mitigated as shown in other answers. Alternatively, you can design your JavaScript functions so that they can work with an ID passed as a parameter.
function doStuff(strId)
{
document.getElementById(strId); //Straight up, no lime
$get(strId); // Asp.Net Ajax Client Side Framework
$(strId); // JQuery
}
If you do this, then it is easy enough to bind yourself to the client (onclick, onmouseover, onmouseout, etc.) to reuse your behavior in many places.
Cheers, Josh
a source to share
I don't think you can stop generating control names. The framework will create an identifier based on the owner of the content place to ensure that each control is accessible through a unique identifier. You can access this id in your code using
DropDownList.ClientID
and
DropDownList.UniqueID
a source to share
<script type="text/javascript">
function Display()
{
alert($('<%=this.FindControl("abc").ClientID%>').value);
}
</script>
<form id="form1" runat="server">
<div>
<asp:Panel runat="server" ID="container">
<asp:TextBox ID="abc" runat="server" Text="Some text"></asp:TextBox>
<br />
<asp:Button ID="btn1" runat="server" Text="Submit!!" OnClientClick="Display();"/>
</div>
</asp:Panel>
This might be helpful. You don't have to worry about what the framework generates, even if you are rearranging containers.
a source to share