asp.net-mvc-3 - Dropdown list in MVC3

Question

I have a form that wanna to select category and tag from drop down list and bind it to a post , this is my ViewModel:

public class PostViewModel
    {
        public IList<Category> Category { get; set; }
        public IList<Tag> Tag { get; set; }
    }

and this is my get action :

  public ActionResult Add()
        {
            ViewBag.CategoryList = new SelectList(_categoryRepository.GetAllCategory());
            ViewBag.TagList = new SelectList(_tagRepository.GetAllTag());
            return View();
        }

now how can I get the Id dropdownlst to send it to the Post action?? :

    <div>
        @Html.LabelFor(post => post.Category)
        @Html.DropDownListFor   ????
        @Html.ValidationMessageFor(post => post.Category)
    </div>

I tried this one it it didn't work

<div>
            @Html.LabelFor(post => post.Category)
            @Html.DropDownListFor(post => post.Category, ViewBag.CategoryList as SelectList, "--- Select Category ---")
            @Html.ValidationMessageFor(post => post.Category)
        </div>

please give me a solution about this ,thanks

Answer 1

Try to avoid dynamic stuff like ViewBag and ViewData. Use strongly typed views.

ViewModel is just a POCO class which we will use to transfer data between your view and the action method. It will be specific to the view.

You have a viewmodel but you are not using it properly. Add 2 more properties to your viewmodel for getting the selected item from the dropdown. Also i changed the name of your proprties to pluralized for (Categories ,Tags) because they are for storing a collection.

public class PostViewModel
{
    public List<SelectListItem> Categories{ get; set; }
    public List<SelectListItem> Tags { get; set; }

    public int SelectedCategory { set;get;}
    public int SelectedTag { set;get;}
}

Now in your GET Action method, create an object of your view model and set the collection properties and then send that object to your view using View method.

public ActionResult Add()
{
    var vm=new PostViewModel();
    vm.Categories= GetAllCategories();
    vm.Tags= GetAllTags();
    return View(vm);
}

Assuming GetAllCategories and GetAllTags are 2 methods which returns a collection of SelectListItem for categories and tags.

public List<SelectListItem> GetAllCategories()
{
  List<SelectListItem> categoryList=new List<SelectListItem>();
  categoryList.Add(new SelectListItem { Text = "Sample", Value = "1" });
  // TO DO : Read from your dB and fill here instead of hardcoding

  return categoryList;
}

and in your view,

@model PostViewModel
@using(Html.BeginForm())
{
    @Html.DropDownListFor(x => x.SelectedCategory, 
                       new SelectList(Model.Categories,"Value","Text"), "Select")

    @Html.DropDownListFor(x => x.SelectedTag, 
                       new SelectList(Model.Tags,"Value","Text"), "Select")


  <input type="submit" value="save" />


}

And in your HttpPost action method, you can get the selected items in the 2 properties we added

[HttpPost]
public ActionResult Add(PostViewModel model)
{
  if(ModelState.IsValid)
  {
     //check model.SelectedCategory and model.SelectedTag
     //save and redirect
  }
  //to do :reload the dropdown again.
  return View(model);
}

Answer 2

you were close:

public class PostViewModel
{
    public int CategoryId { get; set; } // <-- Altered
    public int TagId { get; set; } // <-- Altered
}

<div>
    @Html.LabelFor(post => post.Category)
    @Html.DropDownListFor(post => post.CategoryId, 
                                  ViewBag.CategoryList as IEnumerable<SelectListItem>, 
                                  "--- Select Category ---")
    @Html.ValidationMessageFor(post => post.Category)
</div>