HtmlSelect vs DropDownList

Question

Entre HtmlSelect et DropDownList, lequel est le plus performant (initialisé et rendu plus rapidement) ? Existe-t-il des directives pour savoir quand utiliser l'une ou l'autre ?

Une autre question est que si je veux accéder à la valeur d'un contrôle de sélection à partir de JScript, suis-je seulement tenu d'utiliser HtmlSelect (parce que l'ID ne change pas) ou y a-t-il un moyen de forcer DropDownList à utiliser mon ID et non un comme "ctl00_MainContainerContentPlaceHolder_Day1DropDownList" ?

Answer 1

Puisque personne n'a abordé l'aspect performance de cette question, je me suis dit que j'allais tenter le coup. Mon hypothèse initiale était que l'une ou l'autre de ces deux options vous apporterait des performances similaires puisqu'elles donnent un rendu HTML presque identique. Cependant, j'ai créé la page .aspx suivante pour tester ma théorie.

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);
        }
    }
}

J'ai testé chacune de ces commandes avec différentes entrées, et j'ai constaté que la trace était presque identique dans chaque cas. Le contrôle HtmlOption vous procure un petit avantage en termes de performances par rapport à la DropDownList, mais même en rendant 100 de chaque contrôle avec 100 éléments chacun, la différence n'est que de quelques centièmes de seconde.

Donc, en fin de compte, il faut s'en tenir au contrôle DropDownList, car il offre plus d'options. Le problème de l'ID décoré par le moteur d'exécution d'ASP.Net peut être facilement résolu, comme indiqué dans les autres réponses. Vous pouvez également concevoir vos fonctions JavaScript de manière à ce qu'elles puissent opérer sur un ID passé en paramètre.

function doStuff(strId)
{
    document.getElementById(strId); //Straight up, no lime
    $get(strId); // Asp.Net Ajax Client Side Framework
    $(strId); // JQuery
}

Si vous faites cela, il est alors assez facile de le lier à un événement client (onclick, onmouseover, onmouseout, etc...) afin de réutiliser votre comportement à de nombreux endroits.

A la vôtre, Josh

Answer 2

Je ne pense pas que vous puissiez arrêter la génération de contrôles par le nom. Le framework va générer un ID basé sur le content place holder pour s'assurer que chaque contrôle est accessible via un ID unique. Vous pouvez accéder à cet ID dans votre code derrière en utilisant

DropDownList.ClientID

y

DropDownList.UniqueID

Answer 3

<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>

Cela pourrait être utile. Vous n'avez pas à vous soucier de l'identifiant que le framework génère, même si vous réorganisez les conteneurs.