CODEWITHSUNDEEP
c#asp.net-mvclinqrazor
James Wilson
James Wilson

Reputation: 5150

MVC/LINQ Search Functionality

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

Answers (3)

Miiite
Miiite

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

Sam Leach
Sam Leach

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

Darin Dimitrov
Darin Dimitrov

Reputation: 1039498

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

Related Questions