Merge pull request #43 from episerver/feature/CMS-23924-Update-sample…

…-site-to-use-TagHelper Feature/cms 23924 update sample site to use tag helper
episerver · Feb 27, 2023 · 448a9b0 · 448a9b0
2 parents 0c72f0e + d08442b
commit 448a9b0
Show file tree

Hide file tree

Showing 24 changed files with 128 additions and 81 deletions.
diff --git a/templates/Alloy.Mvc/Alloy.Mvc.1.csproj b/templates/Alloy.Mvc/Alloy.Mvc.1.csproj
@@ -6,14 +6,15 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <Using Include="EPiServer"/>
-    <Using Include="EPiServer.Core"/>
-    <Using Include="EPiServer.DataAbstraction"/>
-    <Using Include="EPiServer.DataAnnotations"/>
+    <Using Include="EPiServer" />
+    <Using Include="EPiServer.Core" />
+    <Using Include="EPiServer.DataAbstraction" />
+    <Using Include="EPiServer.DataAnnotations" />
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="EPiServer.CMS" Version="12.13.2" />
+    <PackageReference Include="EPiServer.Cms.AspNetCore.TagHelpers" Version="12.12.1" />
+    <PackageReference Include="EPiServer.CMS" Version="12.16.1" />
     <PackageReference Include="Wangkanai.Detection" Version="5.2.0" />
   </ItemGroup>
 

diff --git a/templates/Alloy.Mvc/Business/Initialization/CustomizedRenderingInitialization.cs b/templates/Alloy.Mvc/Business/Initialization/CustomizedRenderingInitialization.cs
@@ -20,7 +20,7 @@ public void ConfigureContainer(ServiceConfigurationContext context)
         context.ConfigurationComplete += (o, e) =>
             // Register custom implementations that should be used in favour of the default implementations
             context.Services.AddTransient<IContentRenderer, ErrorHandlingContentRenderer>()
-                .AddTransient<ContentAreaRenderer, AlloyContentAreaRenderer>();
+                .AddSingleton<AlloyContentAreaItemRenderer, AlloyContentAreaItemRenderer>();
     }
 
     public void Initialize(InitializationEngine context) =>

diff --git a/...ess/Rendering/AlloyContentAreaRenderer.cs → ...Rendering/AlloyContentAreaItemRenderer.cs b/...ess/Rendering/AlloyContentAreaRenderer.cs → ...Rendering/AlloyContentAreaItemRenderer.cs
@@ -1,21 +1,18 @@
-using EPiServer.Core.Html.StringParsing;
-using EPiServer.Web.Mvc.Html;
-using Microsoft.AspNetCore.Mvc.Rendering;
+using EPiServer.Web;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Microsoft.AspNetCore.Mvc.TagHelpers;
 using static Alloy.Mvc._1.Globals;
+using System.Text;
 
 namespace Alloy.Mvc._1.Business.Rendering;
 
-/// <summary>
-/// Extends the default <see cref="ContentAreaRenderer"/> to apply custom CSS classes to each <see cref="ContentFragment"/>.
-/// </summary>
-public class AlloyContentAreaRenderer : ContentAreaRenderer
+public class AlloyContentAreaItemRenderer
 {
-    protected override string GetContentAreaItemCssClass(IHtmlHelper htmlHelper, ContentAreaItem contentAreaItem)
-    {
-        var baseItemClass = base.GetContentAreaItemCssClass(htmlHelper, contentAreaItem);
-        var tag = GetContentAreaItemTemplateTag(htmlHelper, contentAreaItem);
+    private readonly IContentAreaLoader _contentAreaLoader;
 
-        return $"block {baseItemClass} {GetTypeSpecificCssClasses(contentAreaItem)} {GetCssClassForTag(tag)} {tag}";
+    public AlloyContentAreaItemRenderer(IContentAreaLoader contentAreaLoader)
+    {
+        _contentAreaLoader = contentAreaLoader;
     }
 
     /// <summary>
@@ -52,4 +49,22 @@ private static string GetTypeSpecificCssClasses(ContentAreaItem contentAreaItem)
 
         return cssClass;
     }
+
+    public void RenderContentAreaItemCss(ContentAreaItem contentAreaItem, TagHelperContext context, TagHelperOutput output)
+    {
+        var displayOption = _contentAreaLoader.LoadDisplayOption(contentAreaItem);
+        var cssClasses = new StringBuilder();
+
+        if (displayOption != null)
+        {
+            cssClasses.Append(displayOption.Tag);
+            cssClasses.Append((string)$" {GetCssClassForTag(displayOption.Tag)}");
+        }
+        cssClasses.Append((string)$" {GetTypeSpecificCssClasses(contentAreaItem)}");
+
+        foreach (var cssClass in cssClasses.ToString().Split(' ', StringSplitOptions.RemoveEmptyEntries))
+        {
+            output.AddClass(cssClass, System.Text.Encodings.Web.HtmlEncoder.Default);
+        }
+    }
 }
