MVC update partial view onchange drop down list

Question

I want to update a partial view when user changes the current value of my drop down list.

With my onchange submit, the partial view does not load in div but replaces the whole page. How can I fix it?

view:

@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>

Controller :

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

Export.cshtml

Are you sure you have `jquery.unobtrusive-ajax.js` in your solution? For me without this file `ajax.Beginform` was behaving like normal forms. — szpic, Mar 13 '14 at 12:58

score 1 · Answer 1 · edited May 23 '17 at 10:27

It looks like triggering submit on the form causes whole page to be posted instead of AJAX behavior. Try this:

@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>

You need to include the scripts in thier own section if you are using it.

score 0 · Answer 2 · answered Mar 13 '14 at 12:52

0

The result should be the same than what Ufuk suggested, but did you try simply adding return false; after this.form.submit(); ?

answered Mar 13 '14 at 12:52

darkchico

647
7
7

MVC update partial view onchange drop down list

2 Answers2