asp.net MVC ViewModel construction

Question

I'm tying myself in knots - and thought it best to take a big step back, and back to basics.

I understand I should be using a ViewModel, so that is what I'm trying to contruct.

My demo app will have 4 sections (4 different parts of a form to complete):

Get Date/Number of days from user
Use that data to query the database, and return a list of qualifying records - each of these will have a unique ID of TypeID - and for each of these, they should also have 2 dynamic DropDownLists associated with them (so that whatever is selected in ListBox3 for each of the lists, corresponds to the TypeID3 (and whatever ID that has)
user will then be able to select Extras, again from a drop down list populated dynamically
users Name/Add/Tel will be collected

My "View" of what the ViewModel needs to look like/hold is:

enter image description here

I beleive my viewModel should look something like this:

public class SearchViewModel
    {
        public DateTime Date{ get; set; }
        public int Days { get; set; }
        public IQueryable<TypeID> TypeIDs { get; set; }
        public IQueryable<LB1Item> LB1Items { get; set; }
        public IQueryable<LB2Item> LB2Items { get; set; }
        public IQueryable<Extras> Extras { get; set; }
        public string Name { get; set; }
        public string Add { get; set; }
        public string Tel { get; set; }
        public string email { get; set; }
    }

First of all - is this how you would construct a ViewModel for what I've described above? I'm not certain of the DropDown Boxes, as for each form, there could be 1, 2, 3....10, 11, 12 for each TypeID retrieved - based on the Date selected.

Each of the drop down boxes for LB1Item and LB2Item - need to have their selected values stored against the TypeID for each line also.

This is what I think the class should look like for 1 drop down:

public class LB1Item
{
        public String TypeName { get; set; }
        public long TypeID { get; set; }
        public int NumSelected { get; set; }
        public int TypeCount { get; set; }
        public IEnumerable<SelectListItem> CarsAvail 
        {
            get
            {
                return new SelectList(
                    Enumerable.Range(0, TypeCount+1)
                    .OrderBy(typecount => typecount)
                    .Select(typecount => new SelectListItem
                    {
                        Value = typecount.ToString(),
                        Text = typecount.ToString()
                    }
                ), "Value", "Text");
            }
        } 
}

Does that look ok also? Or am I overcomplicating what I'm trying to achieve?

I'd also like, after POSTing back the data after each stage (1, 2, 3, 4) to be actively populating the ViewModel with the selected values - and passing it back down to the view, so that I can retrieve it for the next Step.

What I want to end up with is something like this:

Date: 01/09/2012
Days: 4
{ List:
   TypeID:    3059   ListBox1: 2   ListBox2: 8748,
   TypeID:    2167   ListBox1: 7   ListBox2: 2378,
   TypeID:    4983   ListBox1: 4   ListBox2: 5873
}
{List:
   ExtraID:  4324,
   ExtraID:  3878,
   ExtraID:  4872,
   ExtraID:  7698,
   ExtraID:  2873
}
Name: Mark
Add: My town
Tel: 0912378
Email: [email protected]

Thanks for any help/pointers/samples...

Mark

The easiest way to start this is to try and implement each of the '4 different parts of a form' as 4 individual pages with action methods, view models and views; rather than creating one view model in the way that you are suggesting. — AlexC
– AlexC, Commented Aug 8, 2012 at 13:12

Kevin Junghans · Accepted Answer · 2012-08-08 13:45:29Z

1

For this type of solution I would separate out each section you want to render as individual views and use Ajax calls using Jquery ajax method. I would also use KnockoutJS to handle the views in your client. So you will essentially have two ViewModels, one in JavaScript in the client and one in MVC for returning the pieces you need as JSON for the Ajax calls from the client. Section 1 of your view is entered by the user into the client so you do not need it on the Controller side. Section 1 is basically the data used to query for Section 2. No need to make your collections IQueryable either since you will not being querying the lists that are returned. Your ViewModel on the Controller side might look something like this:

public class Section2
{
    public List<TypeID> TypeIDs { get; set; }
    public List<LB1Item> LB1Items { get; set; }
    public List<LB2Item> LB2Items { get; set; }
}

public class Section3
{
    public List<Extras> Extras { get; set; }
}

public class Section4
{
    public string Name { get; set; }
    public string Add { get; set; }
    public string Tel { get; set; }
    public string email { get; set; }
}

So the steps that would be taken are that when an event is thrown that the date and days have been entered by the user an Ajax call is made back to a controller with entered data and days to query for the information that will populate Section 2. The controller returns the Section2 ViewModel as JSON and it is rendered in the HTML using Knockout. Then when the user selects from the lists in Section 2 an event is thrown to query the controller again to return the information needed to populate Section 3, and the cycle is repeated.

There is an excellent example on using Knockout to do exactly what you are trying to do here.

answered Aug 8, 2012 at 13:45

Kevin Junghans

17.6k4 gold badges47 silver badges62 bronze badges

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

4 Comments

Mark Over a year ago

thank you - that appears to be much clearer to me. If Section 3 and 4 do not depend on any previous selections - would there be any need to make an Ajax call after Section 2 is populated on the client? Or would it be best to simply hide this in a DIV, present Section 3, then hide that, then present section 4 - then finally after the users details had been entered, then compile the JSON to Post back to a model, which combines all of the class Sections you've detailed? (this is a mobile - so I'm trying to keep the screens as concise as possible) - thanks again Kevin, Mark

Mark Over a year ago

Ah - but you're just using the Section 2 viewmodel to post the JSON back to the AJAX call aren't you... so the final model would be a combined class, that would accept the final Post wouldn't it?? Cheers Kevin,

Kevin Junghans Over a year ago

The final ViewModel would be in JavaScript and would most likely be a combined class. To use this ViewModel with Knockout your collections would be of type ko.observableArray. As I mentioned in the answer you will essentially have two ViewModels. The one I showed was for the Controller. Here is a link to a QA on using Knockout for mobile apps stackoverflow.com/questions/6089727/….

Kevin Junghans Over a year ago

The ViewModel on the Controller is basically used to serialize a portion of the client ViewModel into JSON. This JSON is then deserialized on the client ViewModel into JavaScript. I hope this clarifies this approach.

Collectives™ on Stack Overflow

asp.net MVC ViewModel construction

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related