Jquery Tag it in asp.net

Question

I am using jQuery UI widget Tag it. Code which i am using is working fine but all the Tag values visible on the browser.

Code I am using is below

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="../JavaScript/tag-it.js"></script>
    <link href="../CSS/tagit.ui-zendesk.css" rel="stylesheet" />
    <link href="../CSS/jquery.tagit.css" rel="stylesheet" />
    <script>
        $(function(){
           var sampleTags = [<%# this.SuggestionList %>];
            //var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
            $('#myTags').tagit();         
            $('#singleFieldTags').tagit({
                availableTags: sampleTags,            
                allowSpaces: true,
                singleFieldNode: $('#mySingleField')
            });
           });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="content">
            <p>              
                <input name="tags" id="mySingleField" value="Apple, Orange" disabled="true">
            </p>
            <ul id="singleFieldTags"></ul>
    </div> 
    </form>
</body>

Code behind

string queryString = "select * from SIB_KWD_Library ORDER BY Keyword asc";

    using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["vConnString"].ToString()))
    {

        using (SqlCommand command = new SqlCommand(queryString, connection))
        {

            connection.Open();

            using (SqlDataReader reader = command.ExecuteReader())
            {

                while (reader.Read())
                {

                    if (string.IsNullOrEmpty(SuggestionList))
                    {
                        SuggestionList += "\'" + reader["Keyword"].ToString() + "\'";
                    }
                    else
                    {
                        SuggestionList += ", \'" + reader["Keyword"].ToString() + "\'";
                    }

                }
            }
        }
    }

In browser source code all the tag keywords are visible. Something like

var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];

Please suggest any other way to do this.

Thanks in advance :)

@Adil all the keywords are visible in browser source code. I want to hide this.and no. of keyword is up to 1 million. — Gitz
– Gitz, Commented Apr 30, 2015 at 10:14
In browser source code all the tag keywords are visible.....Yes because you are using them up...restrict it if you dont want to use them all — Shekhar Pankaj
– Shekhar Pankaj, Commented Apr 30, 2015 at 10:29
select * from SIB_KWD_Library ORDER BY Keyword asc ,Put some where,or top clause here — Shekhar Pankaj
– Shekhar Pankaj, Commented Apr 30, 2015 at 10:30
@ShekharPankaj thats why i post the question. for the suggetion for how do I hide these keywords , is any other way ? — Gitz
– Gitz, Commented Apr 30, 2015 at 10:31

Aditya Singh · Accepted Answer · 2015-05-06 04:30:21Z

3

+50

Use `<%= this.SuggestionList %>` instead of `<%# this.SuggestionList %>`

JS:-

 <script>
        $(function(){
           var sampleTags = [<%= this.SuggestionList %>];
            //var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
            $('#myTags').tagit();         
            $('#singleFieldTags').tagit({
                availableTags: sampleTags,            
                allowSpaces: true,
                singleFieldNode: $('#mySingleField')
            });
           });
    </script>

Edit

JS:-

<script>
    $(function () {
        $.ajax({
            url: "http://"+location.host + '/Default.aspx/GetKeywords',
            type: 'GET',
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            success: function(res) {
                $('#singleFieldTags').tagit({
                    availableTags: res.d,
                    allowSpaces: true,
                    singleFieldNode: $('#mySingleField')
                });
            },
            failure: function(err) {
                alert(err);
            }
        });
    });

</script>

CS:-

    [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public static string[] GetKeywords()
    {
        List<string> lst = new List<string>();
        string queryString = "select * from SIB_KWD_Library ORDER BY Keyword asc";
        using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["vConnString"].ToString()))
        {
            using (SqlCommand command = new SqlCommand(queryString, connection))
            {
                connection.Open();
                using (SqlDataReader reader = command.ExecuteReader())
                {

                    while (reader.Read())
                    {
                        lst.Add(reader["Keyword"].ToString());
                    }
                }
            }
        }
        return lst.ToArray();
    }

Simply replace the lst with your keywords returned from database.

edited May 6, 2015 at 4:30

answered May 5, 2015 at 9:43

Aditya Singh

9,6125 gold badges35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Gitz Over a year ago

That is okay but my query is not like you answered :(

Aditya Singh Over a year ago

@Gitz Write a ajax method to get the list from the server using WebMethod and inside success use your tagit code.

Gitz Over a year ago

@wix kid that is what i am looking for. Actually from direct call from code behind is easy but all the keywords are visible into the browser source code. i want to bind it directly from sql sever

Aditya Singh Over a year ago

@Gitz Please see Edit in my answer.

Gitz Over a year ago

Okay !! i am trying :) i will let you know

|

Collectives™ on Stack Overflow

Jquery Tag it in asp.net

1 Answer 1

Use `<%= this.SuggestionList %>` instead of `<%# this.SuggestionList %>`

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Use <%= this.SuggestionList %> instead of <%# this.SuggestionList %>

12 Comments

Your Answer

Sign up or log in

Post as a guest

Use `<%= this.SuggestionList %>` instead of `<%# this.SuggestionList %>`