how to combine a viewmodel with various other fields - asp.net-mvc

Question

In my mvc4 application I need to create a view where customers can choose from a list of services, subscribe (by selecting the yes/no option) and give details of the last service date they had the service done and also provide a proposed date for the future service. It should roughly look like as below
.
I have a services table in the database like Services(Id,Name etc) but don't know how shall I combine the other values which I m showing like yes/no and the two dates in a single viewModel and pass it to view and retrieve all the values on post back. In simple words which fields will my viewmodel have? Any ideas. thanks

Answer 1

It sounds like you're asking for more than just a view model. To expand on shenku's answer, this would be my rough/untested approach in VB. It's no way all-inclusive, but hopefully gives you an idea on how to manipulate data, pass it to a view, and get data back on post-back.
Model/DB objects:
Public Class Service
Public Property ServiceID As Integer
Public Property Name As String
End Class
Public Class CustomerService
Public Property CustomerID As Integer
Public Property ServiceID As Integer
Public Property Selected As Boolean
Public Property LastDate As DateTime
Public Property ProposedDate As DateTime
End Class
ViewModel:
Public Class ViewRow
Public Property ServiceID As Integer
Public Property Name As String
Public Property YesSelected As Boolean
Public Property NoSelected As Boolean
Public Property LastDate As String
Public Property ProposedDate As String
End Class
Public Class ViewModel
Public Property TableHeaders As String() = {"Services","Yes","No","Date of Last Service", "Proposed Date"}
Public Property ServiceDetails As List(Of ViewRow)
End Class
Controller:
Public Class HomeController
Inherits System.Web.Mvc.Controller
' Simulating EntityFramework
Protected db As New MyEntities
Function ServiceList() As ActionResult
Dim thisCustomerID As Integer
' *Set user's customer ID*
' Using a LINQ join to combine with other service information
Dim vm As New ViewModel With {
.ServiceDetails = ( _
From custService In db.CustomerService().ToList()
Join service In db.Service().ToList()
On custService.ServiceID Equals service.ServiceID
Where custService.CustomerID.Equals(thisCustomerID)
Select New ViewRow With {
.ServiceID = service.ServiceID,
.Name = service.Name,
.YesSelected = custService.Selected,
.NoSelected = Not custService.Selected,
.LastDate = custService.LastDate.ToString("MMM yyyy"),
.ProposedDate = custService.ProposedDate.ToString("MMM yyyy")
}).ToList()
}
' Passing to a strongly-typed view of type "ViewModel"
Return View("serviceList",model:=vm)
End Function
' This is where you post back, and data can be bound to type "ViewModel"
<HttpPost()> _
Function ServiceList(data As ViewModel) As ActionResult
' *Model Validation / Insert / Update*
' Refresh the page (if you want)
RedirectToAction("ServiceList","Home")
End Function
End Class
Razor View (serviceList.vbhtml):
#ModelType ViewModel
<div>
<table>
<tr>
#For Each head In Model.TableHeaders
#<th>#(head)</th>
Next
</tr>
#For Each detail In Model.ServiceDetails
#<tr id=#(detail.ServiceID)>
<td>#(detail.Name)</td>
<td>#(If(detail.YesSelected,"X",""))</td>
<td>#(If(detail.NoSelected,"X",""))</td>
<td>#(detail.LastDate)</td>
<td>#(detail.ProposedDate)</td>
</tr>
Next
</table>
</div>
To post-back, you'll have to have javascript grab data entered into any input fields (I didn't include any here), and construct a JSON object--with the appropriate data--that reflects the argument in the Controller's post action. I provided an example with an argument of type ViewModel. This means your JSON fields have to match those defined in the ViewModel model, and their values have to match the respective property's data type. ASP.NET will bind the data on post back. Additionally ViewModel is complex, so you can post a list of ViewRow (for multiple record updates). To bind this, your JSON object needs to have the ServiceDetails property that contains an array of objects that in turn have properties of ServiceID, Name, YesSelected, etc.

Answer 2

A collection of services in your viewmodel should do it, the Selected bool of course would represent the yes/no option and probably be bound to a checkbox.
public class ViewModel
{
public IList<Service> Services {get;set;}
}
public class Service
{
public bool Selected {get;set;}
public DateTime LastDate {get;set;}
public DateTime ProposedDate {get;set;}
}