diff --git a/templates/Alloy.Mvc/Startup.cs b/templates/Alloy.Mvc/Startup.cs
@@ -28,6 +28,7 @@ public void ConfigureServices(IServiceCollection services)
         services
             .AddCmsAspNetIdentity<ApplicationUser>()
             .AddCms()
+            .AddCmsTagHelpers()
             .AddAlloy()
             .AddAdminUserRegistration()
             .AddEmbeddedLocalization<Startup>();

diff --git a/templates/Alloy.Mvc/Views/AlloyPageBase.cs b/templates/Alloy.Mvc/Views/AlloyPageBase.cs
@@ -0,0 +1,27 @@
+using Alloy.Mvc._1.Business.Rendering;
+using EPiServer.ServiceLocation;
+using Microsoft.AspNetCore.Mvc.Razor;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Alloy.Mvc._1.Views;
+
+public abstract class AlloyPageBase<TModel> : RazorPage<TModel> where TModel : class
+{
+    private readonly AlloyContentAreaItemRenderer _alloyContentAreaItemRenderer;
+
+    public abstract override Task ExecuteAsync();
+
+    public AlloyPageBase() : this(ServiceLocator.Current.GetInstance<AlloyContentAreaItemRenderer>())
+    {
+    }
+
+    public AlloyPageBase(AlloyContentAreaItemRenderer alloyContentAreaItemRenderer)
+    {
+        _alloyContentAreaItemRenderer = alloyContentAreaItemRenderer;
+    }
+
+    protected void OnItemRendered(ContentAreaItem contentAreaItem, TagHelperContext context, TagHelperOutput output)
+    {
+        _alloyContentAreaItemRenderer.RenderContentAreaItemCss(contentAreaItem, context, output);
+    }
+}
diff --git a/templates/Alloy.Mvc/Views/ArticlePage/Index.cshtml b/templates/Alloy.Mvc/Views/ArticlePage/Index.cshtml
@@ -3,11 +3,11 @@
 @{ Layout = "~/Views/Shared/Layouts/_LeftNavigation.cshtml"; }
 
 <div class="content">
-    <h1 @Html.EditAttributes(x => x.CurrentPage.PageName)>@Model.CurrentPage.PageName</h1>
-    <p class="lead" @Html.EditAttributes(x => x.CurrentPage.MetaDescription)>@Model.CurrentPage.MetaDescription</p>
+    <h1 epi-property="@Model.CurrentPage.PageImage">@Model.CurrentPage.PageName</h1>
+    <p class="lead" epi-property="@Model.CurrentPage.MetaDescription">@Model.CurrentPage.MetaDescription</p>
     <div class="clearfix">
-        @Html.PropertyFor(m => m.CurrentPage.MainBody)
+        <div epi-property="@Model.CurrentPage.MainBody" />
     </div>
 </div>
 
-@Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row" })
+<div epi-property="@Model.CurrentPage.MainContentArea" class="row" />
diff --git a/templates/Alloy.Mvc/Views/LandingPage/Index.cshtml b/templates/Alloy.Mvc/Views/LandingPage/Index.cshtml
@@ -1,5 +1,5 @@
 @model PageViewModel<LandingPage>
 
 <div class="campaign-wrapper">
