HtmlSelect vs DropDownList

Question

Between HtmlSelect and DropDownList, which one has a better performance (initialized and rendered faster)? Are there any guidelines when to use which?

Another questions is if I want to access the value of a select control from JScript, am I only bound to use HtmlSelect (because the ID doesn't change) or is there any way to force DropDownList to use my ID and not one like "ctl00_MainContainerContentPlaceHolder_Day1DropDownList"?

Check out the answers to this question. http://stackoverflow.com/questions/844567/any-way-to-prevent-master-pages-from-changing-element-ids/844609#844609 — Phaedrus, May 25 '09 at 02:33

score 5 · Accepted Answer · answered May 25 '09 at 03:23

Since nobody has tackled the performance aspect of this question, I thought I would give it a go. My initial hypothesis was that either of these two options is going to net you similar performance since they result in nearly 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 various inputs, and found the trace to be almost identical in each case. The HtmlOption control nets you a tiny advantage in performance over the DropDownList, but even when rendering 100 of each control with 100 items apiece, the difference is only a few hundredths of a second.

So in the end... stick with the DropDownList control since it has more options available to you. The issue with the ID getting decorated by the ASP.Net runtime can be easily mitigated as shown in the other answers. Also, you can design your JavaScript functions in such a way that they can operate on an ID passed in 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 tie in to a client event (onclick, onmouseover, onmouseout, etc...) in order to reuse your behavior in many places.

Cheers, Josh

score 3 · Answer 2 · answered May 25 '09 at 02:05

I dont think you can stop the name generation of controls. The framework will generate an ID based on the content place holder to ensure that each control is accessible via a unique ID. You can access this ID in your code behind by using

DropDownList.ClientID

and

DropDownList.UniqueID

score 3 · Answer 3 · answered May 25 '09 at 02:18

<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 useful. You dont have to worry about the id that framework generates, even if you rearrange the containers.

HtmlSelect vs DropDownList

3 Answers3