[GREENDOC] Razor Templating

DatasetListing.cshtml

<!-- File located in Kaggle.Web project under Views/Datasets/Listing -->
<!-- Template extends default layout which has basic HTML scaffold -->
@model DatasetListingDto

@{ PageTitle = "Kaggle | Datasets Listing" }
@section HeadTags {
  <meta name="twitter:card" content="summary" />
  ...
}

<script>
  @{ var dto = JsonDto.Encode(Model) }
  window.__INIT_STATE__ = @dto;
</script>

@{ var scriptSrc = KaggleComponents.CreateScriptSrc(/* team */ "datasets", /* page */ "listing") }
<script src="@scriptSrc"></script>

ExampleRoute.cs

[Route("datasets")]
public async Task<ActionResult> ViewDatasetListing() {
  if (/*user is auth'd*/) {
    var dto = DatasetsClient.GetListingDto();
    return View("DatasetsListing", dto);
  } else {
    return PageNotFound();
  }
}

index.tsx

// File located in @kaggle/web package under src/datasets/pages/listing

import { render } from 'react-dom';
import { PageScaffold } from '../../../design/components/PageScaffold';
import { ListingApp } from '../../components/ListingApp';

ReactDOM.render(
  <ListingApp {...window.__INIT_STATE__} />
  document.getElementById("root")
);