-    @Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row" })
+    <div epi-property="@Model.CurrentPage.MainContentArea" class="row" />
 </div>
diff --git a/templates/Alloy.Mvc/Views/NewsPage/Index.cshtml b/templates/Alloy.Mvc/Views/NewsPage/Index.cshtml
@@ -3,12 +3,12 @@
 @{ Layout = "~/Views/Shared/Layouts/_LeftNavigation.cshtml"; }
 
 <div class="content">
-    <h1 @Html.EditAttributes(x => x.CurrentPage.PageName)>@Model.CurrentPage.PageName</h1>
-    <p class="lead" @Html.EditAttributes(x => x.CurrentPage.MetaDescription)>@Model.CurrentPage.MetaDescription</p>
+    <h1 epi-property="@Model.CurrentPage.PageTypeName">@Model.CurrentPage.PageName</h1>
+    <p class="lead" epi-property="@Model.CurrentPage.MetaDescription">@Model.CurrentPage.MetaDescription</p>
     <div class="clearfix">
-        @Html.PropertyFor(m => m.CurrentPage.MainBody)
+        <div epi-property="@Model.CurrentPage.MainBody" />
     </div>
-    @Html.PropertyFor(x => x.CurrentPage.NewsList)
+    <div epi-property="@Model.CurrentPage.NewsList" />
 </div>
 
-@Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row" })
+<div epi-property="@Model.CurrentPage.MainContentArea" class="row" />
diff --git a/templates/Alloy.Mvc/Views/ProductPage/Index.cshtml b/templates/Alloy.Mvc/Views/ProductPage/Index.cshtml
@@ -1,27 +1,31 @@
-@model PageViewModel<ProductPage>
+@inherits Alloy.Mvc._1.Views.AlloyPageBase<PageViewModel<ProductPage>>
 
 @{ Layout = "~/Views/Shared/Layouts/_TwoPlusOne.cshtml"; }
 
 <div class="content">
-    <h1 @Html.EditAttributes(x => x.CurrentPage.PageName)>@Model.CurrentPage.PageName</h1>
-    <p class="lead" @Html.EditAttributes(x => x.CurrentPage.MetaDescription)>@Model.CurrentPage.MetaDescription</p>
-    <div class="clearfix">
-        @Html.PropertyFor(m => m.CurrentPage.MainBody)
-    </div>
+    <h1 epi-property="@Model.CurrentPage.PageName">
+        @Model.CurrentPage.PageName
+    </h1>
+    <p class="lead" epi-property="@Model.CurrentPage.MetaDescription">@Model.CurrentPage.MetaDescription</p>
+    <div class="clearfix" epi-property="@Model.CurrentPage.MainBody" />
 </div>
 
-@Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row" })
+<div epi-property="@Model.CurrentPage.MainContentArea" class="row">
+    <div epi-property-item class="block" epi-on-item-rendered="OnItemRendered" />
+</div>
 
 @section RelatedContent
 {
-    <div @Html.EditAttributes(x => x.CurrentPage.PageImage)>
-        <img src="@Url.ContentUrl(Model.CurrentPage.PageImage)" />
-    </div>
+    <div epi-property="@Model.CurrentPage.PageImage" />
 
     <div class="block colorBox @string.Join(" ", @Model.CurrentPage.GetThemeCssClassNames())">
-        <h2 @Html.EditAttributes(x => x.CurrentPage.PageName)>@Model.CurrentPage.PageName</h2>
-        @Html.PropertyFor(x => x.CurrentPage.UniqueSellingPoints)
+        <h2 accesskey="@Model.CurrentPage.PageName">@Model.CurrentPage.PageName</h2>
+        <div epi-property="@Model.CurrentPage.UniqueSellingPoints" />
     </div>
 
-    @Html.PropertyFor(x => x.CurrentPage.RelatedContentArea, new { Aside = true })
+    @(ViewData["Aside"] = true)
+
+    <div epi-property="@Model.CurrentPage.RelatedContentArea">
+        <div epi-property-item class="block" epi-on-item-rendered="OnItemRendered" />
+    </div>
 }
