MVC更新下拉列表的部分视图变化

Question

当用户更改下拉列表的当前值时，我希望更新一个部分视图。

使用我的onchange提交后，部分视图并没有加载到div中，而是替换了整个页面。如何解决？

视图：

@using (Ajax.BeginForm("GetEnvironment", new RouteValueDictionary { { "Environment", Model.Environnements } }, new AjaxOptions() { UpdateTargetId = "ExportDiv" }))
{
    @Html.DropDownListForEnum(x => x.Environnements, new { onchange = "this.form.submit();" })
}

    <div id="ExportDiv">
        @Html.Partial("Export")
    </div>

控制器：

    public PartialViewResult GetEnvironment(ExampleDto model)
    {
        return PartialView("Export", model);
    }

Export.cshtml

- user3391714

---

你确定你的解决方案中有 jquery.unobtrusive-ajax.js 文件吗？对我来说，如果没有这个文件，ajax.Beginform 就会像普通表单一样运作。 - szpic

Answer 1

看起来 在表单上触发提交会导致整个页面被发布，而不是 AJAX 行为。尝试这样做：

@using (Ajax.BeginForm("GetEnvironment", new RouteValueDictionary { { "Environment", Model.Environnements } }, new AjaxOptions() { UpdateTargetId = "ExportDiv" },new {id = "ajaxForm"))
{
    @Html.DropDownListForEnum(x => x.Environnements, new { onchange = "submitAjaxForm()" })
}

<div id="ExportDiv">
    @Html.Partial("Export")
</div>

<script type="text/javascript">
    $('form#ajaxForm').submit(function(event) { 
        eval($(this).attr('onsubmit')); return false; 
    });

    window.submitAjaxForm = function(){
        $('form#ajaxForm').submit();
    }
</script>

如果您在使用脚本，需要将它们包含在自己的区域中。

- Ufuk Hacıoğulları

Answer 2

结果应该与Ufuk建议的相同，但是您是否尝试在this.form.submit();之后简单地添加return false;？

- darkchico