[Route ASP.NET MVC Mavericks]12-javaDidacticiel-php.cn

[ASP.NET
MVC Mavericks Road] 12 - Section, vue partielle et action enfant

En un mot, le contenu de View peut être divisé en parties statiques et dynamiques. Le contenu statique est généralement constitué d'éléments HTML, tandis que le contenu dynamique fait référence au contenu créé dynamiquement lors de l'exécution de l'application. Les façons d'ajouter du contenu dynamique à View peuvent être résumées comme suit :

Code en ligne, petits extraits de code, tels que les instructions if et foreach.
Méthode d'assistance HTML, utilisée pour générer un ou plusieurs éléments HTML, tels que le modèle de vue, ViewBag, etc.
Section, insérez une partie du contenu créé à l'emplacement spécifié.
Vue partielle, qui existe dans un fichier de vue séparé et peut être partagée entre plusieurs vues en tant que sous-contenu.
L'action enfant est équivalente à un composant d'interface utilisateur qui contient une logique métier. Lorsqu'une action enfant est utilisée, elle appelle l'action dans le contrôleur pour renvoyer une vue et insère le résultat dans le flux de sortie.

Cette classification n'est pas absolue. Les deux premiers sont très simples et ont été utilisés dans des articles précédents. Cet article présente principalement les applications de ces trois dernières méthodes.

Table des matières

Section

Le moteur de vue Razor prend en charge la séparation d'une partie du contenu dans la vue pour la réutiliser si nécessaire, réduisant ainsi le code redondance. Montrons comment utiliser Section.

Créez une application MVC et choisissez un modèle de base. Ajoutez un HomeController, modifiez la méthode Index générée comme suit :

public ActionResult Index() {
    string[] names = { "Apple", "Orange", "Pear" };
    return View(names);
}

Copier après la connexion

Cliquez avec le bouton droit sur la méthode Index, ajoutez une vue, modifiez la vue comme suit :

@model string[] 
 
@{ 
    ViewBag.Title = "Index"; 
} 
 
@section Header { 
    <div class="view"> 
        @foreach (string str in new [] {"Home", "List", "Edit"}) { 
            @Html.ActionLink(str, str, null, new { style = "margin: 5px" })   
        } 
    </div> 
}

<div class="view"> 
    This is a list of fruit names: 
    @foreach (string name in Model) { 
        <span><b>@name</b></span> 
    } 
</div>@section Footer { 
    <div class="view"> 
        This is the footer 
    </div> 
}

Copier après la connexion

Nous ajoutons une section via la balise @section Nom pour définir une Section. Deux sections sont créées ici : En-tête et Pied de page. Il est d'usage de placer la section au début ou à la fin du fichier View pour en faciliter la lecture. Ci-dessous, nous les utilisons dans le fichier /Views/Shared/_Layout.cshtml.

Modifiez le fichier /Views/Shared/_Layout.cshtml comme suit :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <style type="text/css"> 
        div.layout { background-color: lightgray;} 
        div.view { border: thin solid black; margin: 10px 0;} 
    </style> 
    <title>@ViewBag.Title</title> 
</head> 
<body>
    @RenderSection("Header") 
 
    <div class="layout"> 
        This is part of the layout 
    </div> 
 
    @RenderBody() 
 
    <div class="layout"> 
        This is part of the layout 
    </div>

    @RenderSection("Footer")
<div class="layout"> 
        This is part of the layout 
    </div> 
</body> 
</html>

Copier après la connexion

Nous appelons le contenu de la section via la méthode @RenderSection, et le paramètre spécifie le nom du section. Après avoir exécuté le programme, vous pouvez voir les résultats suivants :

[Route ASP.NET MVC Mavericks]12

Notez que la section ne peut être appelée que dans la vue actuelle ou sa mise en page. La méthode @RenderSection lèvera une exception si elle ne trouve pas la section spécifiée par le paramètre. Si vous n'êtes pas sûr que la section existe, vous devez spécifier la valeur du deuxième paramètre comme false, comme suit :

... 
@RenderSection("scripts", false) 
...

Copier après la connexion

Nous pouvons également utiliser la méthode IsSectionDefined. Déterminez si une section est définie ou peut être appelée dans la vue actuelle, comme :

... 
@if (IsSectionDefined("Footer")) { 
    @RenderSection("Footer") 
} else { 
    <h4>This is the default footer</h4>    
} 
...

Copier après la connexion

Vue partielle

