BuildFeed/BuildFeed/Areas/admin/Views/meta/create.cshtml

@model BuildFeed.Model.MetaItemModel
@{
   ViewBag.Title = $"Add metadata for {Model.Id.Value} | BuildFeed";
}

<h1>@($"Add metadata for {Model.Id.Value}") </h1>


@using (Html.BeginForm())
{
   @Html.AntiForgeryToken()

   @Html.HiddenFor(model => model.Id.Type)
   @Html.HiddenFor(model => model.Id.Value)

   <div class="form-horizontal">
      <div class="form-group">
         @Html.LabelFor(model => model.MetaDescription, new
         {
            @class = "control-label"
         })
         <div class="wide-group">
            @Html.TextAreaFor(model => model.MetaDescription, new
            {
               @class = "form-control",
               rows = "2"
            })
            <div class="help-block">
               <span id="meta-count">0</span> characters
               @Html.ValidationMessageFor(model => model.MetaDescription)
            </div>
         </div>
      </div>

      <div class="form-group">
         @Html.LabelFor(model => model.PageContent, new
         {
            @class = "control-label"
         })
         <div class="wide-group">
            @Html.TextAreaFor(model => model.PageContent, new
            {
               @class = "form-control"
            })
            <div class="help-block">
               @Html.ValidationMessageFor(model => model.PageContent)
            </div>
         </div>
      </div>

      <div class="form-group">
         <div>
            <input type="submit" value="Add metadata" class="btn btn-primary" />
         </div>
      </div>
   </div>
}

@section Scripts
{
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="~/Scripts/trumbowyg/trumbowyg.min.js" type="text/javascript"></script>
   <link href="~/Scripts/trumbowyg/ui/trumbowyg.min.css" rel="stylesheet" type="text/css" />

   <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
   <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

   <script type="text/javascript">
      function updateMetaCount()
      {
         var count = document.getElementById("@Html.IdFor(model => model.MetaDescription)").value.length;
         $("#meta-count").text(count.toFixed(0));
         if (count === 0)
         {
            $("#meta-count").attr("class", "");
         }
         else if (count < 160)
         {
            $("#meta-count").attr("class", "text-success");
         }
         else
         {
            $("#meta-count").attr("class", "text-danger");
         }
      }

      $(function()
      {
         var btnsGrps = $.trumbowyg.btnsGrps;

         $("#@Html.IdFor(model => model.PageContent)")
            .trumbowyg({
               semantic: true,
               autogrow: true,
               btns: [
                  'viewHTML',
                  '|', 'strong', 'em',
                  '|', 'link',
                  '|', btnsGrps.justify,
                  '|', btnsGrps.lists
               ]
            });

         $("#@Html.IdFor(model => model.MetaDescription)")
            .keyup(function()
            {
               updateMetaCount();
            });

         updateMetaCount();
      });
   </script>
}