diff --git a/templates/Alloy.Mvc/Views/Shared/Blocks/ButtonBlock.cshtml b/templates/Alloy.Mvc/Views/Shared/Blocks/ButtonBlock.cshtml
@@ -1,6 +1,6 @@
 @model ButtonBlock
 
-<a class="btn btn-primary" title="@Model.ButtonText" href="@Url.ContentUrl(Model.ButtonLink)" @Html.EditAttributes(m => m.ButtonText)>
+<a class="btn btn-primary" title="@Model.ButtonText" href="@Url.ContentUrl(Model.ButtonLink)" epi-property="@Model.ButtonText">
     @{
         var buttonText = string.IsNullOrWhiteSpace(Model.ButtonText) 
             ? LocalizationService.Current.GetString("/blocks/buttonblockcontrol/buttondefaulttext")

diff --git a/templates/Alloy.Mvc/Views/Shared/Blocks/EditorialBlock.cshtml b/templates/Alloy.Mvc/Views/Shared/Blocks/EditorialBlock.cshtml
@@ -1,5 +1,5 @@
 @model EditorialBlock
 
-<div @Html.EditAttributes(x => x.MainBody)>
-    @Html.DisplayFor(x => Model.MainBody)
+<div epi-property="@Model.MainBody">
+    @Html.Raw(@Model.MainBody)
 </div>
diff --git a/templates/Alloy.Mvc/Views/Shared/Blocks/JumbotronBlock.cshtml b/templates/Alloy.Mvc/Views/Shared/Blocks/JumbotronBlock.cshtml
@@ -3,8 +3,8 @@
 <div style="background-image:url('@Url.ContentUrl(Model.Image)')">
     <div class="jumbotron-dimmer"></div>
     <div class="jumbotron-inner">
-        <h1 class="display-5 mb-4" @Html.EditAttributes(m => m.Heading)>@Model.Heading</h1>
-        <p class="lead mb-5" @Html.EditAttributes(m=>m.SubHeading)>@Model.SubHeading</p>
-        <a class="btn btn-primary btn-lg" href="@Url.ContentUrl(Model.ButtonLink)" id="jumboLink" @Html.EditAttributes(m => m.ButtonText)>@Model.ButtonText</a>
+        <h1 class="display-5 mb-4" epi-property="@Model.Heading">@Model.Heading</h1>
+        <p class="lead mb-5" epi-property="@Model.SubHeading">@Model.SubHeading</p>
+        <a class="btn btn-primary btn-lg" href="@Url.ContentUrl(Model.ButtonLink)" id="jumboLink" epi-property="@Model.ButtonText">@Model.ButtonText</a>
     </div>
 </div>
diff --git a/templates/Alloy.Mvc/Views/Shared/Blocks/TeaserBlock.cshtml b/templates/Alloy.Mvc/Views/Shared/Blocks/TeaserBlock.cshtml
@@ -9,11 +9,10 @@
         Url.PageLinkUrl(Model.Link),
         Model.Heading))
     {
-        <div class="img-wrapper mb-3" @Html.EditAttributes(x => x.Image)>
+        <div class="img-wrapper mb-3" epi-property="@Model.Image">
             <img src="@Url.ContentUrl(Model.Image)" />
         </div>
-
-        <h2 @Html.EditAttributes(x => x.Heading)>@Model.Heading</h2>
-        <p @Html.EditAttributes(x => x.Text)>@Model.Text</p>
+        <h2 epi-property="@Model.Heading">@Model.Heading</h2>
+        <p epi-property="@Model.Text">@Model.Text</p>
     }
 </div>
diff --git a/templates/Alloy.Mvc/Views/Shared/Blocks/TeaserBlockWide.cshtml b/templates/Alloy.Mvc/Views/Shared/Blocks/TeaserBlockWide.cshtml
@@ -1,7 +1,7 @@
 @model TeaserBlock
 
 <div class="row align-items-center">
-    <div class="col-sm-12 col-lg-6" @Html.EditAttributes(x => x.Image)>
+    <div class="col-sm-12 col-lg-6" epi-property="@Model.Image">
         <img class="pb-3 pb-lg-0" src="@Url.ContentUrl(Model.Image)" />
     </div>
     <div class="col-sm-12 col-lg-6 text-lg-start">
