Razor ideas

Helpers.cs

[TagHelper("@form")]
public static TagBuilder FormTagHelper(this RazorPage page, TagBuilder element, string action, string controller, IDictionary<string, string> route)
{
  element.Attributes["action"] = Url.Action(action, controller, route);
  
  // Could implicitly write out anti-forgery token as nested hidden input field here too
}

[TagHelper("@label")]
public static TagBuilder LabelTagHelper(this RazorPage page, TagBuilder element, string name, string @class)
{
  if (element.InnerHtml = string.Empty)
  {
    element.SetInnerText(page.ModelMetadata.GetMetadataForProperty(name).DisplayName);
  }

  if (@class == null)
  {
    element.Attributes["class"] = "default-label-class";
  }

  return element;
}

[TagHelper("@input")]
public static TagBuilder InputTagHelper(this RazorPage page, TagBuilder element, string type, [InputType(ModelPropertyName)] string name)
{
  if (type != null)
  {
    element.Attributes["type"] = page.ModelMetadata.GetInputTypeForProperty(name);
  }
  
  if (value == null)
  {
    elements.Attributes["value"] = ...;
  }
  
  // Add validation attributes based on model metadata
  // elements.Attributes["ng-*"] = ...;
  
  return element;
}

[TagHelper("*")]
public static TagBuilder UrlAttributesTagHelper(this RazorPage page, TagBuilder element)
{
  if (element.TagName == "script")
  {
    var src = element.Attributes["src"];
    if (src != null && src.StartsWith("~"))
    {
      element.Attributes["src"] = Url.Content(src);
    }
  }
  
  return element;
}

Login.cshtml

@model MvcMusicStore.Models.LoginViewModel

@{
    ViewBag.Title = "Log in";
    ViewBag.ngApp = "MusicStore";
}

@section NavBarItems {

    <li genre-menu></li>

}

<h2>@ViewBag.Title.</h2>

<div class="row">
    <div class="col-md-8">
      <section id="loginForm">
        <@form action="Login" controller="Account" method="post" route-return-url="ViewBag.ReturnUrl" class="form-horizontal" role="form">
          <@input type="hidden" name="AntiForgeryToken" />
          @* <@input type="hidden" anti-forgery-token /> *@
          @* <@anti-forgerty-token /> *@
              
          <h4>Use a local account to log in.</h4>
          <hr />
              
          <@validation-summary exclude-property-errors="true" />
              
          <div class="form-group">
            <@label for="UserName" class="col-md-2 control-label"></@label>
            <div class="col-md-10">
              <@input name="FirstName" class="form-control" />
              <@span validation-message-for="UserName"></@span>
            </div>
          </div>
          
          @* Outputs
          <div class="form-group">
            <label for="UserName" class="col-md-2 control-label">User name:</label>
            <div class="col-md-10">
                <input name="UserName" id="UserName" type="text" class="form-control" ng-required="true" value="Current value" />
                <span ng-show=""></span>
            </div>
          </div>
          *@
          
          <div class="form-group">
            <@label for="Password" class="col-md-2 control-label"></@label>
            <div class="col-md-10">
              <@input name="Password" type="password" class="form-control" />
              <@span validation-message-for="Password"></@span>
            </div>
          </div>
          
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <div class="checkbox">
                  <@input name="RememberMe" type="checkbox" />
                  <@label for="RememberMe"></@label>
                  </div>
              </div>
          </div>
          
          <div class="form-group">
              <div class="col-md-offset-2 col-md-10">
                  <input type="submit" value="Log in" class="btn btn-default" />
              </div>
          </div>
          
          <p>
            <@a action="Register">Register</@a> if you don't have a local account.
          </p>
        </@form>
      </section>
    </div>
    <div class="col-md-4">
        <section id="socialLoginForm">
          <@partial name="_ExternalLoginsListPartial" model-action="ExternalLogin" model-return-url="@ViewBag.ReturnUrl" />
        </section>
    </div>
</div>

@section Scripts {

<script src="~/js/angular.js"></script>
<script src="~/js/angular-route.js"></script>
@* TODO: This is currently all the compiled TypeScript, non-minified. Need to explore options
    for alternate loading schemes, e.g. AMD loader of individual modules, min vs. non-min, etc. *@
<script src="~/js/site.js"></script>

}

other-ideas.cshtml

<@sidebar caption="Awesome Sidebar">
  <@item each="var tweet in Tweets"></@item>
</@sidebar>

<@select model="State" append="true">
  <option value="">-- select --</option>
</@select>

<@inline-data controller="Foo" method="GetData"></@inline-data>

<@grid></@grid>