CODEWITHSUNDEEP
c#asp.netwebformsbootstrap-4
Ali
Ali

Reputation: 2768

Getting data from HTML to C#

I am using this HTML code (bootstrap) to allow users to enter tags 

<div class="bootstrap-tagsinput"> <span class="tag label label-info">test tag<span data-role="remove"></span></span> <span class="tag label label-info">testing <span data-role="remove"></span></span> <span class="tag label label-info">issue <span data-role="remove"></span></span> <input size="1" type="text"> </div>

So the output

enter image description here

My question is, I cannot figure out how do I read this text in C# (asp.net Web forms) because it's not ASP:TextBox

Is this possible to read these tags in C#?

Thank you

Upvotes: 0

Views: 1663

Answers (2)

Jon P
Jon P

Reputation: 19772

So by looking at the documentation here: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ you should be applying data-role="tagsinput" to the input element. This means you should be able to do something like:

Important Update : I threw this together before my morning coffee had kicked in. Note that asp:button has become asp:TextBox

<div class="bootstrap-tagsinput"> 
   <span class="tag label label-info">test tag<span data-role="remove"></span></span>
   <span class="tag label label-info">testing <span data-role="remove"></span></span> 
   <span class="tag label label-info">issue <span data-role="remove"></span></span> 
   <asp:TextBox ClientIDMode="Static" ID="tags" runat="server" data-role="tagsinput" />       
</div>

You can then access the values from tags as a comma delimited string.

Alteratively you could try

<div class="bootstrap-tagsinput"> 
   <span class="tag label label-info">test tag<span data-role="remove"></span></span>
   <span class="tag label label-info">testing <span data-role="remove"></span></span> 
   <span class="tag label label-info">issue <span data-role="remove"></span></span> 
   <input id="tags" runat="server" size="1" type="text" data-role="tagsinput" />       
</div>

This will make the text input available as a comma delimited string server side, again using tags.

Finally the least webformy option, just give the input a name attribute

<div class="bootstrap-tagsinput"> 
   <span class="tag label label-info">test tag<span data-role="remove"></span></span>
   <span class="tag label label-info">testing <span data-role="remove"></span></span> 
   <span class="tag label label-info">issue <span data-role="remove"></span></span> 
   <input name="tags" size="1" type="text" data-role="tagsinput" />       
</div>

You can then access it serverside with Request.Form["tags"], with, you guessed it, the tags as a comma delimited string.

Upvotes: 3

DiegoS
DiegoS

Reputation: 826

Try this approach, using JQuery:

Client side:

<div class="bootstrap-tagsinput"> 
 <span class="tag label label-info">test tag<span data-role="remove"></span></span> <span class="tag label label-info">testing <span data-role="remove"></span></span> <span class="tag label label-info">issue <span data-role="remove"></span></span> 
 <input size="1" type="text"> 
</div>
<input type="submit" id="sendTagsToServer" text="Send Tags To Server!"/>

<!--Both buttons are invisible, to postback and send parameters-->
<asp:Button ClientIDMode="Static" ID="postbackButton" runat="server" 
Style="display:none;" />
<asp:HiddenField ClientIDMode="Static" ID="tagsString" runat="server" />

<script>
  $(document).ready(function(){
    $("#sendTagsToServer").on("click",function(){
       //get values from tags
       var tags= $(".tag"); 

       //save values in hidden 
       var tagText = "";           
       tags.each(function(index){
         tagtext = tagText + "&" + $(this).text();         
       });
       $("#tagsString").val(tagText);     

      //postback to server
      $("#postbackButton").click();
    });
  });
</script>

Server side:

protected void btnPB_Click(object sender, EventArgs e)
{
    //read tags, server side
    string[] param = tagsString.Value.Split("&");
}

The trick here is use two inputs, both hidden, one to postback and one to send parametters and of course, you can use Javascript instead of JQuery.

Upvotes: 0

Related Questions