Reputation: 5150
Ok to start I am a complete novice with MVC and LINQ and Razor. These are the skills I am currently working with trying to learn them as I go.
I have a view that when you first visit the page it lists the entire table by default. On this page I have two drop down boxes that are filled with values I would like to filter the results by.
How do I make it so when a user selects a value that is not the default value it reloads the page and then filters the data by whichever drop down they selected?
public ActionResult Index()
{
var docs = db.GetData();
return View(docs);
}
Here is my dropdown:
@Html.DropDownList("FunctionList", "Select a Function")
Whenever they select a value that is not the "Select a Function" I want it to reload the page and then show the filtered data.
Upvotes: 0
Views: 1496
Reputation: 1557
To do that, I'm afraid you will have to add JQuery to the list of skills needed for your project :)
You need, using JQuery, to create a handler for the change event on your DropDownList. In that event handler, post datas to another Action Method, like this one:
public ActionResult Filter(int id)
{
var docs = db.GetData().Where(d => d.Id == id);
return View("Index", docs);
}
You can do that, by simply calling the Url /{YourController}/Filter/{TheValueForId}.
When you're starting in MVC and LINQ, this is definitely not the best test case you could pick (if you picked it).
If you have the choice, try simpler things as a start.
Upvotes: 1
Reputation: 12966
You'll use something like this. This is a Telerik Grid example.
$('#btnFilter).on('click', function(e){
e.preventDefault();
var grid = $("#grid").data("kendoGrid");
var new_data = getData();
grid.dataSource.data(new_data);
});
function getData() {
var _resData;
var name= $('#txtName').val();
$.ajax({
type: 'POST',
url: '/MyContoller/Index/',
dataType: 'json',
data: { name: name},
success: function (data) {
_resData = data;
},
data: {},
async: false
});
return _resData;
}
In this example the Controller is "My Controller" and action is "Index"
Upvotes: 1
Reputation: 1039428
You could use javascript and subscribe to the change
event of the dropdown and then reload the current page by passing the selected value to the server. Alternatively you could use an AJAX call to the server to refresh only the table portion of the view. In this case you will need to put the table in a partial view that will get included by the main view and you will use AJAX to call a controller action and pass the currently selected value of the dropdown which will be used to filter the results and return a partial.
For example, with jQuery
<script type="text/javascript">
$(function() {
$('#FunctionList').change(function() {
var selectedFunction = $(this).val();
if (selectedFunction != '') {
$.ajax({
url: '@Url.Action("SomeAction", "SomeController")',
type: 'GET',
cache: false,
data: { selectedFunction: selectedFunction }
success: function(result) {
$('#resultsContainer').html(result);
}
});
}
});
});
</script>
You could also include the selected value of the second dropdown if needed:
data: {
selectedFunction: $(this).val(),
someOtherValue: $('#SomeOtherDropDown').val()
}
and your controller action will use those values to filter the results and pass it to a partial view:
public ActionResult SomeAction(string selectedFunction, string someOtherValue)
{
IEnumerable<SomeResultModel> results = ...
return PartialView(results);
}
Upvotes: 2