ASP.NET MVC 中的下拉列表 onchange 事件不使用 AJAX答案

【问题标题】：Dropdownlist onchange event in ASP.NET MVC not using AJAXASP.NET MVC 中的下拉列表 onchange 事件不使用 AJAX
【发布时间】：2016-09-14 23:54:19
【问题描述】：

我正在尝试为我的 ASP.NET MVC 项目中的下拉列表使用 onChange 事件，尽管它不起作用。

包含表单的视图如下所示：

@using (Ajax.BeginForm("Action", "Controller",
 new AjaxOptions
 {
     HttpMethod = "POST",
     UpdateTargetId = "pages",
     InsertionMode = InsertionMode.Replace
 }))
        {
            @Html.DropDownListFor(m => m.SelectedFrom, Model.ChangeFrom, new { onChange = "this.form.submit();" })                
        }

       <div id="pages"></div>

使用上面的代码，当按预期选择下拉列表中的项目时会触发 onChange。虽然它没有使用 ajax，但它只是将我重定向到一个新页面，而不是仅仅更新/填充“pages-Div”。

虽然……

如果我删除下拉列表的 onChange 事件并添加一个简单的提交按钮，如下所示：

 @using (Ajax.BeginForm("SelectedUser", "ReplaceName",
 new AjaxOptions
 {
     HttpMethod = "POST",
     UpdateTargetId = "pages",
     InsertionMode = InsertionMode.Replace
 }))
        {
            @Html.DropDownListFor(m => m.SelectedFrom, Model.ChangeFrom)
            <input type="submit" value="GO" />
        }

它使用 Ajax 并且只重新加载“pages-Div”。

我错过了什么吗？

问候，克里斯

【问题讨论】：

标签： asp.net ajax asp.net-mvc onchange

【解决方案1】：

第一个场景将您重定向到新页面，因为您正在执行 form.submit()，但返回 false，因此操作正在运行完成。如果你换新的

{ onChange = "this.form.submit();" }

到

{ onChange = "this.form.submit(); return false;" }

您可能需要编写一个小的 javascript 函数来进行这两个调用。

但我认为您不希望这样做，因为您不会获得 Ajax 表单将为您完成的 div 替换。你必须自己把它连接起来。

第二个保留在页面上，因为 Ajax.BeginForm 就是这样工作的。它知道该输入与您正在提交的 Ajax 表单相关联，并使用 AjaxOptions 中的值拦截调用。

【讨论】：

不完全确定我明白你的意思。我认为 this.form.submit() 函数与后面触发的函数相同。由于我希望下拉列表在更改时触发控制器中的方法，我该如何为 ajax 执行此操作？
您是要提交表单还是只是在控制器上调用一些随机操作？
好吧，我想提交表单，因为我希望将下拉列表中的值传递给控制器方法。但我希望该方法的结果以局部视图的形式返回，使用 ajax 并且只更新相关的 div 元素。
因为您正在更改服务器端的任何内容。我实际上会在这里使用 GET 并使用 $(#pages-div).load()。所以像 $('#SelectedFrom').change(function() { $(#pages-div).load('') });

【解决方案2】：

我通过使用 jQuery 来实现它：

onchange = "$(this.form).submit();"

Is there a better jQuery solution to this.form.submit();?

【讨论】：