CODEWITHSUNDEEP
c#htmlasp.netasp.net-mvchtml.dropdownlistfor
user3585193
user3585193

Reputation: 551

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

Upvotes: 52

Views: 267500

Answers (7)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18883

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>

Upvotes: 76

Vasundhara
Vasundhara

Reputation: 23

Try the below if you want to call Javascript function on change event: @Html.DropDownList("ProjectId", Model.Projects, "Select Project", new Dictionary<string, object> { { "class", "select2" }, { "onchange", "onProjectSelect()" } })

function onProjectSelect() {
    //write your business logic..
}

Upvotes: 0

Mahir Uslu
Mahir Uslu

Reputation: 41

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

Upvotes: 1

Minguocode
Minguocode

Reputation: 11

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

Upvotes: 1

Moons
Moons

Reputation: 3854

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

Upvotes: 41

user2107431
user2107431

Reputation: 1

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

Upvotes: 0

The Godfather
The Godfather

Reputation: 929

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.

Upvotes: 7

Related Questions