2016-11-09 1 views
1

Ich habe eine Layout-Seite in meinem MVC-Website-Projekt Jetzt ist das Problem, dass in einer bestimmten Seite ich möchte, dass die Reihe von Links an der Spitze erscheinen in diesem Renderinhaltsteil der Layoutansichtsseite.Ich muss meine Render-Körper Teil der Layout-Ansicht in asp.net mvc 4

Aber ich habe alle anderen Methoden versucht, um die Polsterung an der Spitze zu entfernen, aber keiner von ihnen funktioniert.Es zeigt noch die große Menge an leerem Raum an der Spitze, die ich nicht brauche.Ich platziere den Schnappschuss Bild der Ansichtsseite.

Unten ist mein Layout-Seite:

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <title>_LoginLayout</title> 
 
</head> 
 
<body> 
 
    <table border="1" style="width:100%;font-family:Arial;border-collapse:collapse"> 
 
     <tr style="height:140px"> 
 
      <td align="center"><img src="~/Images/nurseimage.jpg" /></td> <td style="text-align:center"><h1 style="color:red">Doctor Appointment Booking</h1> <img src="~/Images/Hospitallogo.jpeg" /></td>                          
 
     </tr> 
 
     <tr style="height:420px"> 
 
      <td style="width:30%"><h3>Image Part</h3></td> 
 
      <td style="width:70%;margin-top:-120px">@RenderBody()</td> 
 
     </tr> 
 
     <tr style="height:50px"> 
 
      <td colspan="2" style="text-align:center;font-size:x-small"> 
 
       <h3>Copyright at XYZ</h3> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

Dynamische Inhalte anzeigen:

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width" /> 
 
    <title>PatientHomePage</title> 
 
</head> 
 
<body> 
 
    <table> 
 
     <tr style="padding:-30px"> 
 
      <th style="padding-top:-20px"><a href="~/Views/Login/PatientHomePage.cshtml">Book Appointments</a></th> 
 
      <th><a href="">View Bookings</a></th> 
 
      <th><a href="">Cancel Bookings</a></th> 
 
      <th><a href="">Search Doctor</a></th> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="5"><img src="~/Images/PatientLogo.png" /></td> 
 
     <td colspan="2"><h1>Welcome </h1></td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

und es ist snapshot:

enter image description here

Antwort

0

Sie brauchen nicht die <Doctype>, <head>, <body> Tags aus Ihrer Sicht Seite .. Seit der dort in der Layout-Seite seines als die Masterseite serviert. Alles, was Sie wollen, ist nur die den Inhalt, den Sie in Ihrem

<td style="width:70%;margin-top:-120px">@RenderBody()</td>

erklären im Detail .. Sie sind der Teil @RenderBody() richtig sehen platzieren müssen haben. Dies ist ein Platzhalter, der durch den Inhalt Ihrer Ansicht ersetzt wird. Wenn die endgültige Ansicht von Ihrer Anwendung an den Browser zurückgegeben wird, ist dies eine Kombination aus der Layout-Seite + Ihrer Ansicht (an dem Ort, an dem sie gefunden wird, @RenderBody()).

So, jetzt verstehen Sie, dass, wenn diese Kombination passiert, Sie eine HTML-Seite haben, in der es eine Tabelle und ein tr gibt, die wiederum die HTML-Seite enthält (mit DOCtype, head, body-Tags). Das ist also in erster Linie ein ungültiger HTML-Code. Außerdem könnte es einige CSS geben, die das Margin-Top-Problem für Sie verursachen.

Um es zu beheben, alles, was Sie in Ihrem Dynamic content View: benötigen, ist wie folgt.

<table> 
     <tr style="padding:-30px"> 
      <th style="padding-top:-20px"><a href="~/Views/Login/PatientHomePage.cshtml">Book Appointments</a></th> 
      <th><a href="">View Bookings</a></th> 
      <th><a href="">Cancel Bookings</a></th> 
      <th><a href="">Search Doctor</a></th> 
     </tr> 
     <tr> 
     <td colspan="5"><img src="~/Images/PatientLogo.png" /></td> 
     <td colspan="2"><h1>Welcome </h1></td> 
     </tr> 
    </table> 

Mehr Infos: Sie können das Element inspizieren (right click on the UI that you need to debug and choose Inspect element) und finden Sie heraus, was Stile auf sie angewendet wurden und einfach die Stile verfolgen, die das Problem verursacht

+0

Sie sagen mir, dass don‘ t include head und body tag in dieser ansicht, also wie könnte ich style tag für einige elemente in dieser inhaltsansicht definieren? btw danke für deine antwort –

+0

@KamalSingh ja du musst es nicht einbinden. Und Stil-Tags können irgendwo in Ihrem HTML-Code gehen. Denken Sie daran, es ist nur irgendein anderes HTML-Tag. Sie können es überall in Ihrem HTML-Inhalt platzieren, auch wenn Sie es in einer CSS-Datei speichern und auf die Datei auf Ihrer Seite verweisen können. Als Best Practice würden die Leute empfehlen, die Style-Tags in head-Tags zu platzieren. Es gibt eine Möglichkeit, dies in MVC zu tun (mithilfe von Render-Abschnitten in der Layout-Seite http://dotnet-stuff.com/tutorials/aspnet-mvc/exploring- layouts-renderbody-renderection-und-renderpage-in-asp-net-mvc). Wie gesagt, es ist nur ein Kodierungsstandard und nicht zwingend erforderlich. –

+0

Rest alles ist gut, außer das Hauptproblem, das ich aufgelistet habe immer noch nichts gefunden, das den leeren Raum dort nutzen kann! –