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

@model BuildFeed.Models.MetaItemModel
@{
   ViewBag.Title = string.Format("Add metadata for {0} | BuildFeed", Model.Id.Value);
}

<h2>@string.Format("Add metadata for {0}", Model.Id.Value)</h2>


@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, htmlAttributes: new { @class = "control-label col-sm-2" })
         <div class="col-sm-10">
            <div class="row">
               <div class="col-sm-8">
                  @Html.TextAreaFor(model => model.MetaDescription, new { @class = "form-control", rows = "2" })
               </div>
            </div>
            <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 col-sm-2" })
         <div class="col-sm-10">
            <div class="row">
               <div class="col-sm-8">
                  @Html.TextAreaFor(model => model.PageContent, new { @class = "form-control" })
               </div>
            </div>
            <div class="help-block">
               @Html.ValidationMessageFor(model => model.PageContent)
            </div>
         </div>
      </div>

      <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" value="Add metadata" class="btn btn-primary" />
         </div>
      </div>
   </div>
}

@section Scripts
{
   <script src="~/Scripts/trumbowyg/trumbowyg.min.js" type="text/javascript"></script>
   <link href="~/Scripts/trumbowyg/ui/trumbowyg.min.css" rel="stylesheet" type="text/css" />

   @Scripts.Render("~/bundles/jqueryval")

   <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>
}