Mise en œuvre d'un modifiable DropDownList dans ASP.NET

Ce qui est la façon la plus élégante de la mise en œuvre d'un DropDownList dans ASP.NET qui est modifiable sans l'aide de la 3e partie des composants.

En dernier recours, je vais probablement essayer d'utiliser une zone de texte avec un AutoCompleteExtender avec une image "du menu déroulant" la liste; ou une zone de texte qui se chevauchent HTML, Sélectionnez-la avec un peu de JavaScript pour remplir les valeurs de la Sélectionner dans la zone de texte. Mais je suis vraiment en espérant y est plus concis et plus facile à gérer solution.

Merci d'avance.

Voyez-vous quelque chose sur le web qui ressemble à ce que vous essayez d'imiter?
Quelques-uns, mais ils ont tous l'air de propriété.
Essayez la zone de liste déroulante à partir de l'Ajax Control Toolkit: asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx

InformationsquelleAutor Fung | 2008-10-30

5

Un Contrôle sur une Page

Vous pouvez suivre ~~cet exemple simple pour un Modifiable DropDownlist sur le Projet de Code~~ qui utilise la norme de ASP.NET zone de texte et de contrôles DropDownList combiné avec un peu de JavaScript.

Toutefois, le code n'a pas fonctionné pour moi jusqu'à ce que j'ai ajouté une référence pour obtenir le ClientID valeurs pour la zone de texte et DropDownList:
```
<script language="javascript" type="text/javascript">

function DisplayText()
{
    var textboxId = '<% = txtDisplay.ClientID %>';
    var comboBoxId = '<% = ddSelect.ClientID %>';
    document.getElementById(textboxId).value = document.getElementById(comboBoxId).value;
    document.getElementById(textboxId).focus();
}
</script>    

<asp:TextBox style="width:120px;position:absolute" ID="txtDisplay" runat="server"></asp:TextBox>

<asp:DropDownList ID="ddSelect" style="width:140px" runat="server">    
    <asp:ListItem Value="test1" >test1</asp:ListItem>    
    <asp:ListItem Value="test2">test2</asp:ListItem>    
</asp:DropDownList>
```
Enfin, dans le code-behind, tout comme dans l'exemple original, j'ai ajouté ce qui suit à la page de chargement:
```
protected void Page_Load(object sender, EventArgs e)
{
    ddSelect.Attributes.Add("onChange", "DisplayText();");
}
```
Plusieurs Contrôles sur une Page

J'ai mis tout le code ci-dessus dans son propre ASCX de Contrôle de l'Utilisateur afin de le rendre réutilisable dans mon projet. Toutefois, le code présenté ci-dessus ne fonctionne que si vous avez besoin de juste un modifiable DropDownList sur une page donnée.

Si vous avez besoin d'un support pour plusieurs personnalisée DropDownList commandes sur une seule page, il est nécessaire de définir le nom de la fonction JavaScript à être unique pour éviter les conflits. Ce faire, une fois de plus, à l'aide de la ClientID:

dans le fichier ASCX:
```
function DisplayText_<% = ClientID %>(){...}
```
dans le code behind:
```
///...
ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();");
///..
```
C'est une façon d'éviter l'utilisation de la 3ème partie de contrôles.
- Mais position:absolute fonctionne Pas dans IE6
- J'ai le même le même code. Maintenant, je veux le même menu pour accepter d'entrée de texte. Je ne veux pas réinventer la liste déroulante. Votre aide est très appréciée. Merci!!!!
- le lien est mort!!!
InformationsquelleAutor Ray Vega
1

La 2 solution a fonctionné pour moi. donc koodos pour Ray.

En outre, vous devriez regarder dans le http://ajaxcontroltoolkit.codeplex.com/releases/view/43475, qui est le ajaxcontroltoolkit.

Je ne crois pas que la version de framework 4 est livré avec un composant comboBox, qui est ici: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx et est très cool. Spécialement si vous le réglez comme ceci:
```
ajaxToolkit:ComboBox ID=ComboBox1 runat=server AutoPostBack=False 
   DropDownStyle=DropDown  AutoCompleteMode=Suggest  
               CaseSensitive=False ItemInsertLocation="OrdinalText" 
```
InformationsquelleAutor Carlos

Vous pouvez essayer d'utiliser JqueryUI de saisie semi-automatique zone de liste déroulante.

Il vous permettra de saisir du texte, ainsi que de sélectionner l'élément de votre choix à partir d'une liste déroulante.

Comme une caractéristique supplémentaire, il vous permet d'utiliser la fonctionnalité saisie semi-automatique pour obtenir un améliorer l'expérience d'INTERFACE utilisateur.

Je joins une démo qui est couplé avec bootstrap 3.3.4

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://jqueryui.com/resources/demos/style.css" rel="stylesheet" />
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #421D1D;
background: #ffffff url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x !important;
font-weight: normal;
color: #555555;
}
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 0px !important;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 0px !important;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 0px !important;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 0px !important;
}
</style>
<script>
(function($) {
$.widget("custom.combobox", {
_create: function() {
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function(event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.mousedown(function() {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function() {
input.focus();
//Close if already visible
if (wasOpen) {
return;
}
//Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function(event, ui) {
//Selected an item, nothing to do
if (ui.item) {
return;
}
//Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function() {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
//Found a match, nothing to do
if (valid) {
return;
}
//Remove invalid value
this.input
.val("")
.attr("title", value + " didn't match any item")
.tooltip("open");
this.element.val("");
this._delay(function() {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.autocomplete("instance").term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
$(function() {
$("#combobox").combobox();
$("#toggle").click(function() {
$("#combobox").toggle();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="ui-widget">
<select id="combobox" class="form-control">
<option value="">Select your option</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry">Cherry</option>
<option value="Date">Date</option>
<option value="Fig">Fig</option>
<option value="Grape">Grape</option>
<option value="Kiwi">Kiwi</option>
<option value="Mango">Mango</option>
<option value="Orange">Orange</option>
<option value="Pumpkin">Pumpkin</option>
<option value="Strawberry">Strawberry</option>
<option value="Tomato">Tomato</option>
<option value="Watermelon">Watermelon</option>
</select>
</div>
</div>
</form>
</body>
</html>

J'ai testé ce code sur tous les ci-dessous les paramètres
Environnement De Test:

Le Navigateur google Chrome, la Version 43.0.2334.0 dev-m (64-bit)

Internet Explorer 11

Firefox 36.0.1

Visual Studio 2013 édition

Espère que cela résout votre problème.

InformationsquelleAutor ArthurG

Vous devez vous connecter pour publier un commentaire.

Un Contrôle sur une Page

Plusieurs Contrôles sur une Page