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

Question

我正在尝试为我的 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，但它只是将我重定向到一个新页面，而不仅仅是 updating/filling "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"。

我是不是漏掉了什么？

此致，克里斯

Answer 1

第一种情况将您重定向到新页面，因为您正在执行 form.submit()，但返回 false，因此操作是运行完成。如果你改变新的

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

至

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

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

但我认为您不想要那样，因为您不会得到 Ajax 表单将为您做的 div 替换。你必须自己接线。

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

中的值拦截调用

Answer 2

我通过使用 jQuery 来实现它：

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

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

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

Dropdownlist onchange event in ASP.NET MVC not using AJAX

asp.net

ajax

asp.net-mvc

onchange