Calling a Modal via Html.Actionlink

Question

I have a screen that makes the user password exchange. This screen shows the user name and when clicking on the name, it is directed to the screen to exchange password.

As I would make this call with a modal, I already have the scripts, but I can’t use it with Html.Actionlink

@using Microsoft.AspNet.Identity

@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
        @Html.AntiForgeryToken()
        @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "ChangePassword", "Manage" ))
    }
}

<script type="text/javascript">

        $(function () {
            $.ajaxSetup({ cache: false });   
            $("a[data-modal]").on("click", function (e) {
                $('#myModalContent1').load(this.href, function () {
                    $('#myModalLogin').modal({
                        /*backdrop: 'static',*/
                        keyboard: true
                    }, 'show');
                    bindForm(this);
                });
                return false;
            });
        });

        function bindForm(dialog) {
            $('form', dialog).submit(function () {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        if (result.success) {
                            $('#myModalLogin').modal('hide');
                            $('#replacetarget').load(result.url); // Carrega o resultado HTML para a div demarcada
                        } else {
                            $('#myModalContent1').html(result);
                            bindForm(dialog);
                        }
                    }
                });
                return false;
            });
        }
    </script>

<div id="myModalLogin" class="modal fade in">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="myModalContent1"></div>
        </div>
    </div>
</div>

Answer 1

I recommend calling an Action in your controller through a . js method where it will return to your View() with your model:

public ActionResult RetornarModal()
{
  return PartialView("_Partial", model);
}

And in the success of the request you continue to do the same, feeding the .html() with the result of the request.

Set the event of onClick() of the link to your new method making the request.