MVC下拉列表onchange传递选定的值到控制器中的函数并执行它

本文关键字：控制器 函数 执行 onchange MVC 下拉列表 | 更新日期: 2023-09-27 18:18:43

我是使用MVC3 Razor语法的新手，我有一个包含下拉列表的视图，我想当用户改变它的值时，控制器中的函数将选择值作为参数自动执行。这是我在视图中编写的代码运行时，这一行出现了编译错误:

 @Html.DropDownList("DONOR_BLOOD_GROUPE_ID", "--Select--", new {onchange="FilterdIndex(this.value)"})

"DONOR_BLOOD_GROUPE_ID"在viewBag中，这是我想要调用的控制器中的函数。

public ViewResult FilterdIndex(int id)
        {
            var donor = db.DONOR.Include(d => d.BLOOD_GROUP);
            var DONOR_BLOOD_GROUPE_ID = from BG in db.BLOOD_GROUP
                            select new
                            {
                                BG.GROUP_ID,BG.GROUP_NAME,
                                Checked=(BG.GROUP_ID==id)
                            };
            ViewBag.DONOR_BLOOD_GROUPE_ID = DONOR_BLOOD_GROUPE_ID;
            return View(donor.ToList());
        }

这是javascript代码，它正确地执行控制器函数，但我不知道为什么在返回到视图后，我在这一行有错误MSG:

 DONOR_BLOOD_GROUPE.error = function () { alert("Error in Getting States!!"); };

这是整个函数:

  <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
      $(document).ready(function () {      
          $("#DONOR_BLOOD_GROUPE_ID").change(function () {
              if ($("#DONOR_BLOOD_GROUPE_ID").val() != "Select") {
                  var DONOR_BLOOD_GROUPE = {};
                  DONOR_BLOOD_GROUPE.url = '@Url.Action("FilterdIndex", "DONOR")';
                  DONOR_BLOOD_GROUPE.type = "POST";
                  DONOR_BLOOD_GROUPE.data = JSON.stringify({ id: $("#DONOR_BLOOD_GROUPE_ID").val() });
                  DONOR_BLOOD_GROUPE.datatype = "html";
                  DONOR_BLOOD_GROUPE.contentType = "application/json"; 
                  DONOR_BLOOD_GROUPE.error = function () { alert("Error in Getting States!!"); };
                  $.ajax(DONOR_BLOOD_GROUPE);
                }
            });
        });
        </script>

，这是在"DONOR[dynamic]"文件

中导致异常的行
<select AutoPostBack="True" id="DONOR_BLOOD_GROUPE_ID" name="DONOR_BLOOD_GROUPE_ID" onchange="FilterdIndex(this.value)"><option value="">--Select--</option>

MVC下拉列表onchange传递选定的值到控制器中的函数并执行它

我假设你来自WebForms背景，这种事情发生的所有时间与'事件'，可悲的是，这不是MVC的工作方式。

要做你想做的事情，你需要为下拉菜单的onchange事件创建一个jquery方法，然后异步post到你的控制器。

看一下这个教程，它会给你指明正确的方向http://www.c-sharpcorner.com/UploadFile/4b0136/working-with-dropdownlist-in-mvc-5/

嗨，Asmaa Rashad，你可以尝试使用这种方式，你使用Ajax调用的动作方法必须是JsonResult类型。

  <script type="text/javascript">
    $(document).ready(function () {
       $("#DONOR_BLOOD_GROUPE_ID").change(function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("FilterdIndex", "DONOR")',
                dataType: 'json',
                data: { id: $("#DONOR_BLOOD_GROUPE_ID").val() },
                success: function (data) {            
                },
                error: function (ex) {
                    alert('Failed to retrieve + ex);
                }
            });
            return false;
        })
    });
    </script>

作为参考，你可以查看这个博客creat-simpl-cascade - dropdownlist-inmvc -4 using-razor

相关文章：