Submitting an Ajax.BeginForm replaces the target div with the whole page

Question

I have a partial view with a form for getting data for insert/update a database record. The page with this partial view is displayed with non problem. Filling-in the data and posting the form works okay (the record is saved correctly into the database). The problem is that although I return a partial view (return PartialView();) the system replaces the target div with the whole page (and not only with the partial view)!!

From the above symptoms, you can understand that:

The responding controller is the correct one (the record is saved in the DB).
The necessary js scripts are not missing (indeed ajax replaces a portion of the page)

Please note that the Partial View starts with Layout = "" (so it doesn't reference any layout). I have tested also with Layout = null, with the same results.

Other details:

Visual Studio Community 2015
The container page is implemented through Umbraco CMS.

Partial View:

@using FLATS;

@model TMSCounterpartyModel
@{
    Layout = "";

    TMSCounterpartyModel myModel = (TMSCounterpartyModel)Model;

    Html.EnableClientValidation(true);
    Html.EnableUnobtrusiveJavaScript(true);

    AjaxOptions ajaxOpt = new AjaxOptions {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "frmEditCounterparty"
    };
}

@using(Ajax.BeginForm("HandlePost", "EditTMSCounterparty", null, ajaxOpt, new { @id="editCptyForm" }))
{

    @Html.AntiForgeryToken()

    <div class="row">

        <fieldset>
            @Html.HiddenFor(model => model.Id)

...

                <div class="row margin-top-20">
                    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-8 col-md-offset-2">
                        <input id="btnSubmit" type="submit" value="Save" class="form-control" />
                    </div>
                </div>

        </fieldset>

    </div>
}

Controller:

public class EditTMSCounterpartyController : System.Web.Mvc.Controller
{
    [HttpPost]
    [ValidateAntiForgeryToken()]
    public PartialViewResult HandlePost(TMSCounterpartyModel model)
    {
        string viewPath = Library.PartialViewFullPath("EditCounterparty.cshtml");

        if (ModelState.IsValid == false)
        {
            return PartialView(viewPath, model);
        }

        if (model.Save() == true)
        {
            TMSCounterpartyModel newModel = new TMSCounterpartyModel();
            newModel.LoadOrDefault(model.Id);

            return PartialView(viewPath, newModel); 
        }
        else
        {
            return PartialView(viewPath, model);
        }
    }
}

Any help is appreciated.

Thank you in advance.

Are there any script errors in the debug console? Have you loaded the [necessary Ajax Unobtrusive scripts](https://stackoverflow.com/questions/23895918/mvc5-ajaxhelper-and-the-correct-scripts-load-order/23897170#23897170)? — Jasen, Jul 17 '17 at 19:03
Hi Jasen and thanks for spending time for this question. There are no js errors in debug console and as I mention, all the js scripts are loaded (jquery, jquery.validate, jquery.validate.unobtrusive, jquery.unobtrusive-ajax). — Panos, Jul 17 '17 at 19:41
Typically, when you get full page loads on AJAX requests, the default browser action (link click, form submission) is not intercepted. Often, it's because there are script errors or the necessary scripts are missing. Since, this isn't the case I would possibly try this in a new basic MVC site (to remove Umbraco from the equation) or use jQuery.ajax directly. — Jasen, Jul 17 '17 at 19:59
I had the same problem , it turns out that my Controller returns View instead of PartialView — Piotr Grudzień, Mar 19 '19 at 14:43

score 0 · Answer 1 · answered Jul 18 '17 at 17:02

Finally it seems that the problem was related with Map Routes. I added RouteTable.Routes.MapRoute("EditCpty", "EditTMSCounterparty/{action}", new { controller = "EditTMSCounterparty", action= "OpenForm" }); and the problem was resolved.

Although, still I do not understand why MVC was finding the controller but it was messing with the returned PartialViewResult. Anyway.

Thank you all for your efforts.

Submitting an Ajax.BeginForm replaces the target div with the whole page

1 Answers1