Asp.Net MVC partial view form post replaces entire page

Question

I am using Asp.Net MVC and I have got a problem with a form. I have got a partial view inside a view which has go a form inside.

It looks like this:

Inside Main.cshtml

<div id="Artikel" hidden>
    @Html.Action("_Artikel", Model);
</div>

This renders the partial view.

Controller of the partial view

public ActionResult _Artikel()
{
    return PartialView()
}

All of that works fine but when I fire my Ajax.BeginForm(...) it replaces the whole view but not just the Arikel Div.

Inside the partial view

@using (Ajax.BeginForm("_Artikel", "Home", new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Artikel" }))
{
    ...
}

I read many articles that there is aproblem with jQuery.Unobtrusive.Ajax not supported in the latest versions of jQuery.

But I really can't figure out why it always takes up the entire page. Can someone help me? If you need more code ask for it.

Answer 1

Make sure you enable the Unobtrusive JavaScript

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

in the appSettings of your web.config file.