Documentation Center

Creating a View Model and View (.NET)

To render a new HTML element in your Web site, create a corresponding MVC View Model and View. A View Model is a simple class to represent the content you want to display and the View defines the HTML layout of this content

Procedure

  1. Create the View Model:

    A View Model is a simple class to represent the content you want to display. The class has strongly typed properties to enable you to easily refer to them in your View.

    Create a class SpecialOffer.cs within the Models folder of your Area, for example:
    using System;
    using Sdl.Web.Common.Models;
    
    namespace Example.Models
    {
        public class SpecialOffer : EntityModel
        {
            public string Headline{ get; set; }
            public Image Image { get; set; }
            public string Description { get; set; }
            public string Link {get;set;}
            public DateTime? ExpiryDate { get; set; }
        }
    }
  2. Creating the View:

    Define a View to render the View Model. Create a view SpecialOffer.cshtml in an Entity subfolder of the Views folder in your Area.

    Razor View Example
    @model Example.Models.SpecialOfferModel
    
    <div class="container-fluid">
        <div id="location-tile" class="row">
            <div class="col-sm-6">
                @Html.Media(Model.Image, "100%", 1)
            </div>
            <div class="col-sm-6">
                <div class="tile">
                    <h1>@Model.Headline</h1>
                    <p>@Model.Description</p>
                    <a href="@Model.Link" class="btn btn-primary">More info</a>
                    <br />
                    <p class="meta small">Valid until @Html.Date(Model.ExpiryDate)</p>
                </div>
            </div>
        </div>
    </div>
  3. Add Semantics to the View and the View Model:

    You need to add semantics to your rendered output. Semantics enable Editors to edit the content inline in Experience Manager and make the content understandable by search engines when they index your content.

    Add semantics to the View using the @Markup helper Entity and Property Methods:
    Razor View with Semantics
    @model Example.Models.SpecialOfferModel
    
    <div class="container-fluid @Model.HtmlClasses" @Html.DxaEntityMarkup()>
        <div id="location-tile" class="row">
            @if (Model.Image != null)
            {
                <div class="col-sm-6" @Html.DxaPropertyMarkup(() => Model.Image)>
                    @Html.Media(Model.Image, "100%", 1)
                </div>
            }
            <div class="col-sm-6">
                <div class="tile">
                    <h1 @Html.DxaPropertyMarkup(() => Model.Headline)>@Model.Headline</h1>
                    <p @Html.DxaPropertyMarkup(() => Model.Description)>@Model.Description</p>
                    <a href="@Model.Link" class="btn btn-primary" @Html.DxaPropertyMarkup(() => Model.Link)>More info</a>
                    <br />
                    <p class="meta small">Valid until <span @Html.DxaPropertyMarkup(() => Model.ExpiryDate)>@Html.Date(Model.ExpiryDate)</span></p>
                </div>
            </div>
        </div>
    </div>
    Add semantics to the View Model using the SemanticEntity and SemanticProperty attributes. The example uses the Schema.org vocabulary to define the SpecialOffer model as a schema.org Offer and provides corresponding semantic meaning to the properties from the schema.org definition of an Offer:
    using System;
    using Sdl.Web.Common.Models;
    
    namespace Example.Models
    {
        [SemanticEntity(Vocab = "http://schema.org", EntityName = "Offer", Prefix = "s", Public = true)]
        public class SpecialOfferModel : EntityModel
        {
            [SemanticProperty("s:name")]
            public string Headline { get; set; }
            [SemanticProperty("s:image")]
            public Image Image { get; set; }
            [SemanticProperty("s:description")]
            public string Description { get; set; }
            [SemanticProperty("s:url")]
            public string Link { get; set; }
            [SemanticProperty("s:validThrough")]
            public DateTime? ExpiryDate { get; set; }
        }
    }

Results

Using these annotations on your View Model results in the View rendering the following semantic markup which search engines—and other machines—can understand and interpret as an Offer rather than a meaningless block of HTML:
<div class="container-fluid" prefix="s: http://schema.org" typeof="s:Offer">
    <div id="location-tile" class="row">
        <div class="col-sm-6" property="s:image">
            <img alt="Balloons" src="/media/balloons.jpg" width="100%">
        </div>
        <div class="col-sm-6">
            <div class="tile">
                <h1 property="s:name">Win a holiday to Brazil!</h1>
                <p property="s:description">Enter this competition to win a once in a lifetime trip to Brazil!</p>
                <a class="btn btn-primary" property="s:url" href="/offers/win-brazil-holiday">More info</a>
                <br>
                <p class="meta small">Valid until <span property="s:validThrough">Wednesday, July 9, 2016</span></p>
            </div>
        </div>
    </div>
</div>

What to do next

In order to test your new View and View Model, the next step is to create items in the Content Manager and Publish the Offer content.