MVC 4 partialview not displaying as modal dialog, instead displays as own page

Question

I'm experimenting and trying to learn how to use more modal dialogs and less "view jumping". What I was trying to do is in the Home/Index is display the _join.cshtml partial view as a modal popup. Instead what I get is either

1. The browser redirecting to User/Join and displaying the popup (if I return full View from the User controller)

2. The partial view displaying as it's own page without the .js and .css support that's in the _Layout.cshtml view.

I've provided the code below and would appreciate untangling what I have so far.

Controller code

public class UserController : Controller
{
    public ActionResult Join()
    {
        return PartialView("_join");
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Join(Userprofile userprofile)
    {
        return PartialView("_join", userprofile);
    }
}

The partial view named _join.cshtml

This resides in the "join" views folder

@model DPDP.Models.Userprofile
<div id="ModalUserJoin" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="ModalUserJoinLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="ModalUserJoinLabel">Create An Account</h3>
            </div>
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    @using (Ajax.BeginForm("Join", "User", FormMethod.Post, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }))
                    {
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                        /* Form elements have been removed to save space */

                        }
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </div>
    </div>
</div>

Javascript

This is to show the modal popup when the page loads and appears to work fine.

if ($('#ModalUserJoin').length > 0) {
    $('#ModalUserJoin').modal('show');
}

Answer 1

The way you are trying to do it is incorrect.

Step to do it are ...

1. Load your Index Page
2. Make an ajax post request on an event like onload, onClick using javascript to the page User/Join
3. In ajax request you get the html string of the popup model
4. Then fire the popup show event in with the html string.

Bootstrap code to do so is this.(as i suppose you are using bootstrap)

$(document).ready(function(){
var userModel = {name: "Donald Duck",city: "Duckburg"};
$("#userButton").click(function(){
    $.post("User/Join",userModel ,
function(data, status){
    $('body').append(data);
    $('#ModalUserJoin').modal('show');
});
});
});

Maybe this helps or maybe i misunderstood your problem :)