#

 

 

Wie definiert man in einer Asp-View das übergeordnete Layout?

In Asp.Net MVC wird jede erstellte View standardmässig innerhalb eines umfassenden Layouts ausgegeben.

 

Das umfassend Layout kann man ausschalten, wenn man im Kopfbereich der View Layout=null eingibt.

@{

    Layout = null;  

}

 

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Upload_Image</title>

</head>

<body>

 

Dann erscheint die Ansicht im Browser ohne die Navigationsbar und den Footer.

 

 

Wenn man in der Asp-View Layout nicht angibt, dann wird automatisch das Standard-Layout verwendet.

Dadurch wird die View, welche man mit Razor-Code programmiert hat, automatisch innerhalb der Standard Layout Containers eingebettet.

@{

    //Layout = null;   

}

 

<!DOCTYPE html>

 

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Upload_Image</title>

</head>

<body>..

 

Der Razor erzeugt Code der Asp-View Datei landet dann im großen Content Block

 

 

Die Layout Datei befindet sich unter dem Verzeichnis Views/Shared

Als Datei _Layout.cshtml

In Aspx entspricht das der Master Datei

 

Der Inhalt von Views wird dann immer inden Bereich bei @RenderBody() eingefügt

<div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

 

 

Layout

 

Layout Head Navbar

Der obere Bereich wird mit dem Container Navbar ausgefüllt

 

 

Layout Content

 

body-content Container

 

Durch das Layout File wird die übergeordnete Struktur festgelegt.

Die eigentlichen Dateien erscheinen dann einfach im body-content Container

<div Class="container body-content">

..
view-File

..

</div>

 

Struktur dargestellt: der Layout Master umfasst den Inhalt des View Files.

 

Auszug aus dem Browser-Ergebnis Code in html.

Der erzeugte Ausgbe-Code des View Files ist hellblau markiert.

<div Class="container body-content">

    <meta name = "viewport" content="width=device-width">

    <title> Upload_Image</title>

    <br> <br>

    <span style = "margin-top:10px;" > Upload Your Profil Image:</span>

    <br>

    <form method = "post" enctype="multipart/form-data" action="/">

        <input type = "file" name="uploaded_File">

        <br>

    <button type = "submit" style="">Upload</button>

    <input name = "__RequestVerificationToken" type="hidden" value="CfDJ8Dhdxr8yuLlGjK7dvozM2TOait4TcEFZQfJnUCdXnpoIdn-hRtpePEb5-o0QWc_8FT3FXB24A02ZeRSjodNAnwNERX1DZ2ZXM4HAvDuD46VgqUUCCX7t RnZHCvcigUrWwLbXwDqQCzp7Xet9ryhc2eunYSSgKb5hyCe0RMFBesbD5jP3sBHmK_7Xk2RjXionkg"></form>

    <br>

    <br>

    <hr>

    <footer>

    <div Class="navbar-collapse collapse">

                <ul Class="nav navbar-nav">

                    <li> <a href = "/Home/Contact" > Contact</a></li>

                </ul>

               

            </div>

        </footer>

    </div>

 

Mobile

.

0123movie.net