onchange event for html.dropdownlist

Question

I am trying to trigger an action method for onchange event for dropdownlist, how can I do this without using jquery onchange.

@Html.DropDownList("Sortby", 
                   new SelectListItem[] 
                   { 
                       new SelectListItem() { Text = "Newest to Oldest", Value = "0" }, 
                       new SelectListItem() { Text = "Oldest to Newest", Value = "1" }})

Thanks

Solution 1

You can do this

@Html.DropDownList("Sortby", new SelectListItem[] { new SelectListItem() 
  { 

       Text = "Newest to Oldest", Value = "0" }, new SelectListItem() { Text = "Oldest to Newest", Value = "1" } , new
       {
           onchange = @"form.submit();"
       }
})

Solution 2

If you don't want jquery then you can do it with javascript :-

@Html.DropDownList("Sortby", new SelectListItem[] 
{ 
     new SelectListItem() { Text = "Newest to Oldest", Value = "0" }, 
     new SelectListItem() { Text = "Oldest to Newest", Value = "1" }},
     new { @onchange="callChangefunc(this.value)" 
});

<script>
    function callChangefunc(val){
        window.location.href = "/Controller/ActionMethod?value=" + val;
    }
</script>

Solution 3

You can try this if you are passing a value to the action method.

@Html.DropDownList("Sortby", new SelectListItem[] { new SelectListItem() { Text = "Newest to Oldest", Value = "0" }, new SelectListItem() { Text = "Oldest to Newest", Value = "1" }},new { onchange = "document.location.href = '/ControllerName/ActionName?id=' + this.options[this.selectedIndex].value;" })

Remove the query string in case of no parameter passing.

Solution 4

try this :

@Html.DropDownList("Sortby", new SelectListItem[] { new SelectListItem() 
{ Text = "Newest to Oldest", Value = "0" }, new SelectListItem() 
{ Text = "Oldest to Newest", Value = "1" }},
new { onchange = "document.location.href = '/ControllerName/ActionName?id=' + this.options[this.selectedIndex].value;" })

Solution 5

first you need to give your dropdown onchange event;

@Html.DropDownList("ddl_reportId", new SelectList(ViewBag.ddl_reportName, "ddl_reportId", "ddl_reportName"), "Raporu seçin", new { @class = "form-control", @onchange = "getVal()" })

then in script section you have to call it like this.

function getVal() {
    var selectedVal = document.getElementById("ddl_reportId").value;
    console.log(selectedVal)};

View more solutions

Comments

[Moons]

You want to call a Controller on change??

[user3585193]

i want to call something like /Controller/Actionmethod?value=valueofthedropdownlist, would this work ??

[Nabid]

What is Sortby in your helper? Is it a label or something else?

[Burak Karakuş]

I'm trying to get the text of that option, but when I write this.text, it doesn't seem to work. How can I get the text?

[Kartikeya Khosla]

@BurakKarakuş...for getting selected text...code will somewhat different...see the fiddle

[Nabid]

is this.options[this.selectedIndex].value default? How the selected option value is being assigned into this.options[this.selectedIndex].value?

[The Godfather]

@Nabid I'm quite not sure what you meant by default..it is plain javascript. 'this' points to the current html element; in the above case its <select> control. and 'options' wil giv u d array of available values within d dropdownlist and selectedIndex is the JS property which returns the index of the selected value in dropdown.. every time you change the selected value in the drop down, browser changes the selectedIndex too.. check these links.. w3schools.com/jsref/prop_option_index.asp w3schools.com/jsref/prop_select_selectedindex.asp

[Nabid]

And what is Sortby? Is it the viewbag variable name or something else?

[Ghotekar Rahul]

how to used @Html.DropDownListFor

[mishsx]

Please include code formatting for the @HTML.... section