title: DropDownList to filter table MVC 5
body: <p>I am in need of some help on how I can solve this problem. I've been trying several things, but I'm getting nowhere.
  Here's my problem: I want to use a <code>dropdownlist</code> with the table I created with EF in MVC 5. The <code>dropdownlist</code> contains the <code>ContactGroups</code> created by the user. This <code>dropdownlist</code> will change depending on the unique values in my database. When I choose between the <code>ContactGroups</code> in the <code>dropdownlist</code>, I want the table to show only contacts that belong to the selected <code>ContactGroup</code>. For example: if I click on "Friends" in the <code>dropdownlist</code>, I want the table to show only contacts with <code>ContactGroup</code> value as "Friends".</p>
  
  <p>My question: What is the best way to implement this?  How can I get the value selected in <code>DropDownList</code>? Is it best practice to send this value back to the controller and filter out the Contacts? Should I use Partial Views?</p>
  
  <p><strong>View</strong>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@model PagedList.IPagedList&lt;Webassistent.Models.ContactModel&gt;
  @using PagedList.Mvc;
  
  &lt;link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" /&gt;
  
  @{ 
      ViewBag.Title = "Contacts"; 
  }
  
  &lt;h2&gt;Contacts&lt;/h2&gt;
  
  @Html.DropDownList("CG",
  (@ViewBag.Groups) as IEnumerable&lt;SelectListItem&gt;, "Select Group",
  new { htmlAttributes = new { @class = "form-control" } })
  
  
  &lt;p&gt;
      @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  
  @using (Html.BeginForm("Index", "Contact", FormMethod.Get)) {
    &lt;p&gt;
      Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
      &lt;input type="submit" value="Search" /&gt;
    &lt;/p&gt;
  }
  &lt;table class="table"&gt;
      &lt;tr&gt;
        &lt;th&gt;
          First Name
        &lt;/th&gt;
        &lt;th&gt;
          @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter=ViewBag.CurrentFilter })
        &lt;/th&gt;
        &lt;th&gt;
          Private Phone
        &lt;/th&gt;
        &lt;th&gt;
          Private Email
        &lt;/th&gt;
        &lt;th&gt;
          @Html.ActionLink("ContactGroup", "Index", new { sortOrder = ViewBag.GroupSortParm, currentFilter = ViewBag.CurrentFilter })
        &lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
      @foreach (var item in Model) {
      &lt;tr&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.FirstName)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.LastName)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.PrivatePhone)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.PrivateEmail)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.ContactGroup)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.ActionLink("Edit", "Edit", new { id=item.ContactId }) | @Html.ActionLink("Details", "Details", new { id=item.ContactId }) | @Html.ActionLink("Delete", "Delete", new { id=item.ContactId })
        &lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;br /&gt;Page @(Model.PageCount
  &lt; Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount @Html.PagedListPager(Model, page=&gt;Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter}))</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>[Authorize]
      public ActionResult Index(string sortOrder, string currentFilter, string searchString, int? page)
      {
          ViewBag.CurrentSort = sortOrder;
          ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
          ViewBag.GroupSortParm = sortOrder == "Group" ? "group_desc" : "Group";
  
          if (searchString != null)
          {
              page = 1;
          }
          else
          {
              searchString = currentFilter;
          }
          ViewBag.CurrentFilter = searchString;
  
          string thisUser = User.Identity.GetUserId();
          var contacts = from s in db.ContactModels where s.UserId == thisUser select s;
  
          if (!String.IsNullOrEmpty(searchString))
          {
              contacts = contacts.Where(s =&gt; s.LastName.Contains(searchString) || s.FirstName.Contains(searchString) || s.ContactGroup.Contains(searchString));
          }
  
          switch (sortOrder)
          {
              case "name_desc":
                  contacts = contacts.OrderByDescending(s =&gt; s.LastName);
                  break;
              case "Group":
                  contacts = contacts.OrderBy(s =&gt; s.ContactGroup);
                  break;
              case "group_desc":
                  contacts = contacts.OrderByDescending(s =&gt; s.ContactGroup);
                  break;
              default:
                  contacts = contacts.OrderBy(s =&gt; s.LastName);
                  break;
          }
          int pageSize = 3;
          int pageNumber = (page ?? 1);
  
          var groups = contacts.Where(x =&gt; x.ContactGroup !=null).Select(x =&gt; x.ContactGroup).Distinct();
          ViewBag.Groups = new SelectList(groups);
  
          return View(contacts.ToPagedList(pageNumber, pageSize));
      }
  </code></pre>
  
  <p>I thought I could use <code>ViewBag.Groups</code> in order to keep track of the <code>ContactGroup</code>s belonging to the current user. This is used by <code>DropDownList</code> is View to display the <code>ContactGroup</code>s.</p>
  
  <p>I'm sure there is a simple way to do this, but I can't seem to see the solution. Any help is greatly appreciated!!</p>