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?

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?

• javascript
• c#
• asp-mvc
• asp-core
• razor

• you need to use ajax for get the html of your razor view and append it in your page's html. – Vishal modi Commented Nov 15, 2019 at 12:17
• @Vishalmodi I'm not quite sure how to do that, would you write an answer and elaborate? – Deadzone Commented Nov 15, 2019 at 12:18

1 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 e 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
        }

    });