MVC 4 Bootstrap-Modal Bearbeiten \ Detail

Ich denke, dass ich eine Lösung für Ihr problem. Um Ihre MVC-Anwendung arbeiten, wie Sie es haben möchten, sollten Sie einige änderungen an dem code, den Sie zur Verfügung gestellt:

1. Hinzufügen eines div repräsentiert ein modales für die Bearbeitung eines Elements auf der Unterseite Ihrer layout-Seite:

<div id="editModalContainerID" class="modal hide fade" data-url='@Url.Action("Edit", "EquipmentClass")'> 
<div id="editModalBodyID"></div> 
</div>

Beachten Sie, dass dieser modal ist streng verbunden mit der controller-Aktion, verantwortlich für die Bearbeitung eine EquipmentClass Element.

2. Hinzufügen eines jQuery - Funktion, um Ihre benutzerdefinierten javaScript:

function showModal(modalContainerId, modalBodyId, id) {
    var url = $(modalContainerId).data('url');

    $.get(url, { id: id }, function (data) {
        $(modalBodyId).html(data);
        $(modalContainerId).modal('show');
    });
}

Wie Sie sehen können diese Funktion nimmt id als einen seiner Parameter. Im Allgemeinen sein Zweck ist, ersetzen Sie den leeren modal Körper mit dem, was wir in einem separaten Teilansicht und als display-ganze container als modales Seite.

3. Setzen Sie Ihren modal-div in einem separaten Teilansicht, und nennen es Bearbeiten (hat das gleiche wie Ihr-controller Aktion). Müssen Sie ändern Ihre Bearbeiten teilweise Namen sth else, zum Beispiel EditBody.

Den Bearbeiten Teilansicht sollte jetzt Aussehen sth wie diese:

@model EquipmentClass

<!-- modal div -->
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
    @Html.Partial("EditBody", Model)
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>

4. Ändern Sie die controller-Aktion, so dass es gibt die Teilansicht in der vorherigen Schritt erstellt:

public PartialViewResult Edit(int id)
{
    return PartialView(equipmentclassRepository.Find(id));
}

5. Ändern Sie die Bearbeiten 'a' zu verankern, so dass es Anrufe erstellt jQuery Funktion:

@model IEnumerable<Models.EquipmentClass>

....

@foreach (var item in Model)
{
<tbody>
    <tr>
        <td>
            @item.ClassId
        </td>
        <td>
            @item.ClassName
        </td>
        <td>
            <a data-toggle="modal" onclick="showModal('#editModalContainerID', '#editModalBodyID', @item.ClassId)">
                <i class="icon-edit"></i>
            </a>
            <a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
                <i class="icon-trash"></i>
            </a>
        </td>
    </tr>
</tbody>
} <!-- foreach -->

Diese Weise jedes mal, wenn ein 'a' - Anker mit Bearbeiten-Symbol geklickt wird das showModal-Funktion (mit zugehöriger id übergeben wird) ausgelöst wird und ein bootstrap modal mit den zugehörigen Daten angezeigt.

Ich bin sicher, es gibt einen besseren Weg, es zu tun, aber dieser Weg war für mich sehr gut 🙂

Hoffe, das hilft Euch ein bisschen 🙂