Grabbing values of jquery generated html with c#

Question

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.

The Request.Form finds the form elements by name if that helps? — Mr. Mr.
– Mr. Mr., Commented May 8, 2013 at 14:29

Skymt · Accepted Answer · 2013-05-08 14:55:53Z

1

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.

edited May 8, 2013 at 14:55

answered May 8, 2013 at 14:34

Skymt

1,0899 silver badges10 bronze badges

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

6 Comments

jackncoke Over a year ago

I plan on adding these items as a mass product add to a database of products. grouping them so that 1 size color and price makes up 1 item. Would Ziping them be the best option then?

Skymt Over a year ago

@jackncoke It's quite optional; it helps if you want better readability if you need to process the data further in code.

jackncoke Over a year ago

@sircapsalot care to elaborate? Which conventions are you referring to?

ddavison Over a year ago

w3.org/TR/xhtml1/#h-4.4 '<div id=item' + counter + '> should be '<div id="item' + counter + '">' I know i am being pedantic, but you should correct the OP from deviating from conventions :)

Skymt Over a year ago

@sircapsalot You are correct, I didn't even notice that when I copied OP's string.. I will edit!

|

Sam Leach · Accepted Answer · 2013-05-08 14:39:08Z

1

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

edited May 8, 2013 at 14:39

answered May 8, 2013 at 14:32

Sam Leach

13k10 gold badges49 silver badges73 bronze badges

Collectives™ on Stack Overflow

Grabbing values of jquery generated html with c#

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related