onchange event for html.dropdownlist

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>

Method 2

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();"
       }
})

Method 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.

Method 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;" })

Method 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)};

Method 6

If you have a list view you can do this:

1. Define a select list:

   @{
      var Acciones = new SelectList(new[]
      {
     new SelectListItem { Text = "Modificar", Value = 
      Url.Action("Edit", "Countries")},
     new SelectListItem { Text = "Detallar", Value = 
     Url.Action("Details", "Countries") },
     new SelectListItem { Text = "Eliminar", Value = 
     Url.Action("Delete", "Countries") },
    }, "Value", "Text");
   }

2. Use the defined SelectList, creating a diferent id for each record (remember that id of each element must be unique in a view), and finally call a javascript function for onchange event (include parameters in example url and record key):

   @Html.DropDownList("ddAcciones", Acciones, "Acciones", new { id = 
   item.CountryID, @onchange = "RealizarAccion(this.value ,id)" })

3. onchange function can be something as:

   @section Scripts {
   <script src="~/Scripts/jquery-1.10.2.min.js"></script>
   <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
   
   <script type="text/javascript">
   
   function RealizarAccion(accion, country)
   {
   
       var url = accion + '/' + country;
       if (url != null && url != '') {
           window.location.href = url ;
       }
   }
   </script>
   
   @Scripts.Render("~/bundles/jqueryval")
   }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0