asp.net razor Model Binding Dynamic List in Form submission

Question

I am trying to create an order form for input.

I need the user to be able to add multiple line items then update. I was trying to use the shopping cart class (where user creates a cart item and adds a list item, multiple lines can be added to the list item).

I didn't get through with that. I am using asp.net razor am using webmatrix to build site. Webmatrix is saying that it doesnt recognise Cart().

@{ 
if (Session["cart"] == null)
{
Session["cart"] = new Cart();
}
Cart cart = (Cart)Session["cart"];

}
<table id="cartTable">
<tr>
<th class="product">Product</th>
<th class="size">Size</th>
<th class="price">Price</th>
</tr>
@foreach (var item in cart.Items)
{
<tr>
<td class="product">@item.ProductID</td>
<td class="size">@item.Size</td>
<td class="price">£@item.Price</td>
</tr>
}
</table>

Is there a better way to do this? All help is greatly appreciated

Dave Alperovich · Accepted Answer · 2013-02-22 18:41:10Z

2

There IS a way to bind dynamic list elements

@foreach (i=0; i< cart.Items.count; i++)
{
<tr>
   <td class="product"> <input type="hidden" name="cart.item[@i].ProductID"> </td>
   <td class="size"> <input type="text" name="cart.item[@i].Size"> </td>
   <td class="price">£ <input type="text" name="cart.item[@i].Price"> </td>
</tr>
}

Webmatrix is saying that it doesnt recognise Cart()

I strongly recommend you place your Models in the Models folder and make them part of the Models namespace. Then they should be available automatically. Otherwise, you may have to reference cart by it's complete reference path (if it is not in your Models folder). example

Datalayer.Entities.Cart cart = (Datalayer.Entities.Cart)Session["cart"];

Final Note: You are not passing your Cart as a Model to your View

example

@model {Project}.Entities.Cart

This is a better practice using the MVC 3 framework. You would have discovered whatever reference problem earlier and would have the option to use tightly bound Helpers

edited Feb 22, 2013 at 18:41

answered Feb 22, 2013 at 17:47

Dave Alperovich

32.6k8 gold badges82 silver badges101 bronze badges

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

3 Comments

Forty-Two Over a year ago

+1 Good answer. Model binding to lists is one of the biggest "gotcha's" in asp.net mvc

Zion Over a year ago

Thanks for ur response. cart is a c sharp file that is in the app_data folder was under the impression that it would be avalable to all pages within my site.

Dave Alperovich Over a year ago

@OmalieBraithwaite maybe it is. The first step in debugging is to use the namespace to reference.

user1477388 · Accepted Answer · 2013-02-22 18:50:09Z

1

I recommend using the Visual Studio 2012 Express over WebMatrix for MVC development. Furthermore, I would also suggest using jQuery (javascript) if you wish to let users add line items on the fly via the same page. I can share an example with you if you like.

One more note: You tagged this with both MVC and WebForms, which are two very different platforms.

Edit:

I think Dave A's solution may be better, but to do this with jQuery:

1 Put your add button and hidden `div` in a form

<form action="/MyController/MyAction" method="post" id="addListItemForm">
<button id="addListItemButton">Add List Item</button>
<div style="hidden">
<input type="text" name="product" id="product" />
<button id="addButton">Add</button>
</div>
<input type="submit" text="Submit" />
</form>

2 Show the form fields on button click

$('#addListItemButton').click(function(){
  $('#addListItemForm div').show();
});

3 Add hidden field on add button click

$('#addButton').click(function(){
  var product = $('#addListItemForm #product').val();
  $("input").attr({
            name : "productListItems[]", 
            type : "hidden",
            value : product
        }).after('#addListItemForm');
});

4 When the form submits, you will have various product names in the `productListItems` array passed via POST method.

Note: You'll have to play with this a little bit, but it would be a good learning exercise... I am not exactly sure what you are trying to do, but this is my best guess.

edited Feb 22, 2013 at 18:50

answered Feb 22, 2013 at 17:37

user1477388

21.6k35 gold badges152 silver badges277 bronze badges

4 Comments

Zion Over a year ago

my mistake with the tag.now learning.an example would be much apprecited. Thanks a lot.

user1477388 Over a year ago

Here is an example of a method to add items to a form via jQuery by using a hidden field.

Zion Over a year ago

my question may sound imprudent, but can i use jquery with webmatrix.thought it was razor which c sharp.just asking.i am trying to build an order form page.that allows user to add more than one item to their order then post. order number name and so on are only entered once.as it is now i can add one item and view that in gridview. thanks for the codes..

user1477388 Over a year ago

Yes, jQuery is a client-side language, independent of the server (can be used with C#, VB, PHP, etc.). I don't know exactly what you are trying to do, but you can try what I gave you and see if it does what you want.

Collectives™ on Stack Overflow

asp.net razor Model Binding Dynamic List in Form submission

2 Answers 2

3 Comments

1 Put your add button and hidden `div` in a form

2 Show the form fields on button click

3 Add hidden field on add button click

4 When the form submits, you will have various product names in the `productListItems` array passed via POST method.

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Put your add button and hidden div in a form

2 Show the form fields on button click

3 Add hidden field on add button click

4 When the form submits, you will have various product names in the productListItems array passed via POST method.

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related

1 Put your add button and hidden `div` in a form

4 When the form submits, you will have various product names in the `productListItems` array passed via POST method.