I am new to ASP.Net MVC and would like some advice on how to create a view that allows the user to, for example, select some product details from a drop down list, enter quantity then click add and have the details added to a HTML table or maybe partial
view.
So when the user has selected a product and entered the qty they click add which inserts a row to the table (or some kind of list).
I basically need to build up a list of products in the model but I'm unsure whether this needs to be all done using javascript or whether each time the 'Add' button is clicked it posts back to the corresponding controller action which takes the new product
details, adds them to a List on the model then returns the same view and model which is then redisplayed in a table.
Just to give an overview of what I'm trying to do, this product list is going to be the first step in a wizard style view for a business application, so:
Step 1 - Enter products
Step 2 - Lookup Customer by name
If matching customers found then
Step 3 - Display existing customers for user to select from
I think you are on the right track and it really depends on your scenario, If you would like to implement the described flow in a smoother way for the user you can stick with AJAX and javascript /jQuery, as you do callbacks to the server otherwise you
can go with full page posts to the server
You can add the new item to tge kof available items in javasrtipt itseld using the jQuery append() method or you can do a get call fro a partia view which lists all the products.
How would the product details be added to say a table using jQuery in a way that model binding still works?
Also, each step be better in a partial view?
I'm thinking I need one view with one model where the model has all the info I need to collect in each step but not sure how to display each step in a partial view and have all steps/partial view bound to the one model.
and would like some advice on how to create a view that allows the user to, for example, select some product details from a drop down list, enter quantity then click add and have the details added to a HTML table or maybe partial view.
Matt_22
Member
15 Points
11 Posts
Razor View - Build up a table of products
Mar 25, 2012 05:50 PM|LINK
I am new to ASP.Net MVC and would like some advice on how to create a view that allows the user to, for example, select some product details from a drop down list, enter quantity then click add and have the details added to a HTML table or maybe partial view.
Basic example for the view:
--------------------------------------------------------------------
Product: [drop down list] Qty: [text box] Add [button]
--------------------------------------------------------------------
Product [column] | Qty [Column] | Remove [column]
P1 | 10 | Remove [link/button]
P2 | 5 | Remove [link/button]
So when the user has selected a product and entered the qty they click add which inserts a row to the table (or some kind of list).
I basically need to build up a list of products in the model but I'm unsure whether this needs to be all done using javascript or whether each time the 'Add' button is clicked it posts back to the corresponding controller action which takes the new product details, adds them to a List on the model then returns the same view and model which is then redisplayed in a table.
Just to give an overview of what I'm trying to do, this product list is going to be the first step in a wizard style view for a business application, so:
Step 1 - Enter products
Step 2 - Lookup Customer by name
If matching customers found then
Step 3 - Display existing customers for user to select from
Else
Step 4 - Enter new customer details
Step 5 - Summay with submit button
Any help would be appreciated.
Thanks
rado_
Member
148 Points
34 Posts
Re: Razor View - Build up a table of products
Mar 25, 2012 07:00 PM|LINK
Hi Matt_22,
I think you are on the right track and it really depends on your scenario, If you would like to implement the described flow in a smoother way for the user you can stick with AJAX and javascript /jQuery, as you do callbacks to the server otherwise you can go with full page posts to the server
Best,
Rado
2*MCTS,MCPD
ASP.NET MVC Controls
Follow @RadoslavMinchev
kshyju
Member
134 Points
39 Posts
Re: Razor View - Build up a table of products
Mar 25, 2012 07:17 PM|LINK
You can do in both ways. Using ajax and using the normal form posting approach.
With ajax
<input type="button" id="btnAdd" value="Add" />
and in your javascript
$("#btnADd").click(function(){
$.post("yourcontroller/youraction?"+prod="+$("hdnProductId").val()+"&qty="+$("txtQty").val(),function(data){
//Do with the response data
});
});
You can add the new item to tge kof available items in javasrtipt itseld using the jQuery append() method or you can do a get call fro a partia view which lists all the products.
My flarack profile
Matt_22
Member
15 Points
11 Posts
Re: Razor View - Build up a table of products
Mar 25, 2012 07:20 PM|LINK
How would the product details be added to say a table using jQuery in a way that model binding still works?
Also, each step be better in a partial view?
I'm thinking I need one view with one model where the model has all the info I need to collect in each step but not sure how to display each step in a partial view and have all steps/partial view bound to the one model.
kshyju
Member
134 Points
39 Posts
Re: Razor View - Build up a table of products
Mar 25, 2012 07:23 PM|LINK
Check this example,
http://afana.me/post/create-wizard-in-aspnet-mvc-3.aspx
It has guidelines to create a wizard style app. You may need to customize based on your model.
My flarack profile
ignatandrei
All-Star
134971 Points
21637 Posts
Moderator
MVP
Re: Razor View - Build up a table of products
Mar 25, 2012 07:55 PM|LINK
please see
http://bit.ly/mvc_ajax_jquery
Matt_22
Member
15 Points
11 Posts
Re: Razor View - Build up a table of products
Mar 27, 2012 05:47 AM|LINK
Hi all
Thanks for the replies, they have all helped.
ignatandrei - Thanks for the link. The example project showing how to use jQuery to get json data from the controller was a great help.