@@ -11,8 +11,8 @@
             Url.PageLinkUrl(Model.Link),
             Model.Heading))
         {
-            <h2 @Html.EditAttributes(x => x.Heading)>@Model.Heading</h2>
-            <p @Html.EditAttributes(x => x.Text)>@Model.Text</p>
+            <h2 epi-property="@Model.Heading">@Model.Heading</h2>
+            <p epi-property="@Model.Text">@Model.Text</p>
         }
     </div>
 </div>
diff --git a/templates/Alloy.Mvc/Views/Shared/Breadcrumbs.cshtml b/templates/Alloy.Mvc/Views/Shared/Breadcrumbs.cshtml
@@ -34,7 +34,7 @@
 <nav aria-label="breadcrumb">
     <ol class="breadcrumb d-none d-lg-flex">
         <li class="breadcrumb-item">
-            @Html.ContentLink(SiteDefinition.Current.StartPage)
+            <a epi-property="@SiteDefinition.Current.StartPage" />
         </li>
         @Html.MenuList(SiteDefinition.Current.StartPage, ItemTemplate, requireVisibleInMenu: false, requirePageTemplate: false)
     </ol>

diff --git a/templates/Alloy.Mvc/Views/Shared/Components/ContactBlock/Default.cshtml b/templates/Alloy.Mvc/Views/Shared/Components/ContactBlock/Default.cshtml
@@ -1,12 +1,13 @@
 @model ContactBlockModel
 
 <div class="contact">
-    @Html.PropertyFor(x => x.Image)
-    <h3 @Html.EditAttributes(x => x.Heading)>@Model.Heading</h3>
-    @Html.PropertyFor(x => x.ContactPage)
+    <img epi-property="@Model.Image" />
+    <h3 epi-property="@Model.Heading">@Model.Heading</h3>
+    <div epi-property="@Model.ContactPage" />
+
     @if(Model.ShowLink)
     {
-        <a href="@Model.LinkUrl" title="@Model.LinkText" class="btn-blue" @Html.EditAttributes(x => x.LinkText)>
+        <a href="@Model.LinkUrl" title="@Model.LinkText" class="btn-blue" epi-property="@Model.LinkText">
             @Model.LinkText
         </a>
     }

diff --git a/templates/Alloy.Mvc/Views/Shared/Components/PageListBlock/Default.cshtml b/templates/Alloy.Mvc/Views/Shared/Components/PageListBlock/Default.cshtml
@@ -1,11 +1,12 @@
 @model PageListModel
+
 @{
     var isAside = ViewData["Aside"] != null && (bool)ViewData["Aside"];
 }
 
 @Html.FullRefreshPropertiesMetaData(new[] { "IncludePublishDate", "IncludeIntroduction", "Count", "SortOrder", "Root", "PageTypeFilter", "CategoryFilter", "Recursive" })
 
