locked
Input Tags RRS feed

  • Question

  • User-158363518 posted

    hi

    I have a product registration form.

    I have a field called product tags

    is there a plugin To enter tags of a product ?

    And I want get it in the code Behind C#

    i used materialize chips

    http://archives.materializecss.com/0.100.2/chips.html

    <div class="chips col s12">
          <asp:TextBox ID="tags" runat="server"></asp:TextBox>
    </div>

    $('.chips').material_chip();

    How can I get the data entered in this text box in the code behind ?

    I just want to store the tags of a product in the database, If there is another way to do this, please advise me. // Thanks a lot

    Friday, June 29, 2018 4:01 PM

Answers

  • User816065915 posted

    Usign the same name in the id is a bad idea. Every control must have a unique id.

    <input id="tag" type="text" runat="server" /> 
    <input id="tag" type="text" runat="server" /> 
    <input id="tag" type="text" runat="server" />

    Instead you should use the class tag, thus you can use JavaScritp and make a lot of things using ".tag" (Client Side)

    <input id = "ProductName" class = "tag" type="text" runat="server" /> 
    <input id = "ProductPrice" class = "tag" type="text" runat="server" /> 
    <input id = "ProductColor" class = "tag" type="text" runat="server" />

    now, you can access to every control in cb with this:

    string pName = String.Format("{0}", Request.Form["ProductName"]);
    string pPrice = String.Format("{0}", Request.Form["ProductPrice"]);
    string pColor = String.Format("{0}", Request.Form["ProductColor"]);

    I have never used materialize chip component, but I think it's just a mask.

    The controls are still inputs.

    I hope it helps you

    --------------------------------------------------

    Update:

    I think you need this

    example chips

    1.- you need the plugin: CSS and JS, to make it possible!

    <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
                

    2.- you must use this control as a input

    <div class="chips chips-placeholder"></div>

    3.-you need use this script to activate the chip´s functionality

    $('.chips-placeholder').material_chip({
        placeholder: 'Enter a tag',
        secondaryPlaceholder: '+Tag',
      });

    4.- to access the chip data you need use this script, 

    You can put the data in a hidden control and thus get the data from codebehind.

    $('.chips-placeholder').material_chip('data');

    I hope this helps you!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 4, 2018 11:05 PM

All replies

  • User-1171043462 posted

    Where are the scripts to be downloaded to use this?

    Saturday, June 30, 2018 6:38 PM
  • User409696431 posted

    If you have

    <asp:TextBox ID="tags" runat="server"></asp:TextBox>

    in your page, the data entered into it can be gotten in the code behind with simply

    String theTextBoxvalue = tags.Text;

    This is standard stuff, and it doesn't care what the div ID containing it is.  The ID of the textbox has a Text attribute: in your example with the TextBox ID of "tags", that becomes tags.Text.

    Saturday, June 30, 2018 10:07 PM
  • User-158363518 posted

    http://materializecss.com/

    Tuesday, July 3, 2018 6:37 PM
  • User-158363518 posted

    i used bootstrap tag input;

    i entered some tags .finaly bootstrap tag input Generated an input that don't have runat="server"

    and get that value By Using Request.Form["tags"]

    finally i have and string example :  "one,two,three"

    is there any way to do this using materialize chip component ?

    Tuesday, July 3, 2018 7:07 PM
  • User816065915 posted

    Usign the same name in the id is a bad idea. Every control must have a unique id.

    <input id="tag" type="text" runat="server" /> 
    <input id="tag" type="text" runat="server" /> 
    <input id="tag" type="text" runat="server" />

    Instead you should use the class tag, thus you can use JavaScritp and make a lot of things using ".tag" (Client Side)

    <input id = "ProductName" class = "tag" type="text" runat="server" /> 
    <input id = "ProductPrice" class = "tag" type="text" runat="server" /> 
    <input id = "ProductColor" class = "tag" type="text" runat="server" />

    now, you can access to every control in cb with this:

    string pName = String.Format("{0}", Request.Form["ProductName"]);
    string pPrice = String.Format("{0}", Request.Form["ProductPrice"]);
    string pColor = String.Format("{0}", Request.Form["ProductColor"]);

    I have never used materialize chip component, but I think it's just a mask.

    The controls are still inputs.

    I hope it helps you

    --------------------------------------------------

    Update:

    I think you need this

    example chips

    1.- you need the plugin: CSS and JS, to make it possible!

    <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
                

    2.- you must use this control as a input

    <div class="chips chips-placeholder"></div>

    3.-you need use this script to activate the chip´s functionality

    $('.chips-placeholder').material_chip({
        placeholder: 'Enter a tag',
        secondaryPlaceholder: '+Tag',
      });

    4.- to access the chip data you need use this script, 

    You can put the data in a hidden control and thus get the data from codebehind.

    $('.chips-placeholder').material_chip('data');

    I hope this helps you!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 4, 2018 11:05 PM