ASP.NET MVC DropDownListFor - asp.net

Question

My model looks something like this. It gets populated with items at some point by a stored procedure.
public class myModel
{
public List<SelectListItem> myList { get; set; }
public List<myModel> modelList { get; set; }
}
Here is my Controller.
[HttpGet]
public ActionResult getMyListItems()
{
var viewModel = new myModel();
viewModel.myList = viewModel.getMyList();
viewModel.modelList = viewModel.getMyModelList();
return View(viewModel);
}
Here is my view so far. I'm building a dropdownlist so the user can filter the contents of modelList. Kind of like a WHERE clause in an SQL query. Once the user selects the item and clicks the submit button, it applies the filter? Or would this happen after an item is actually selected in the dropdown without the need of a button click event?
#model SWAM2.Models.EmployeeOfcSpecKnow
#using CommonCode.HtmlHelpers;
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="editor-label">
Filter by Column1
</div>
<div class="editor-field">
#Html.DropDownListFor(model => Model.Column1, Model.myList, new { style = "width:400px" })
#Html.ValidationMessageFor(model => model.Column1)
</div>
<div class="toppad10">
<input type="submit" value="Apply Filter" />
</div>
<table class="grayTable rowStriping">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody>
#foreach (var item in #Model.modelList)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Column1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Column2)
</td>
<td>
#Html.DisplayFor(modelItem => item.Column3)
</td>
</tr>
}
</tbody>
</table>
}

Answer 1

You can achieve it by using dropdownlist change event.
refer :
on select change event - Html.DropDownListFor
onchange event for html.dropdownlist

Answer 2

One way to do this is by creating an action on your controller that returns a PartialViewResult and then using AJAX to asynchronously call that action and get the newly filtered list. So for example, you would create an action like this:
public PartialViewResult GetFilteredItems(string filter)
{
var viewModel = new myModel();
viewModel.myList = viewModel.getMyList();
viewModel.modelList = viewModel.getMyModelList();
viewModel.ApplyFilter(filter);
return PartialView(viewModel);
}
and call it using javascript, I prefer jQuery:
$("#dropDownListIdHere").change(function () {
$.ajax({
url: "#Url.Action("GetFilteredItems")",
method: "GET",
data: { filter: $(this).val() },
success: function (result) {
$("#listHolderIdHere").html(result);
}
})
});
Note that with this method, you'd need to create a partial view file (named GetFilteredItems if you don't want to specify a name in the controller action) that would contain the table to be rendered with the filtered items. You would also need to assign an ID to the dropdown and to some sort of container that you'd place your partial view into.