代码之家  ›  专栏  ›  技术社区  ›  Fung

在ASP中实现可编辑的DropDownList。网

drop-down-menu user-controls javascript asp.net
  •  6
  • Fung  · 技术社区  · 18 年前

    在应用程序中实现DropDownList最优雅的方式是什么 ASP.NET 无需使用第三方组件即可编辑。

    作为最后手段,我可能会尝试使用 TextBox 带着 AutoCompleteExtender 用图像“下拉”列表;或者 文本框 将HTML Select与一些JavaScript重叠,以填充从Select到 文本框 .但我真的希望有一个更简洁、更易于维护的解决方案。

    提前谢谢。

    3 回复  |  直到 7 年前
        1
  •  7
  •   Ray    9 年前

    页面上的一个控件

    你可以跟着 this simple example for an Editable DropDownlist on Code Project 使用标准ASP。NET文本框和DropDownList控件与一些JavaScript相结合。

    然而,直到我添加了一个引用以获取TextBox和DropDownList的ClientID值,代码才对我起作用: 

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

    最后,在代码隐藏中,就像在原始示例中一样,我在页面加载中添加了以下内容: 

    protected void Page_Load(object sender, EventArgs e)
{
    ddSelect.Attributes.Add("onChange", "DisplayText();");
}


    一个页面上有多个控件

    我将上述所有代码放在自己的ASCX用户控件中,以使其在整个项目中可重用。然而,只有在给定页面上只需要一个可编辑的DropDownList时,上述代码才有效。

    如果需要在单个页面上支持多个自定义DropDownList控件,则需要将JavaScript函数名设置为唯一,以避免冲突。再次使用ClientID执行此操作:

    在ASCX文件中: 

    function DisplayText_<% = ClientID %>(){...}

    在代码隐藏中: 

    /// ...
ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();");
///..

    这是避免使用第三方控件的一种方法。

        2
  •  2
  •   ArthurG    9 年前

    您可以尝试使用JqueryUI自动完成组合框。
    它可以让你输入文本,也可以从下拉列表中选择你选择的项目。
    作为一个额外的功能,它允许您使用自动完成功能来获得增强的用户界面体验。

    我附上了一个与bootstrap 3.3.4相结合的演示 

    <!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>
    我已经在下面的所有设置中测试了这段代码 测试环境:
    Chrome浏览器版本43.0.2334.0 dev-m(64位)
    Internet Explorer 11
    Firefox 36.0.1
    Visual Studio 2013版

    希望这能解决你的问题。

        3
  •  1
  •   gideon    14 年前

    这里的2个解决方案对我起到了作用。雷也一样。

    你也应该调查一下 http://ajaxcontroltoolkit.codeplex.com/releases/view/43475 ,这是ajaxcontroltoolkit。

    我不相信framework 4的版本附带comboBox组件,如下所示: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx 而且非常酷。特别是如果你这样设置: 

    ajaxToolkit:ComboBox ID=ComboBox1 runat=server AutoPostBack=False 
   DropDownStyle=DropDown  AutoCompleteMode=Suggest  
               CaseSensitive=False ItemInsertLocation="OrdinalText"
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号