onchange event for html.dropdownlist
C#Htmlasp.netasp.net Mvchtml.dropdownlistforC# Problem Overview
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
C# Solutions
Solution 1 - C#
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 2 - C#
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 3 - C#
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 - C#
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 - C#
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)};
Solution 6 - C#
If you have a list view you can do this:
-
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"); }
-
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)" })
-
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") }