<🎜. > La vue partielle est un rasoir partiel et les balises HTML sont placées dans un fichier de vue séparé pour être réutilisées à différents endroits. Ensuite, nous présenterons comment utiliser la vue partielle.

Créons d’abord une vue partielle. Créez un nouveau fichier de vue nommé MyPartial dans le répertoire /Views/Shared, cochez "Créer en tant que vue partielle", comme suit :

[Route ASP.NET MVC Mavericks]12

Le fichier de vue partielle ajouté est un fichier vide. , nous ajoutons le code suivant à ce fichier :

<div>
    This is the message from the partial view.
    @Html.ActionLink("This is a link to the Index action", "Index")
</div>

Copier après la connexion

Cette vue MyPartial.cshtml créera un lien vers la page d'accueil. Bien sûr, la méthode @Html.ActionLink ici est également un moyen (Html Helper) de charger dynamiquement le contenu de View.

Ajoutez ensuite une méthode d'action List dans HomeController, comme suit :

public ActionResult List()
{
    return View();
}

Copier après la connexion

Continuez à ajouter une vue List.cshtml pour cela et appelez la méthode @Html.Partial que nous voulons rendre Vue partielle, comme suit :

@{
    ViewBag.Title = "List";
    Layout = null;
}
<h3>This is the /Views/Home/List.cshtml View</h3>
@Html.Partial("MyPartial")

Copier après la connexion

Le moteur de vue recherchera la vue MyPartial dans les dossiers /Views/Home et /Views/Shared dans l'ordre spécifié.

Exécutez le programme et accédez à /Home/List, nous pouvons voir l'effet suivant :

[Route ASP.NET MVC Mavericks]12

Il n'y a aucune différence entre l'utilisation de la vue partielle et La vue normale et le typage fort peuvent être utilisés. Par exemple, nous spécifions le type de modèle via @model dans MyPartial.cshtml :

@model IEnumerable<string>

<div>
    This is the message from the partial view.
    @Html.ActionLink("This is a link to the Index action", "Index")
    
    <ul>
        @foreach (string str in Model)
        {
            <li>@str</li>
        }
    </ul>
</div>

Copier après la connexion

et modifions la vue principale List.cshtml qui appelle la vue MyPartial.cshtml. comme suit :

@{
    ViewBag.Title = "List";
    Layout = null;
}
<h3>This is the /Views/Home/List.cshtml View</h3>
@Html.Partial("MyPartial", new[] { "Apple", "Orange", "Pear" })

Copier après la connexion

La différence par rapport à ce qui précède est que nous spécifions ici le deuxième paramètre pour @Html.Partial et passons un tableau à l'objet modèle de MyPartial.cshtml. L'effet de l'opération est le suivant :

[Route ASP.NET MVC Mavericks]12

Child Action

Child action 和 Patial view 类似，也是在应用程序的不同地方可以重复利用相同的子内容。不同的是，它是通过调用 controller 中的 action 方法来呈现子内容的，并且一般包含了业务的处理。任何 action 都可以作为子 action 。接下来介绍如何使用它。

在 HomeController 中添加一个 action，如下：

[ChildActionOnly]
public ActionResult Time()
{
    return PartialView(DateTime.Now);
}

Copier après la connexion

这个 action 通过调用 PartialView 方法来返回一个 partial view。ChildActionOnly 特性保证了该 action 只能作为子action被调用（不是必须的）。

接着我们继续为这个action添加一个相应的 Time.cshtml 视图，代码如下：

@model DateTime

<p>The time is: @Model.ToShortTimeString()</p>

Copier après la connexion

在 List.cshtml 视图中添加如下代码来调用 Time action 方法：

...
@Html.Action("Time")

Copier après la connexion

运行结果如下：

[Route ASP.NET MVC Mavericks]12

我们通过 @Html.Action 方法来调用了 Time action 方法来呈现子内容。在这个方法中我们只传了一个action名称参数，MVC将根据当前View所在Controller去查找这个action。如果是调用其它 controller 中的 action 方法，则需要在第二个参数中指定 controller 的名称，如下：

... 
@Html.Action("Time", "MyController")

Copier après la connexion

该方法也可以给 action 方法的参数传值，如对于下面带有参数的 action：

... 
[ChildActionOnly] 
public ActionResult Time(DateTime time) { 
    return PartialView(time); 
}

Copier après la connexion

我们可以这样使用 @Html.Action 方法：

... 
@Html.Action("Time", new { time = DateTime.Now })

Copier après la connexion

以上就是[ASP.NET MVC 小牛之路]12 的内容，更多相关内容请关注PHP中文网（www.php.cn）！