How to persist temporary values between postbacks before inserting to the database?

Question

General Problem:

I'm trying to create something similar to this:

The user can select a product from the dropdown, click add, and the result is another product row being added underneath in the "Product Added" section. A "Product Descriptor" must be selected for each product that has been added via the dropdown in each row. Only when the user clicks the "Submit" button does each of the product rows get inserted to the database.

Question:

What is the best way to persist the product selections between Postbacks?

I'm not worried about persisting the "Product Descriptor" selections, I believe I can do that. My main concern is finding the best way of storing these temporary selections before they are saved to the database.

My current approach:

The way I'm doing it now is to manage list of ProductListItem objects in the viewstate. This list is bound to a ListView that displays the added products.

Private Property SelectedProductList As List(Of ProductListItem)
        Get
            Return CType(ViewState("SelectedProductList"), List(Of ProductListItem ))
        End Get
        Set(ByVal value As List(Of ProductListItem ))
            ViewState("SelectedProductList") = value
        End Set
End Property

The ProductListItem class:

<Serializable()>
Public Class ProductListItem

    Public Property ProductID As Integer
    Public Property ProductName As String

    ' ProductDescriptor class represents Product Descriptor (details omitted)
    Public Property Descriptor As ProductDescriptor 

    ' Constructor omitted

End Class

The Add Button Click handler:

 Protected Sub btnAddProduct_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAddProduct.Click

        SelectedProductList.Add( New ProductListItem(...) )
        ProductListView.DataSource = SelectedProductList
        ProductListView.DataBind()

  End Sub

I'm thinking to use the Session instead of the Viewstate here, because I have two other similar situations on the same page, where I'm keeping lists of objects in the viewstate, and I'm worried about the Viewstate getting corrupted or getting too big. What do you think?

Thanks for your time!

Answer 1

Since you asked for the best way, I would use jQuery + knockoutJS.

Now if you want to stick with the traditional WebForms approach, why don't be elegant?? Creating a simple UserControl to handle all this for you (and you can also use an UpdatePanel in combination with dynamic controls). You will just need to add these controls dynamically (which is easy if you are aware of the Page's lifecycle), I have some working examples on my GitHub site

In your control you would expose a property of type ProductListItem and in your page you will iterate through all the selected products (UserControls) and simple ask for the ProductListItem property

This way you would be working in harmony with ASP.NET

Edit 1

Additionally, and based on this:

I'm thinking to use the Session instead of the Viewstate here, because I have two other similar situations on the same page

Perhaps the controls are the best choice for you

I would not recommend you to use the Session, as a personal choice I tend to avoid using the Session as much as I can, to free server resources, instead use the power of the User's PC as much as you can using client side scripting, this way it'll be easy to scale your Web Application when needed