Call an action from a Html.Dropdown onchange event in ASP.Net MVC 5

Question

I'm trying to call the action in the controller when the dropdown selected item changes. Here is the code I am using but it is not working.

 @Html.DropDownList("UserID", null, new { @onchange = "location.href='@Url.Action("Action", "Controller")'" })

What is the correct syntax? I tried to call a javascript function and it works.

@Html.DropDownList("UserID", null, new { @onchange = "leaveChange(this);" })

leaveChange(control) is my javascript function.

However, I am unable to invoke the action of the controller. Also, How do I then pass the value of the selected item to the action?

Are you trying to navigate to that action on the change event ? Why not use a link for that instead of the SELECT element change ? — Shyju
– Shyju, Commented Jun 19, 2018 at 20:21
@Shyju that is what I ended up doing. The change event of jquery redirects to that action. However I am wondering if there is a more direct way of doing it. — Procrastinating Programmer
– Procrastinating Programmer, Commented Jun 19, 2018 at 20:45
But for navigating to another page, a link is more appropriate ? Why do you want to bring a SELECT element in that ? — Shyju
– Shyju, Commented Jun 19, 2018 at 20:47

Shyju · Accepted Answer · 2018-06-19 20:56:12Z

4

You cannot call a C# method inside the htmlAttributes object where it expects a key value pair. Instead you could execute the Url.Action method and set the result(the url) on a parent element's data attribute and read from that in your javascript code

<div data-submit-url="@Url.Action("ApplyVacation","Jobs")">
    @Html.DropDownList("UserID",)
</div>

and in the change event, read it

$(document).ready(function ()
{
    $("#UserID").change(function ()
    {
        var $this = $(this);
        var url = $this.parent().data("submit-url") + "?userId=" + $this.val();
        window.location.href = url;
    });

});

When user make a selection on the SELECT, this code will navigate to the /Jobs/ApplyVacation url with querystring key userId and the selected option value as the value of that. Update the names as needed based on your code.

answered Jun 19, 2018 at 20:56

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

Comments

Pallavi · Accepted Answer · 2018-06-22 10:09:20Z

1

Try removing @ before onchange

 @Html.DropDownList("UserID", null, new { onchange = "location.href='@Url.Action("Action", "Controller")'" })

answered Jun 22, 2018 at 10:09

Pallavi

363 bronze badges

Comments

Procrastinating Programmer · Accepted Answer · 2018-06-19 21:24:38Z

0

Here is what I did

 @Html.DropDownList("UserID", null,new {@id = "leve" })

Jquery code as below:

<script type="text/javascript">

                $('#leve').change(function () {
                    var url = "/UserRoles/TellMeDate";
                    var name = $('#leve').val();
                    $.get(url, { parameter: name }, function (data) {
                        alert(data);
                    });


                })

            });         




        </script>

Controller:

public string TellMeDate(string parameter)
    {


            return DateTime.Today.ToString() +"-->>>"+ parameter + "!!!!";


    }

answered Jun 19, 2018 at 21:24

Procrastinating Programmer

3141 gold badge5 silver badges22 bronze badges

Comments

Ehsan Mohammadi · Accepted Answer · 2018-10-13 21:41:33Z

0

This code worked for me:

onchange = "location.href='" + @Url.Action("AdmissionRequirement", "Profile") + "'"

edited Oct 13, 2018 at 21:41

Ehsan Mohammadi

1,3261 gold badge17 silver badges22 bronze badges

answered Oct 13, 2018 at 16:40

Aitezaz Bilal

131 gold badge2 silver badges5 bronze badges

Comments

Hien Nguyen · Accepted Answer · 2020-04-28 07:14:06Z

0

If you want to pass parameters to action you can use

@Html.DropDownList("UserID", null, new { onchange = "location.href='@Url.Action("Action", "Controller", 

    new {name = "Test param", category = "Test1"})'" })

answered Apr 28, 2020 at 7:14

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

Call an action from a Html.Dropdown onchange event in ASP.Net MVC 5

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related