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
– szpic, Commented Mar 13, 2014 at 12:58

Community · Accepted Answer · 2017-05-23 10:27:19Z

1

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.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Mar 13, 2014 at 12:09

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

darkchico · Accepted Answer · 2014-03-13 12:52:01Z

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, 2014 at 12:52

darkchico

6477 silver badges7 bronze badges

Collectives™ on Stack Overflow

MVC update partial view onchange drop down list

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related