Bootstrap modale Kopf- und Fußzeile nicht gerendert

Ich zeige ein Bearbeitungsformular in einem Bootstrap-modal. Mit Asp mvc5, ich eine Teilansicht in einem modalen Bootstrap-Fenster zurückgeben. Das Formular erscheint, füllt sich mit Daten und Posts gut. Das einzige Problem ist, dass die Kopf- und Fußzeile nicht angezeigt werden. Der Code wird in "Seitenquelle anzeigen" angezeigt, nicht jedoch in der Registerkarte Elemente des Web-Entwickler-Inspektors (Chrom).Bootstrap modale Kopf- und Fußzeile nicht gerendert

Ich plane, mehrere verschiedene modals auf dieser einen Seite zu haben, also verwende ich einen Platzhalter in der _layout Seite für das modale und dann in verschiedenen Teilansichten.

Platzhalter in das Layout:

<body> 

    @*Container for modal windows*@ 
    <div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button> 
        <h4 class="modal-title" id="modalLabel"></h4> 
       </div> 
       <div class="modal-body"> 

       </div> 
       <div class="modal-footer">This is the footer</div> 
      </div> 
     </div> 
    </div>

Teilansicht (enthält nur eine Form und die modale Löschtaste):

  <div class="form-group"> 
       <div class="col-md-offset-2 col-md-10"> 
        <input type="submit" value="Save" class="btn btn-default" /> 
        <button class="btn btn-warning" data-dismiss="modal">Cancel</button> 
       </div> 
      </div>

Einige js "Data-" Tags zu den Links hinzufügen:

$(function() { 

    $('body').on('click', '.modal-link', function(e) { 
     //e.preventDefault(); 
     $(this).attr('data-target', "#modal-container"); 
     $(this).attr('data-toggle', 'modal'); 
    }); 

//Clear modal cache 
    $('#modal-container').on('hidden.bs.modal', function() { 
     $(this).removeData('bs.modal'); 
    }); 

});

Mvc Controller liefert nur den Teil:

return PartialView("_EditOrchard", orchard);

Quelle

2016-09-09 BattlFrog

Warum enthalten Sie nicht die Kopf- und Fußzeile in der Teilantwort. Jeder Teil wird ein anderes Verhalten für "Speichern" haben, richtig? – Shyju

Ok das funktioniert, aber ich verstehe nicht warum. Ich vermutete, dass die Teilansicht in das Dival "modal-body" eingefügt würde. Wenn ich also die Kopf- und Fußzeile in die Teilansicht einfüge, würde sie sie in den Körper einfügen. Aber das tut es nicht. Ich schätze, weil die Bootstrap-Elfen das ganze Modal aufbauen und die Dinge richtig ordnen? – BattlFrog

Da Ihr 'modal-container' das äußere div ist, in dem Sie Kopf- und Fußzeile haben. Die Antwort von wird den vorhandenen Inhalt überschreiben. – Shyju

Sie müssen das entsprechende Markup für Kopf- und Fußzeile einfügen, wenn Sie den Inhalt der Teilansicht zurückgeben. Je nach der von Ihnen vorgenommenen Anfrage haben Ihre Teilansichten möglicherweise andere Schaltflächen. Einige können nur eine „Speichern“ Taste können einige haben nur ein „löschen“ und den Code auszuführen, wenn Sie auf diese Tasten auch unterschiedlich sind.

<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
              <span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
     <p>Some contet for the modal </p> 
    </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>

Der Grund, warum es ist wie du nicht funktioniert gedacht, ist modal-containe r die äußere div innerhalb dessen Sie Kopf- und Fußzeilen haben. Die vom Server kommende Antwort überschreibt den vorhandenen Inhalt.

Quelle

2016-09-09 18:19:24 Shyju

Bootstrap modale Kopf- und Fußzeile nicht gerendert

Antwort

Verwandte Themen