Bootstrap-modal: laden von Daten für das mitgelieferte ID

Habe ich eine Bootstrap modal, dass gestartet werden kann von verschiedenen hyperlinks, jeder liefert eine andere ID.

Aber was ich will ist, dass jedes mal, wenn der modal gestartet wird, es wird aufgefüllt, mit den Daten für die ID, die übergeben wird, um den modal. Hier der (vereinfachte) code (siehe Kommentare im code zur Erklärung):

@model ViewModels.BookcaseItem.EditBookcaseItemViewModel

<div class="modal hide modal-large" id="editBookDialog">
    @using (Html.BeginForm("Edit", "Bookcase", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        <!-- this is where the ID will be passed to -->
        @Html.HiddenFor(x => x.Id)

        <div class="modal-body">
            <!-- there's actually a couple of editors and labels here, but that doesn't really matter -->
            @Html.EditorFor(x => x.Bla)
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    }
</div>

Hier ist einer der hyperlinks, die verwendet wird, um starten Sie die modale und übergeben die ID zu:

<a href="#editBookDialog" data-toggle="modal" data-id="@bookcaseItem.Id" title="Edit this item" class="open-EditBookDialog"></a>

Und nicht zuletzt der JQuery-Teil pass eigentlich die ID:

$(document).on("click", ".open-EditBookDialog", function () {
    var myBookcaseItemId = $(this).data('id');
    $(".modal #Id").val(myBookcaseItemId);
    $('#editBookDialog').modal('show');
});

Und nehmen an, es gibt eine Methode mit der Signatur ActionResult Edit(string-id), die Daten zurück an die PartialView, wo der modal platziert wird.

Den modal ist bereits in die Seite eingebettet, mit alle hyperlinks, es ist nur standardmäßig nicht sichtbar.

Ich kann einfach nicht herausfinden, wie füllen Sie es mit verschiedenen Daten basierend auf der ID, die übergeben wurde.

InformationsquelleAutor Leon Cullens | 2012-05-23
  1. 2

    Konnte man AJAX verwenden, um zu laden frische Daten vom server, indem Sie durch die controller-action:

    $(function() {
    $(document).on('click', '.open-EditBookDialog', function () {
        var myBookcaseItemId = $(this).data('id');
        //send an AJAX request to fetch the data
        $.get(this.href, { id: myBookcaseItemId }, function(data) {
            $('#editBookDialog').html(data).modal('show');
        });
        return false;
    });
});

    Nun, offensichtlich sollten Sie ändern Sie die Anker soll, öffnen Sie das Dialogfenster so, dass es " href Punkte zum Bearbeiten von controller-action:

    @Html.ActionLink(
    "Some text", 
    "Edit", 
    null, 
    new {
        data_toggle = "modal",
        data_id = bookcaseItem.Id,
        title = "Edit this item",
        @class = "open-EditBookDialog"
    }
)
    • Danke, hat es fast funktioniert. Scheint, dass der code übergibt die richtigen Daten zum modal, das einzige problem das ich habe ist jetzt, dass modale nicht zeigen, bis auf (der hintergrund dunkel wird, aber das modal ist, nicht sichtbar). Ich werde es hoffentlich herausfinden (ich werde markieren Sie diese als Antwort, wenn es 100% funktioniert).
    • Yup, es funktioniert jetzt. Der Grund, warum es nicht funktioniert ist, dass der code oben versucht zu legen das modal in der modal (das .html() Teil). Ich tauschte die html () - Funktion für die replaceWith () - Funktion, und nun das modal wird vollständig ersetzt durch die neue modal.
    • Nahe genug Ändern ... html('Daten')... bis zu ... html(data)...
    • sind Sie richtig. Vielen Dank für den Hinweis. Ich habe aktualisiert die Antwort.
    InformationsquelleAutor Darin Dimitrov
Schreibe einen Kommentar