-<h2 @Html.EditAttributes(x => x.Heading)>@Model.Heading</h2>
+<h2 epi-property="@Model.Heading">@Model.Heading</h2>
 
 @foreach (var page in Model.Pages)
 {

diff --git a/templates/Alloy.Mvc/Views/Shared/DisplayTemplates/Image.cshtml b/templates/Alloy.Mvc/Views/Shared/DisplayTemplates/Image.cshtml
diff --git a/templates/Alloy.Mvc/Views/Shared/Footer.cshtml b/templates/Alloy.Mvc/Views/Shared/Footer.cshtml
@@ -5,19 +5,19 @@
         <div class="row">
             <div class="col-3">
                 <h3>@Html.Translate("/footer/products")</h3>
-                @Html.PropertyFor(x => x.Layout.ProductPages)
+                <div epi-property="@Model.Layout.ProductPages" />
             </div>
             <div class="col-3">
                 <h3>@Html.Translate("/footer/company")</h3>
-                @Html.PropertyFor(x => x.Layout.CompanyInformationPages)
+                <div epi-property="@Model.Layout.CompanyInformationPages" />
             </div>
             <div class="col-3">
                 <h3>@Html.Translate("/footer/news")</h3>
-                @Html.PropertyFor(x => x.Layout.NewsPages)
+                <div epi-property="@Model.Layout.NewsPages" />
             </div>
             <div class="col-3">
                 <h3>@Html.Translate("/footer/customerzone")</h3>
-                @Html.PropertyFor(x => x.Layout.CustomerZonePages)
+                <div epi-property="@Model.Layout.CustomerZonePages" />
                 <ul>
                     <li>
                         @if (Model.Layout.LoggedIn)

diff --git a/templates/Alloy.Mvc/Views/Shared/Header.cshtml b/templates/Alloy.Mvc/Views/Shared/Header.cshtml
@@ -17,7 +17,7 @@
         <nav class="navbar navbar-expand-lg">
             <div class="container-fluid">
                 <a class="navbar-brand logo" href="@Model.Layout.LogotypeLinkUrl" title="@Model.Layout.Logotype.Title">
-                    @Html.PropertyFor(x => x.Layout.Logotype)
+                    <div epi-property="@Model.Layout.Logotype" />
                 </a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"><i class="bi bi-list"></i></span>

diff --git a/templates/Alloy.Mvc/Views/Shared/Layouts/_Root.cshtml b/templates/Alloy.Mvc/Views/Shared/Layouts/_Root.cshtml
@@ -23,7 +23,7 @@
     <link rel="stylesheet" href="~/css/style.min.css" />
     <link rel="stylesheet" href="~/css/theme.min.css" />
     <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
-    @Html.RequiredClientResources("Header")
+    <required-client-resources area="Header" />
 </head>
 
 <body>
@@ -49,8 +49,7 @@
     {
         await Html.RenderPartialAsync("Footer", Model);
     }
-
-    @Html.RequiredClientResources("Footer")
+    <required-client-resources area="Footer" />
     <script src="~/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
diff --git a/templates/Alloy.Mvc/Views/StandardPage/Index.cshtml b/templates/Alloy.Mvc/Views/StandardPage/Index.cshtml
@@ -1,13 +1,15 @@
-@model PageViewModel<StandardPage>
+@inherits Alloy.Mvc._1.Views.AlloyPageBase<PageViewModel<Alloy.Mvc._1.Models.Pages.StandardPage>>
 
 @{ Layout = "~/Views/Shared/Layouts/_LeftNavigation.cshtml"; }
 
 <div class="content">
-    <h1 @Html.EditAttributes(x => x.CurrentPage.PageName)>@Model.CurrentPage.PageName</h1>
-    <p class="lead" @Html.EditAttributes(x => x.CurrentPage.MetaDescription)>@Model.CurrentPage.MetaDescription</p>
+    <h1 epi-property="@Model.CurrentPage.PageName">@Model.CurrentPage.PageName</h1>
+    <p class="lead" epi-property="@Model.CurrentPage.MetaDescription">@Model.CurrentPage.MetaDescription</p>
     <div class="clearfix">
-        @Html.PropertyFor(m => m.CurrentPage.MainBody)
+        <div epi-property="@Model.CurrentPage.MainBody" />
     </div>
 </div>
 
-@Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row" })
+<div epi-property="@Model.CurrentPage.MainContentArea" class="row">
+    <div epi-property-item class="block" epi-on-item-rendered="OnItemRendered" />
+</div>
diff --git a/templates/Alloy.Mvc/Views/StartPage/Index.cshtml b/templates/Alloy.Mvc/Views/StartPage/Index.cshtml
@@ -1,5 +1,7 @@
-@model PageViewModel<Alloy.Mvc._1.Models.Pages.StartPage>
+@inherits Alloy.Mvc._1.Views.AlloyPageBase<PageViewModel<Alloy.Mvc._1.Models.Pages.StartPage>>
 
 <div class="start">
-    @Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row" })
+    <div epi-property="@Model.CurrentPage.MainContentArea" class="row">
+        <div epi-property-item class="block" epi-on-item-rendered="OnItemRendered" />
+    </div>
 </div>