Why Ajax.BeginForm redirect to new empty page after submission?

Question

Why Ajax.BeginForm redirect my page to new empty page after submission?

My controller code is:

    [HttpPost]
    public void ProductCommentAdd(int productId, string text)
    {
           //Do something
    }

Mvc ajax call in view is:

    @using (Ajax.BeginForm("ProductCommentAdd", "Shop", new AjaxOptions() { HttpMethod = "POST"}))
    {
                <input type="hidden" value="@Model.ProductId" name="ProductId"/>
                <textarea name="text"></textarea>
                <input type="submit" value="Submit"
    }

When I click submit button my page redirect to new empty page. How I can fix it?

Answer 1

you need to include the following script to your page:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" 
                       type="text/javascript"></script>

Answer 2

As @Mat J and @user3206982 suggests: you probably need the unobtrusive.ajax.js file.

You can download the package from nuget and add it in the bundles config:

bundles.Add(new ScriptBundle("~/bundles/jqueryunobtrusive").Include(
        "~/Scripts/jquery.unobtrusive*"));

and in the html:

@Scripts.Render("~/bundles/jqueryunobtrusive")

Source: https://dotnetthoughts.net/mvc5-ajax-form-is-not-updating-div-but-replacing-the-whole-page-instead/