SelectListItem properties in view model are not passed back from view to controller - asp.net-mvc

Question

I have this View Model:
public class UserViewModel
{
public string ID { get; set; }
[Required]
[Display(Name = "Nombre")]
public string Nombre { get; set; }
[Required]
[Display(Name = "Login")]
public string Login { get; set; }
[Required]
[DataType(DataType.Password)]
[Display(Name = "Contraseña")]
public string Password { get; set; }
[Required]
[DataType(DataType.EmailAddress)]
[Display(Name = "E-mail")]
public string Email { get; set; }
[DataType(DataType.PhoneNumber)]
[Display(Name = "Teléfono")]
public string PhoneNumber { get; set; }
[Display(Name = "Ciudad")]
public System.Web.Mvc.SelectListItem City { get; set; }
[Display(Name = "Empresas")]
public IEnumerable<System.Web.Mvc.SelectListItem> Empresas { get; set; }
[Required]
[Display(Name = "Perfil")]
public string Role { get; set; }
[Display(Name = "Está Vigente")]
public bool Vigente { get; set; }
}
the problem I am having is that when I select something in City and Empresas in the form (they are both SELECT fields), they are not passed to controller in UserViewModel parameter:
public JsonResult EditUser(UserViewModel model)
{
.....
}
Only other properties are passed.
What is the right way to manage this?
EDIT:
this is part of the view:
#using (Html.BeginForm("EditUser", "Account", new { area = "Security" }, FormMethod.Post, new { #class = "form-horizontal form-label-left", role = "form", novalidate = "novalidate", id = "frmUsuario" }))
{
var id = Model == null ? String.Empty : Model.ID;
<div class="errores col-md-12 col-sm-12 col-xs-12" style="display: none">
<div class='validation-summary-errors alert alert-danger alert-white rounded' data-valmsg-summary="true">
<div class="icon">
<i class="fa fa-times-circle"></i>
</div>
<p>Debe completar los campos marcados en forma correcta.</p>
</div>
</div>
#Html.AntiForgeryToken();
<input type="hidden" value="#id" id="id" name="id" />
<div class="item col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
#Html.TextBoxFor(m => m.Nombre, new { #class = "form-control has-feedback-left", placeholder = "Nombre", required = "required" })
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="item col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
#Html.TextBoxFor(m => m.Login, new { #class = "form-control has-feedback-left", placeholder = "Login", required = "required" })
<span class="fa fa-sign-in form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="item col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
#{
//var requerido = String.IsNullOrEmpty(userId) ? "required" : String.Empty;
var requerido = Model == null || String.IsNullOrEmpty(Model.ID);
object htmlAttributes = null;
if (requerido)
{
htmlAttributes = new { #class = "form-control has-feedback-left", placeholder = "Contraseña", required = "required" };
}
else
{
htmlAttributes = new { #class = "form-control has-feedback-left", placeholder = "Contraseña" };
}
}
<!-- Para evitar que los password managers llenen los campos -->
<input type="text" id="hidUser" style="display: none" />
<!-- Para evitar que los password managers llenen los campos -->
<input type="password" id="hidPassword" style="display: none" />
#Html.PasswordFor(m => m.Password, htmlAttributes)
<span class="fa fa-key form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="item col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control has-feedback-left", placeholder = "E-mail", required = "required" })
<span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="item col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
#Html.TextBoxFor(m => m.PhoneNumber, new { #class = "form-control has-feedback-left", placeholder = "Teléfono" })
<span class="fa fa-phone form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="item col-md-12 col-sm-12 col-xs-12 form-group">
#Html.DropDownListFor(m => m.City, new SelectList(new List<SelectListItem>()), new { style = "width: 100%" })
</div>
<div class="item col-md-12 col-sm-12 col-xs-12 form-group">
#Html.DropDownListFor(m => m.Role, new SelectList(new List<SelectListItem>()), new { style = "width: 100%" })
</div>
<div class="item col-md-12 col-sm-12 col-xs-12 form-group">
#Html.DropDownListFor(m => m.Empresas, new SelectList(new List<SelectListItem>()), new { style = "width: 100%", multiple = "multiple" })
</div>
<div class="item col-md-12 col-sm-12 col-xs-12 form-group">
Está Vigente
#Html.CheckBoxFor(m => m.Vigente, new { #class = "flat" })
</div>
}

Answer 1

Please change the type of City Property in UserViewModal
public string City { get; set; }
Then it will return selected option value to controller for e.g
<select
<option value="1">Delhi </option>
<option value="2">Surat </option>
</select>
if you select Delhi then it will assign value 1 to property

Answer 2

I wonder there's show nothing in your dropdown.
In your view model, it should contain at least two properties, such as AvailableCities and City.
public List<SelectListItem> AvailableCities { get;set; }
public string City { get;set; }
AvailableCities contains all cities which should show in dropdow. And the City is using for getting the value user selected.
In your view,
#Html.DropDownListFor(m => m.City, Model.AvailableCities, new { #class = "form-control" })
For now, you should see the dropdown shawn and which could get the selected value in your action.