MVC4 ViewModel to View from database - Example - asp.net-mvc-4

Question

Keep banging my head over seamlessly simple problem. Can somebody write me complete code for:
2 models:
public class State
{
public int StateID { get; set; }
public string Name { get; set; }
}
public class City
{
public int CityID { get; set; }
public string Name { get; set; }
public int StateID { get; set; }
[ForeignKey("StateID")]
public State State { get; set; }
public IEnumerable<SelectListItem> StateList { get; set; }
}
Problem is the rest. How to write ViewModel, Index ActionResult and View? Am using EF within built in testing environment.
I simply run out of combinations to try :(
#
And here is my final solution that works:
ViewModel
public class CityIndexViewModel
{
public int CityID { get; set; }
public string CityName { get; set; }
public int StateId { get; set; }
public string StateName { get; set; }
}
Controller
public ActionResult Index()
{
var model = new List<CityIndexViewModel>();
var dbCity = db.City.Include("State");
foreach (City c in dbCity)
{
var cityIndex = new CityIndexViewModel()
{
CityID = c.CityID,
CityName = c.Name,
StateId = c.State.StateID,
StateName = c.State.Name
};
model.Add(cityIndex);
}
return View(model);
}
View
#model IEnumerable<app.ViewModel.CityIndexViewModel>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Citys
#*#Html.DisplayNameFor(model => model.Citys)*#
</th>
<th>
States
#*#Html.DisplayNameFor(model => model.States)*#
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.CityName)
</td>
<td>
#Html.DisplayFor(modelItem => item.StateName)
</td>
<td>
#* #Html.ActionLink("Edit", "Edit", new { id=item.CityID }) |
#Html.ActionLink("Details", "Details", new { id=item.CityID }) |
#Html.ActionLink("Delete", "Delete", new { id=item.CityID })*#
</td>
</tr>
}
</table>