Have been trying to get a member profile management area working with ajax as each section of the page is hidden within a show hide div.

I have used ajax before in MVC applications but have never used it with umbraco surface controllers before. I'm unsure why returning a partial view in the controller is outputting the whole page and not just the partial view that I am giving to it.

Controller:

        [HttpPost]
        [ActionName("MvcMemberEditProfileDetails")]
        public ActionResult MvcMemberEditProfileDetails(MvcMemberEditProfileDetailsModel model)
        {

            var memberService = Services.MemberService;
            var currentUser = Membership.GetUser();
            var member = memberService.GetByEmail(currentUser.Email);

            bool result = false;

            if (ModelState.IsValid)
            {

                ...

            }

            if (result)
            {
                ...
            }


            return PartialView("MvcMemberEditProfileDetails", model);

        }

View:

@model Umbraco714.Models.MvcMemberEditProfileDetailsModel


@using (Ajax.BeginForm("MvcMemberEditProfileDetails", "MvcMember", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "MvcMemberEditProfileDetails", InsertionMode = InsertionMode.Replace }))
{

    if (Model.Result != null)
    {

        if (Model.Result == true)
        {

            <div id="result" class="alert alert-success">
                @Html.Raw(Model.ResultMessage)
            </div>

        }
        else
        {

            <div id="result" class="alert alert-danger">
                @Html.Raw(Model.ResultMessage)
            </div>

        }

    }

    <div class="form-default">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(m => m.FirstName)
                    @Html.TextBoxFor(m => m.FirstName)
                    @Html.ValidationMessageFor(m => m.FirstName)
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(m => m.LastName)
                    @Html.TextBoxFor(m => m.LastName)
                    @Html.ValidationMessageFor(m => m.LastName)
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(m => m.CompanyName)
                    @Html.TextBoxFor(m => m.CompanyName)
                    @Html.ValidationMessageFor(m => m.CompanyName)
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(m => m.CompanyPosition)
                    @Html.TextBoxFor(m => m.CompanyPosition)
                    @Html.ValidationMessageFor(m => m.CompanyPosition)
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    @Html.LabelFor(m => m.CompanyBio)
                    <span class="bs-tooltip" data-toggle="tooltip" data-placement="top" title="Max 1000 characters long"><i class="fa fa-info-circle" aria-hidden="true"></i></span>

                    @Html.TextAreaFor(m => m.CompanyBio, new { @rows = "4", @maxlength = "1000" })
                    @Html.ValidationMessageFor(m => m.CompanyBio)
                </div>

                @TempData["Status"]
                <div class="form-group nomargin">

                    <div class="text-right">

                        <button class="button" type="submit"><i class="fa fa-floppy-o" aria-hidden="true"></i> Update</button>

                    </div>

                </div>
            </div>

        </div>
    </div>

}

I have everything that needs to be included (as far as I'm aware) well before the form and there are no console errors.

    <script src="/scripts/jquery.js"></script>
    <script src="/scripts/bootstrap.min.js"></script>
    <script src="/scripts/jquery-val.js"></script>

    <script src="/scripts/jquery.unobtrusive-ajax.min.js"></script>

I have also made sure that UnobtrusiveJavaScriptEnabled is set to true in the web.config but I'm still getting a full page rendered when I post the form.

Initially:

After:

Feeling pretty dumbfounded that I've spent more that a couple of hours looking into this even though it's clearly working in a sort of way.

Is it possible / a known thing for this to happen? I searched around but couldn't find any topics with a similar issue, unless I was just wording things wrong.

Just looking for a nudge in the right direction if anybody has any ideas?