ASP.net mvc Call Action on DropDown Value Change

Question

Ive got a dropdown on one of my views. This dropdown only has for entries. Basically i need to know how to call an action when the dropdown value is changed?

My situation is: Im making a simple inbox page. The dropdown has the filter options: View All, View Invites, View Replies etc..

When the user selects a filter option from the dropdown I want to call to an action to return the new view with the filtered data.

Any ideas? Im guessing it is somehow going to be a script attached to the OnChange of the dropdown, but i wouldnt have a clue what the syntax is or how call MVC action from the script.

Thanks in advance

David Klempfner · Accepted Answer · 2018-03-08 02:25:24Z

7

You need to use javascript for this. Here's an example. Suppose you have the following view model:

public class MyViewModel
{
    public IEnumerable<SelectListItem> Values { get; set; }
}

which you would populate in your controller:

[HandleError]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            Values = new[] 
            {
                new Item { Value = "1", Text = "Item 1" },
                new Item { Value = "2", Text = "Item 2" },
                new Item { Value = "3", Text = "Item 3" }
            }
        };
        return View(model);
    }
}

And then the view which is strongly typed to this model:

<%: Html.DropDownListFor(x => x.SelectedValue, 
    new SelectList(Model.Values, "Value", "Text"), 
    new { id = "items" }
)%>

The last part is to register for the change event (using jquery in this example):

$(function () {
    // Register for the change event of the drop down
    $('#items').change(function () {
        // When the value changes, get send an AJAX request to the
        // Filter action passing the selected value and update the
        // contents of some result div with the partial html returned
        // by the controller action
        $('#result').load('<%: Url.Action("filter") %>', 
            { selectedValue: $(this).val() }
        );
    });
});

edited Mar 8, 2018 at 2:25

David Klempfner

10.2k25 gold badges94 silver badges192 bronze badges

answered Oct 13, 2010 at 6:33

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MattyD Over a year ago

Another question on the same path. With my mailbox listing which is made from a DevExpress grid. Each row has a checkbox that the user can check so that they can delete multiple records at a time. When the user clicks the select all link or the clear all link i need to set all the checkboxes within the grid to be checked or unchecked. How do I go about this with client-side scripting? Thanks

alansiqueira27 Over a year ago

Jesus, I love web form

Iman Over a year ago

use this to serialize all form data using jquery and call ajax stackoverflow.com/a/2019614/184572

Collectives™ on Stack Overflow

ASP.net mvc Call Action on DropDown Value Change

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related