PartialView inside modal Popup

Question

I am trying to open PartialView inside jquery modal Popup on a link click event in my MVC, Umbraco project. The partial view loads fine however submitting the button inside modal popup calls the ActionMethod correctly but then instead of opening the modal popup in the same parent window it launches it in a new window. No sure what i am doing wrong here. Below is my code:

Partial View

  @inherits Umbraco.Web.Mvc.UmbracoViewPage<Source.Models.SchoolFindYouModel>
<script>
    $(function () {
        $("#dialog-modal-school").dialog({
            autoOpen: false,
            width: 650,
            height: 500,
            show: {
                effect: "drop",
                duration: 1000
            },
            hide: {
                effect: "drop",
                duration: 1000
            }
        });

        $("#modal-opener-school").click(function () {
            $("#dialog-modal-school").dialog("open");
        });


    });
</script>

<a href="#" id="modal-opener-school">Let Schools find you</a>

<div id="dialog-modal-school" title="Let Schools find you">

    <p>Upload your CV/Resume for free.</p>

        @using (Html.BeginForm("SchoolFindsYou", "School", FormMethod.Post,  new { enctype = "multipart/form-data" }))

        {
        <div class="editor-label">
            @Html.LabelFor(m => m.email, "Email address")

        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.email)
            @Html.ValidationMessageFor(model => model.email)
        </div>
        <div class="editor-label">
            @Html.LabelFor(m => m.password, "Password")
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.password)
            @Html.ValidationMessageFor(model => model.password)
        </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.search, "Search keyword")
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.search)
                @Html.ValidationMessageFor(model => model.search)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.location, "Location")
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.location)
                @Html.ValidationMessageFor(model => model.location)
            </div>

            <input type="file" name="attachment" id="attachment" />
            @Html.ValidationMessageFor(model => model.attachment)

            <br />
            <input type="submit" name="btnSchoolFindYou" value="Upload CV/Resume" id="btnSchool"/>
            <br />
            <br />
            <p>By clicking activate jobs you confirm that you agree to our <a href="/independent/TandC.aspx">terms and conditions</a> and <a href="/independent/Privacy.aspx">privacy policy</a></p>

    }
</div>
@if (!ViewData.ModelState.IsValid)
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#modal-opener-school").click();
        });

    </script>
}

PartialView Cotroller

   public class SchoolController : Umbraco.Web.Mvc.SurfaceController
    {
        [HttpGet]
        public ActionResult SchoolFindsYou()
        {
            SchoolFindYouModel s = new SchoolFindYouModel();
            return PartialView("_PartialSchoolFindYou", s);
        }

        [HttpPost]
        public ActionResult SchoolFindsYou(SchoolFindYouModel SchoolFindYou)
        {
            SchoolFindYouModel s = new SchoolFindYouModel();
            if (ModelState.IsValid)
            {
                if (Request.Files.Count > 0)
                {
                    var file = Request.Files[0];
                    if (file != null && file.ContentLength > 0)
                    {
                        var fileName = Path.GetFileName(file.FileName);
                        var path = Path.Combine(Server.MapPath("~/media/cv/"), fileName);
                        file.SaveAs(path);
                    }
                }
                return PartialView("_PartialSchoolFindYou", s);
            }
            else
            {
                return PartialView("_PartialSchoolFindYou", s);
            }
        }
    }

After Postback it opens the partialView in ( instead of my parentView inside modal popup )

http://localhost:49721/umbraco/Surface/School/SchoolFindsYou

Answer 1

It's because you're making an http post and redirecting the request to the partial view. You need to return the parent View that contains this partial view instead and your partial view will be rendered inside that parent view.

So instead of return PartialView("_PartialSchoolFindYou", s); in your controller, you should return View(s);, and inside of that view somewhere you should have

@Html.Partial("_PartialSchoolFindYou", s);