I have a problem with calling a PartialView from a View when clicking a button. When I click the button the full View is rendered instead of the PartialView I need.

This is my code:

Parent View - ReferralPage.cshtml:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "StandardPageBase.cshtml";
}

<div id="referralForm" class="container">
    <div>
        @{Html.RenderAction("RenderReferralForm", "ReferralSurface");}
    </div>
</div>


<script type="text/javascript">
    document.getElementById("joinPrgrm").onclick = function () { myFunction() };
    function myFunction() {
        $("#referralFormPartial").load('@Url.Action("GetReferralCodeAndForm", "ReferralSurfaceController")');
    }
</script>

This will call either of these two PartialViews, depending on if the user is part of the program or not

_JoinReferralProgram.cshtml

@inherits UmbracoViewPage<PropelHome.PropelModels.ReferralModel>

<div id="referralFormPartial">
    <hr />
    <h3>Join Referral Program</h3>
    <p>You are not a member of the referral program yet. Would you like to join?</p>
    <button id="joinPrgrm">Join Program</button>
    <hr />
</div>

_ReferralForm.cshtml

@inherits UmbracoViewPage<PropelHome.PropelModels.ReferralModel>
@using Umbraco.Web


<div id="formToSend">
    <div>
        <p>Congratulations! You are now registered for the referral program.</p>
        <p>Your Referral Code: @ViewBag.ReferralCodes.ReferralCode</p>
    </div>
    <hr />
    <div>
        <h3>Send Invitations</h3>
        <p>Please enter the emails of one or more people you wish to invite to register.</p>
    </div>



    @using (Ajax.BeginForm("SubmitReferralForm", "ReferralSurface", null, new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "formToSend"
    }))

    {
        @Html.AntiForgeryToken()
        <fieldset>
            <div class="form-group">
                @Html.LabelFor(m => m.Email1)
                @Html.TextBoxFor(m => m.Email1)
                @Html.ValidationMessageFor(m => m.Email1)
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Email2)
                @Html.TextBoxFor(m => m.Email2)
                @Html.ValidationMessageFor(m => m.Email2)
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Email3)
                @Html.TextBoxFor(m => m.Email3)
                @Html.ValidationMessageFor(m => m.Email3)
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Email4)
                @Html.TextBoxFor(m => m.Email4)
                @Html.ValidationMessageFor(m => m.Email4)
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Email5)
                @Html.TextBoxFor(m => m.Email5)
                @Html.ValidationMessageFor(m => m.Email5)
            </div>
        </fieldset><br /><br />
        <fieldset>
            <button type="submit" class="btn btn-success btn-lg margin-right use-ajax">Send Invitations</button>
        </fieldset><br /><br />
    }
</div>

This is my controller: ReferralSurfaceController.cs

using System.Web.Mvc;
using Umbraco.Web.Mvc;
using PropelHome.PropelModels;
using System;
using PropelHome.PropelData;

namespace PropelHome.PropelControllers
{
    public class ReferralSurfaceController : SurfaceController
    {
        public const string PARTIAL_VIEW_FOLDER = "~/Views/Partials/Referral/";
        /// <summary>
        /// Renders the Referral Form:
        /// @using (Html.BeginUmbracoForm<ReferralSurfaceController>("Index"))
        /// </summary>
        // GET: ReferenceSurface

        public ActionResult RenderReferralForm()
        {
            if (ViewBag.ReferralCodes != null)
            {
                return PartialView(PARTIAL_VIEW_FOLDER + "_ReferralForm.cshtml");
            }

            return PartialView(PARTIAL_VIEW_FOLDER + "_JoinReferralProgram.cshtml");
        }

        public ActionResult GetReferralCodeAndForm()
        {
            SetupReferralCodes();
            return PartialView(PARTIAL_VIEW_FOLDER + "_ReferralForm.cshtml");
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult SubmitReferralForm(ReferralModel model)
        {
            if (ModelState.IsValid)
            {
                AddReferralEmailAddress(model);
                TempData["ReferralSuccess"] = true;
                return PartialView(PARTIAL_VIEW_FOLDER + "_ReferralFormSuccess.cshtml");
            }
            return PartialView(PARTIAL_VIEW_FOLDER + "_ReferralFormError.cshtml");
        }

        private void AddReferralEmailAddress(ReferralModel model)
        {
            try
            {
                //Generate an email list object to send
                string referral_code = model.ReferralCode;
                string email_1 = model.Email1;
                string email_2 = model.Email2;
                string email_3 = model.Email3;
                string email_4 = model.Email4;
                string email_5 = model.Email5;

                TempData["Message"] = "Your invitation has been sent successfully!";

                //SetupReferralCodes();
            }
            catch (Exception)
            {
                //Throw an exception if there is a problem sending the invites
                //Console.WriteLine("Error sending invitations. Please contact the administrator. ");
                TempData["Message"] = "An error ocurred while sending the invitations. Please contact the administrator.";
            }
        }

        private void SetupReferralCodes()
        {
            ViewBag.ReferralCodes = new SelectList(Data.Referrals, "ReferralId", "ReferralCode");
        }
    }
}

Please help! I have tried several things to no avail.

I think the problem is with this line:

<button id="joinPrgrm">Join Program</button>

Or with this code:

$("#referralFormPartial").load('@Url.Action("GetReferralCodeAndForm", "ReferralSurfaceController")');

Or both! I don't know.

Thank you!

-Lando Bee