ASP.Net的标记列表控件

时间:2016-01-04 08:20:15

标签: c# asp.net vb.net list controls

你们是否知道ASP.Net的轻量级列表控件,我可以在水平线上添加标记项?像这样的东西: enter image description here

2 个答案:

答案 0 :(得分:1)

你必须这样做



function addMore()
{
   $("div").append("<span>New Badge</span>");
}
&#13;
span{

background-color:#7F7F7F;
  padding:5px;
  border-radius:10px;
  margin:5px;
  display:inline-block;
  color:white;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <span>jQuery</span>
  <span>ajax</span>
  <span>c#</span>
  <span>Html</span>
  <span>Java</span>
</div>

<input type="button" onclick="addMore();" value=" + ">
&#13;
&#13;
&#13;

使用asp.net Literal控件,这将导致您span

答案 1 :(得分:0)

我使用RadAutoCompleteBox,它具有我需要的全部功能。 谢谢Telerik。

http://docs.telerik.com/devtools/aspnet-ajax/controls/autocompletebox/overview

编辑:添加了对 Telerik for ASP.Net 的引用和示例代码:

<telerik:RadAutoCompleteBox runat="server" ID="KeywordsAutoComplete"
Width="100%" OnLoad="KeywordsAutoComplete_Load" OnClientEntryAdding="restrictDuplicateEntry"
EmptyMessage="Type keywords..."
CssClass="autocompletebox control transition-025"
AllowCustomEntry="true" />

<script type="text/javascript">
    // Restrict Duplicate Entry
    function restrictDuplicateEntry(sender, eventArgs) {
                var entries = sender.get_entries(),
                count = entries.get_count();

                for (var i = 0; i < count; i++) {           
                    if (entries.getEntry(i).get_text() == eventArgs.get_entry().get_text())
                    {
                        eventArgs.set_cancel(true);
                        return;
                    }
                }
            }
</script>

C#:

protected void KeywordsAutoComplete_Load(object sender, EventArgs e)
{
    DataTable dt; // Binding Data (For Lookup)
    KeywordsAutoComplete.DataSource = dt;
    KeywordsAutoComplete.DataBind();
}