CODEWITHSUNDEEP
c#jqueryhtmlasp.netforms
jackncoke
jackncoke

Reputation: 2020

Grabbing values of jquery generated html with c#

I am trying to grab the values of TextBoxs that I generate using JQuery. The TextBoxes get added to the page 3 at a time. Each 3 boxes represent an item.

enter image description here

Add creates another 3 boxes for size, price and color. It seems that you can grab everything in a form i am told from Request.Form Which gives you a NameValueCollection Somehow and please correct me if i am wrong those values should be stored in that collection. That is what i cant seem to understand. Based on that collection how do you find the names of the textboxes and there values?

JQuery that creates the boxes:

 <script type="text/javascript">
         counter = 1;

         function foo() {
             $(".form").append('<div id=item' + counter + '><hr/><div class="innerItem"><p>size</p><input type="text" name="item" /><p>color</p><input type="text" name="item" /><p>price</p><input type="text" name="item" /></div>');
             del = $("#item" + counter);
             del.append('<input type="button" class="remove" value="remove" id="' + counter + '"/>');
             counter++;
         }

         $("body").on('click', '.remove', function () {
             var id = $(this).attr("id");
             $("#item" + id).remove();
         });
</script>

This is what i have in the codebehind. Mainly using this code to figure out how this works. 

  protected void Page_Load(object sender, EventArgs e)
        {
            if(IsPostBack)
            {
            NameValueCollection data;

            //Load Form variables into NameValueCollection variable.
            data = Request.Form;
            // Get names of all forms into a string array.
            String[] arr1 = data.AllKeys;



            for (int loop1 = 0; loop1 < arr1.Length; loop1++)
            {
                Response.Write("Form: " + arr1[loop1] + "<br>");
            }

            }
        }

This is codebehind generates:

Form: __EVENTTARGET

Form: __EVENTARGUMENT

Form: __VIEWSTATE

Form: item

I am thinking the data i want is in item. I just don't understand if that is right or how to access what is in item?

This could also be 100% wrong. I read some info online and might not understand it correctly.

Upvotes: 0

Views: 878

Answers (2)

Skymt
Skymt

Reputation: 1089

First you should give each textbox a unique name, so you can tell them apart when posting.

$(".form").append('<div id="item' + counter + '"><hr/><div class="innerItem"><p>size</p><input type="text" name="item-size" /><p>color</p><input type="text" name="item-color" /><p>price</p><input type="text" name="item-price" /></div>');

You can then get arrays of these in code-behind using the GetValues method

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            string[] Sizes = Request.Form.GetValues("item-size");
            string[] Colors = Request.Form.GetValues("item-color");
            string[] Prices = Request.Form.GetValues("item-price");
        }
    }

Or you can directly zip these arrays together into an array of "items"

            var items = Request.Form.GetValues("item-size")
                .Zip(Request.Form.GetValues("item-color"), (s, c) => new { s, c })
                .Zip(Request.Form.GetValues("item-price"), (a, p) => new { Size = a.s, Color = a.c, Price = p });

where each item will have the properties Size, Color and Price.

Upvotes: 1

Sam Leach
Sam Leach

Reputation: 12956

You want 

var postedValue = Request.Form["item"];

All 3 of your text boxes are named "item".

You want to change the names of your text boxes to something like

function foo() {
     $(".form").append('<div id=item' + counter + '><hr/><div class="innerItem"><p>size</p><input type="text" name="item-size" /><p>color</p><input type="text" name="item-color" /><p>price</p><input type="text" name="item-price" /></div>');
     del = $("#item" + counter);
     del.append('<input type="button" class="remove" value="remove" id="' + counter + '"/>');
     counter++;
 }

and then use

var size = Request.Form["item-size"];
var color = Request.Form["item-color"];
var price = Request.Form["item-price"];

See MSDN for further information on Request.Form

Upvotes: 1

Related Questions