CODEWITHSUNDEEP
asp.netasp.net-mvcasp.net-mvc-3razorwebmatrix
Zion
Zion

Reputation: 11

asp.net razor Model Binding Dynamic List in Form submission

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

Upvotes: 0

Views: 3123

Answers (2)

user1477388
user1477388

Reputation: 21430

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.

Upvotes: 1

Dave Alperovich
Dave Alperovich

Reputation: 32500

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

Upvotes: 2

Related Questions