Wie öffnet man eine bootstrap-modal-pop-up auf ajax.Aktion-link?

Ich bin erstellen einer ajax.actionlink wie unten bor meine bootstap pop-up, aber statt es zu öffnen in einem pop-up-Umleitung zu einer url zu sagen: controller/action

Mein code ist wie folgt

   @Ajax.ActionLink("CheckOut", "CheckOut", "Home", null, new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "myModal"
            }, new
            {
                @class = "btn btn-primary btn-lg",
                @id = "chkOut"
            })

  $(document).ready(function () {
        $("#chkOut").attr('data-toggle', 'modal')
    });
  • Dieser link buchen Sie Ihre aktuelle Seite, standardmäßig nach einer post-mvc geht, für Ihre Steuerung und leitet, eine Lösung sollte es sein, erstellen Sie ein jquery-click-Ereignis in dem link und verwenden e.preventDefault()
InformationsquelleAutor NoviceToDotNet | 2014-04-16
  1. 2

    Verwenden OnComplete Eigenschaft von Ajaxoptions wie diese:

     @Ajax.ActionLink("CheckOut", "CheckOut", "Home", null, new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "myModal",
                OnComplete = "ShowPopup",
            }, new
            {
                @class = "btn btn-primary btn-lg",
                @id = "chkOut"
            })

    Hier ist die Funktion, die aufgerufen wird, die auf der ajax-Aufruf der Aktion link:

    function ShowPopup()
{
    $("#chkOut").attr('data-toggle', 'modal');
}
    InformationsquelleAutor Ehsan Sajjad
  2. 1
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" 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">&times;</button>
                <h4 class="modal-title"></h4>

            </div>
            <div class="modal-body"><div class="te">Please wait...</div></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>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


{<script>
    $(document).ready(function () {         


        $("body").on("click", "a.dialog-window", null, function (e)
        {

            e.preventDefault();


            var $link = $(this); //Reference to <a/> link
            var title = $link.text();//this is title to fetch in htnl    
            $('#myModal .modal-title').html(title);

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $('#myModal').modal('show');
            }
            else
            {

                $.get(url, function (data) {
                    $('#myModal .te').html(data);
                    $('#myModal').modal();
                }).success(function () { $('input:text:visible:first').focus(); });

            }

        });
    });

</script>}


{
  @Html.ActionLink("Profile II", "Create", "PatientProfile", new { id = item.PatientId }, new { @class = "dialog-window" }) 
}
    InformationsquelleAutor Vishal Sen
Schreibe einen Kommentar