Open View in a Bootstrap modal asp.net mvc?

Question

<div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-url='@Url.Action("Register","Account")'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="H1">Sign Up</h4>
            </div>
            <div class="modal-body" id="modalsignupbody">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>



<button type="submit" id="SignUpbtn" class="btn btn-warning">Sign Up</button>

CONTROLLER:

 [AllowAnonymous]
    public ActionResult Register()
    {
        return PartialView("Register");
    }

JQUERY:

  $('#SignUpbtn').click(function () {
            var url = $('#signup').data('url');

            $.get(url, function (data) {
                $('#modalsignupbody').html(data);

                $('#signup').modal('show');
            });
        });

Please could someone help me with this?

ERROR: The Modal isn't opening the page just refreshes

PARTIAL VIEW CODE:

  @model BrightFolio.Models.RegisterModel
@{
    ViewBag.Title = "Register";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>Create a new account.</h2>
</hgroup>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                @Html.PasswordFor(m => m.ConfirmPassword)
            </li>
        </ol>
        <input type="submit" value="Register" />
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

In your view use below

<div id='signup' class='modal hide fade in' data-url='@Url.Action("Register","Account")'>
   <div id='modal-content'>

   </div>
</div>

    <button type="submit" id="SignUpbtn" class="btn btn-warning">Sign Up</button>

In your script use below

$(document).ready(function() {
   $('#SignUpbtn').click(function() {
        var url = $('#signup').data('url');

        $.get(url, function(data) {
            $('#modal-content').html(data);

            $('#modal-content').modal('show');
        });
   });
});