Wie man Teilansicht im inneren Bootstrap-Modal?

Ich möchte eine Teilansicht im Bootstrap Modal,

Dies ist der JQuery code, den ich verwende:

function CreateEmployeeModal()
{
    var url = $("#btnCreateEmployeeModal").data("mine");    
    $.ajax({
        type: 'get',
        url: url
    }).success(function (result) {            
        $(".modal-body").html(result)
        $("#MyModal").modal('show')
    }).error(function () {
        alert("didn't work");
    })
}

- Und dies ist der Modal-code innerhalb der _Layout Datei:

<div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body" id="divModalBody">
                            <p>Some text in the modal.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Ich schiesse den modal mit diesem button aus der Index Seite, die ich angelegt habe, die Daten-mine Attribut zum speichern der url zur Action-Methode, die Rücksendung der PartialView:

 <input type="button" class="aslink modal-link" data-toggle="modal" 
                   data-target="#myModal" id="btnCreateEmployeeModal" value="Open Modal" data-mine="@Url.Action("CreateUsingModal")">

Dies ist die controller-action-Methode habe ich die Rückkehr der Teilansicht:

   public PartialViewResult CreateUsingModal()
        {
            return PartialView();
        }

Den Betrieb ist mit Erfolg in ajax, aber das modal nicht zeigen...

InformationsquelleAutor AlexGH | 2016-09-22

  1. 0

    Nehme ich an, dass Ihr Endpunkt (Methode) kehrt zurück, raw-HTML.
    Ein besserer Weg, dies zu tun wäre für die Methode, um wieder Ihre Daten im JSON-format und verwenden Sie dann die Daten, füllen Sie das modal-Fenster:

    function CreateEmployeeModal()
{
    var url = $("#btnCreateEmployeeModal").data("mine");    
    $.ajax({
       type: 'get',
       url: url
    }).success(function (result) {
        console.log(result); //better than alert

        $("#textboxCorrespondingToValue").val(result.valueCorrespondingToTextbox);

        $("#MyModal").modal('show');
}).error(function () {
    alert("didn't work");
})
}

    Diese Weise, wenn Sie auch brauchen, um die Veränderung der html, die Sie nicht haben, etwas zu ändern in der server-side-code

    Ich habe bearbeitet Sie meine Frage, die ajax-Funktion nicht ausgeführt wird, wird das Bild, das ich vor, war wie eine Warnung mit dem html-code der partiellen view...

    InformationsquelleAutor Jason

  2. 0

    Hatte ich einen Fehler... ich sollte ein Kleinbuchstaben anstelle von Großbuchstaben für die id des modal... Der richtige Weg ist: $("#myModal").modal('show')

    InformationsquelleAutor AlexGH

Schreibe einen Kommentar