Show razor page as modal popup

Question

I'm trying to render a razor page as the content of a modal dialog:

This is the razor page

<div class="container">
    <div class="title modal " tabindex="-1" id="loginModal"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>@IdentityResources.ResendEmailConfirmation</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <form  method="post">
                        <div class="form-group">
                            <input class="form-control" type="text" placeholder="Email" id="inputUserName" />
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary col-md-2">@IdentityResources.Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#loginModal").modal('show');
    });

    $("#btnHideModal").click(function () {
        $("#loginModal").modal('hide');
    });
</script>

And later in another razor page I create a link to the page:

<a asp-page="/Identity/_ResendConfirmationEmail">@IdentityResources.ResendEmailConfirmation</a>

Once it's clicked the razor page is displayed, but since it's action link, it's redirecting directly to the page, instead of rendering it over the current page.

How can I change this behavior?

Answer 1

You need to call your action , using ajax . so in the response you will get html of your view. but you need to return PartialView() , because if you return your view as View() then youy view will come with layout, so your page will display layout contents twice in a page.

 // your controller

 public ActionResult _ResendConfirmationEmail()
 {
    return PartialView();
 }

Now call it using ajax as below.

  $.ajax({
        url: '@Url.Action("_ResendConfirmationEmail","Identity")',
        success: function (data) {
            $('#yourdivid').html(data);
        },
        error : function (error)
        { 
          // handle error code
        }

    });