WindnTrees CRUDViews and SEO Web Pages


In this tutorial we'll learn developing SEO pages (web pages) alongside dynamic content based on WindnTrees CRUDView and KnockoutJS bindings.

Keywords: windntrees, web, asp .net, asp .net core, CRUD, CRUD2CRUD, CRUDS
  • Strategy

    To achieve tutorial objectives we'll develop (or extend):

    1. Database
    2. New Project ASP .NET Core (MVC)
    3. Data Models and Context
    4. Database Repositories
    5. SEO Models
    6. KnockoutJS Models
    7. KnockoutJS view templates
    8. WindnTrees Script
    9. HTML view

    Setup Database

    Create a new "tutorials" database with "database-script.sql" file in MSSQL 2017 or latest edition.

    New Project and Essentials

    1. Create New ASP .NET Core Web Application (MVC)
    2. Install Packages:
      1. WindnTrees.Core
      2. WindnTrees.CRUDS.Repository.Core
      3. WindnTrees.ICRUDS.Standard
      4. Newtonsoft.Json
      5. Microsoft.AspNetCore.Mvc.NewtonsoftJson
    3. Configure Project for Antiforgery Requests:
      1. Add @Html.AntiForgeryToken() in CRUDView pages
      2. Add services.AddControllersWithViews().AddNewtonsoftJson() line in ConfigureServices method of Startup.cs class

    Data Models and Context

    Write data models based on SQL server database or extend with following nuget package manager console scaffolding script:

    Scaffold-DbContext "Server=.\sqlexpress;Database=tutorials;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -DataAnnotations -OutputDir Models/Database -Tables "Category","Product","Rating","SkillLevel","Topic" -Context ApplicationContext -Force

    Database Repositories

    Develop entity framework based database repositories by extending from WindnTrees EntityRepository with data models and context. Following repositories are required for this tutorial.

    1. CategoryRepository
    2. ProductRepository

    SEO Models

    SEO pages are content ready pages. Additional dynamic content that updates DOM and html view at runtime is not available to search engines when first time page loading. In this example we'll develop SEO data model that may contain static or dynamic data content from multiple data sources alongside knockoutjs javascript models that are needed for loading dynamic DOM content.

    SEO model included is as follows:

    1. ProductViewModel.cs

    KnockoutJS Models

    Write KnockoutJS javascript data models for dynamic content views.

    1. Product.js

  • Knockout View Template

    Develop knockoutjs template views for displaying data from "Product" table in html pages.

    <script type='text/html' id='listitem'>
            <div class='row'>
                <div class='col-sm-12 col-md-12 col-lg-12'>
                    <h4 data-bind='text: Name()'></h4>
                    <p><span class='pr-2'>Year: <span data-bind='text: ProductYear()'></span></span><span class='pr-2'>Category: <span data-bind='text: Category()'></span></span></p>
            <div class='row'>
                <div class='col-sm-12 col-md-12 col-lg-12'>
                    <textarea class='form-control col-12' data-bind='html: Description()' readonly></textarea>
            <div class='row'>
                <div class='col-sm-12 col-md-12 col-lg-12'>
                    <span class='d-flex justify-content-end'>
                        <a class='green p-2' href='#' data-bind='click: function(data, event) { $parent.resetFormForEditing($index); }' data-toggle='modal' data-target='#__form' title='Edit'><i class='fa fa-edit text-success'></i>Edit</a>
                        <a class='red p-2' href='#' data-bind='click: function(data, event) { $parent.delete($data); }' title='Delete'><i class='fa fa-times text-danger'></i>Delete</a>

    Refer project source code for complete template scripts.

    WindnTrees Script

    Script WindnTrees view as following:

    var view = new CRUDView({
                'uri': '/product', //service uri address
                'observer': new CRUDObserver({ 'contentType': new Product({}), 'messages': intialize(new MessageRepository()) }), // observer
                'fields': [ // related list fields that load related results simply
                        'uri': '/category', // server side CRUDController uri address
                        'target': 'List', // CRUDController function that you want to invoke to get list results
                        'field': 'CategoriesList', // CRUDObserver will be extended with Categories list observable (ko.observableArray)
                        'key': 'Title', // key (display) field bound with dropdown list
                        'value': 'Title' // value field bound with dropdown list

    Refer source code for complete script.

    HTML View

    Refer project's index page.


    SEO pages are important for visibility of your content in world wide web. You can easily add dynamic content with SEO pages using WindnTrees scripting and KnockoutJS binding. Download project code here.