html.dropdownlist 的 onchange 事件

Question

我正在尝试为下拉列表的 onchange 事件触发一个操作方法，如何在不使用 jquery onchange 的情况下执行此操作。

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

谢谢

Answer 1

如果你不想要 jquery，那么你可以用 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>

Answer 2

你可以这样做

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

Answer 3

@Html.DropDownListFor(m => m.State,
              new SelectList(ViewBag.StateList, "StateId", "StateName"),
              "Select state",
              new { @class = "form-control", @onchange="FillCity()" })



function FillCity() {
    var stateId = $('#State').val();
    $.ajax({
        url: '/Employees/FillCity',
        type: "GET",
        dataType: "JSON",
        data: { State: stateId},
        success: function (cities) {                    
            $("#City").html(""); // clear before appending new list 
            $.each(cities, function (i, city) {
                $("#City").append(
                    $('<option></option>').val(city.CityId).html(city.CityName));
            });
        }
    });
  }

Answer 4

如果您将值传递给 action 方法，则可以尝试此操作。

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

在没有参数传递的情况下删除查询字符串。

Answer 5

试试这个 ：

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

Answer 6

如果你有一个列表视图，你可以这样做：

1. 定义一个选择列表：

    @{ 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. 使用定义好的SelectList，为每条记录创建一个不同的id（记住每个元素的id在视图中必须是唯一的），最后调用onchange事件的javascript函数（包括示例url和record key中的参数）：

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

3. onchange 函数可以是：

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

Answer 7

首先，您需要提供下拉 onchange 事件；

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

然后在脚本部分你必须像这样调用它。

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

Answer 8

如果您想在更改事件上调用 Javascript function，请尝试以下方法： @Html.DropDownList("ProjectId", Model.Projects, "Select Project", new Dictionary<string, object> { { "class", "select2" }, { "onchange", "onProjectSelect()" } })

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