Add jQuery DataTables grid to an ASP.NET Core MVC web application

ASP.NET does not provide sortable, searchable tables. jQuery DataTables is a popular way to display user-friendly data in an ASP.NET Core MVC web application.

Set up the environment

  1. Add the System.Linq.Dynamic.Core NuGet package to the web application
  2. Add the JsonOptions to the Startup.cs file
     using Newtonsoft.Json.Serialization;
  3. Add the AddJsonOptions to the services.AddMvc() section in the ConfigureServices() method of the Startup.cs file
     .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());

Add the jQuery DataTables grid to the view

  1. Add the script and css references to the bottom of the view
    @section Scripts {
    	<!-- For the DataTables grid -->
    	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    	<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    
    	<!-- Page-specific script -->
    	<script src="~/js/MY-CONTROLLER_MY-PAGE.js" asp-append-version="true"></script>
    }
  2. Add to the page-specific MY-CONTROLLER_MY-PAGE.js file to the wwwroot\js directory
    $(document).ready(function () {
    
      // Set up the DataTable grid
      $('#serverTable').DataTable();
    
    });
  3. Create a table with the same id referenced in the script
    @if (null != Model.ServerList) {
      <table id="serverTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            ...
          </tr>
        </thead>
        <tbody>
          @foreach (ServerInstance instance in Model.ServerList) {
            <tr>
              <td><input type="checkbox" asp-for="@instance.Selected" /></td>
              <td>@instance.NameTag</td>
              ...
            </tr>
          }
        </tbody>
      </table>
    }

 

Error unprotecting the session cookie in an ASP.NET Core MVC application.

The new ASP.NET Core MVC framework automatically displays a message for the user to accept the application’s privacy policy. The default message is “Use this space to summarize your privacy and cookie use policy.” No cookies are saved in the user’s browser until they click the Accept button.

Even after accepting the terms, if the browser contains old, stale cookies the application may not be able to save cookies. The log contains

warn: Microsoft.AspNetCore.Session.SessionMiddleware[7]
Error unprotecting the session cookie.
System.Security.Cryptography.CryptographicException: The key … was not found in the key ring.

If the web application works in a new incognito window, clear the old cookies in your browser.

In Google Chrome

  1. In the Chrome menu select Clear Browsing Data
  2. On the Clear browsing data page select All time, and Cookies and other site data

 

 

Set the environment for an ASP.NET Core MVC web application

When the ASP.NET Core MVC web application starts, reads the name of the environment for an environment variable of the host computer. The compiled application contains the configuration for all supported environments, making possible to build and deploy the same artifact in every environment.

If the ASPNETCORE_ENVIRONMENT environment variable is not defined, the Production environment settings are loaded.

In Visual Studio the web application project sets the value on the Debug tab.

To set the environment on the server

Windows

To set the value globally that is preserved after restart

Command prompt

  1. Open the command prompt window and execute
    setx ASPNETCORE_ENVIRONMENT Development /M

PowerShell

  1. Open a PowerShell window and execute
    [Environment]::SetEnvironmentVariable("ASPNETCORE_ENVIRONMENT", "Development", "Machine")

macOS

  1. Add to the .bashrc or .bash_profile file
    export ASPNETCORE_ENVIRONMENT=Development

 

Configure the ASP.NET Core MVC web application

Create the environment-specific appsettings.json files

  1. In the web application project click the arrow next to the appsettings.json file to reveal the Development configuration file
  2. Right-click the appsettings.Development.json file and select Copy

  3. Right click the web application project and select Paste

  4. Rename the appsettings – Copy.Development.json file to appsettings.Production.json

  5. The file will automatically move under the appsettings.json file

Edit the configuration files

  1. Open the appsettings.Production.json file and add the connection string
    {
        "ConnectionStrings": {
            "DefaultConnection": "Server=MY_DATABASE_URL;Database=MY_DATABASE_NAME;Username=MY_USERNAME;Password=MY_PASSWORD"
        }
    }
    
    

 

Enable .NET Core Entity Framework Linq query execution

When we create a new .NET Core class it only contains the using System; reference.

To enable Linq database queries in a .NET Core project, add using System.Linq;

using System;
using System.Linq;

To enable the usage of .Include() in the Linq queries, add

using Microsoft.EntityFrameworkCore;

 

Return values to the controller in the model from the ASP.NET MVC view

When we create an ASP.NET MVC web application, the model (an object) is the easiest way to return values from the view to the controller.

For the view to be able to return the values in the model, make sure the model contains properties, not fields, for every value with { get; set; }

public class MyViewModel
{
    public string ID { get; set; }
}

Add the model to the view at the top of the .cshtml file

IMPORTANT!!! To return values for properties that do not have controls on the page, like IDs that are not displayed, add a hidden field to the view.

@model MyViewModel
<form  asp-action="Index" asp-controller="My">
    <input asp-for=@Model.ID type="hidden" >
</form>

Send the data in the model to the view from the get method in the controller

public class MyController : Controller
{
    public IActionResult Index()
    {
         MyViewModel model = new MyViewModel();
         model.ID = "MY_ID";
         return View(model);
    }
}

Read the value from the model in the post method of the controller and send the model back

public class MyController : Controller
{
    [HttpPost, ValidateAntiForgeryToken]
    public IActionResult Index(MyViewModel model)
    {
        string ID = model.ID;
...
        return View(model);
    }
}

 

Reverse engineer a database with AspNetCore in Visual Studio

For some reason the .NETCore designers did not think, that developers want to follow best practices by separating the data layer from the presentation layer.

The Entity framework out of the box only works if the database is accessed from the main application project.

When we try to reverse engineer a PostgreSQL database from a class library with the command:

cd MY_CLASS_LIBRARY_DIRECTORY
dotnet ef dbcontext scaffold "Host=localhost;Database=MY_DATABASE_NAME;Username=MY_USERNAME;Password=MY_PASSWORD" Npgsql.EntityFrameworkCore.PostgreSQL

we get the error message:

The specified framework version ‘2.1’ could not be parsed
The specified framework ‘Microsoft.NETCore.App’, version ‘2.1’ was not found.
– Check application dependencies and target a framework version installed at:
/usr/local/share/dotnet/
– Installing .NET Core prerequisites might help resolve this problem:
http://go.microsoft.com/fwlink/?LinkID=798306&clcid=0x409
– The .NET Core framework and SDK can be installed from:
https://aka.ms/dotnet-download
– The following versions are installed:
2.0.0 at [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
2.1.2 at [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
2.1.3 at [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]

The problem is, that the …runtimeconfig.json files are only automatically generated in the bin/netcoreapp2.1 directory of the main application project, those are missing from all class libraries.

To enable the automatic generation of the …runtimeconfig.json files, add a line to the <PropertyGroup> section of the data layer class library project (.csproj) file.

<PropertyGroup>
...
<GenerateRuntimeConfigurationFiles>True</GenerateRuntimeConfigurationFiles>
...
</PropertyGroup>

 

Procedure or function ‘`…_Insert`’ cannot be found in database …

When you use the Microsoft .NET Entity framework to access a MySql database, the autogenerated code throws an error when you try to insert a row into the database with

context.MY_TABLE.Add(MY_OBJECT);

Server Error in ‘/’ Application.
Procedure or function ‘`…_Insert`’ cannot be found in database ‘`…`’.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: MySql.Data.MySqlClient.MySqlException: Procedure or function ‘`…_Insert`’ cannot be found in database ‘`…`’.

The auto-generated class tries to use stored procedures to update the database. To use the Entity Framework Linq commands, comment out the line that contains “MapToStoredProcedures”

 protected override void OnModelCreating(DbModelBuilder modelBuilder)
 {
     base.OnModelCreating(modelBuilder);
     // modelBuilder.Entity<twitter_keywords>().MapToStoredProcedures();
 }

 

 

No connection string named ‘…’ could be found in the application config file.

Two-tier applications separate the presentation layer and the data layer, and all database access related objects are located in the data-tier.

When the application runs, the config file of the main project is read. In web applications, it is the web.config, in console applications the app.config file.

When you get the following runtime exception

Exception thrown: ‘System.InvalidOperationException’ in EntityFramework.dll
An exception of type ‘System.InvalidOperationException’ occurred in EntityFramework.dll but was not handled in user code
No connection string named ‘…Entities’ could be found in the application config file.

 

  1. Copy the connection string from the app.config file of the data-tier to the main project’s config file.
 <add name="USC_SocialMediaMSSQLEntities" connectionString="metadata=res://*/USC_SocialMedia_MSSQL.csdl|res://*/USC_SocialMedia_MSSQL.ssdl|res://*/USC_SocialMedia_MSSQL.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=MY_SERVER;initial catalog=MY_DATABASE;user id=MY_USER;password=MY_PASWORD;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

2. This is a sample data access class in the data-layer to read data from the aspNetRoles table.

using System.Data.Entity;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SocialMedia_Data {
	public class SocialMediaData {

		private USC_SocialMediaMSSQLEntities _web;

		public SocialMediaData() {

			// Set up the database connections
			_web = new USC_SocialMediaMSSQLEntities();

		}

		/// Returns the list of Roles
		public List GetRoles() {

			IEnumerable foundRoles = from aspNetRoles in _web.AspNetRoles
						 orderby aspNetRoles.DisplayOrder
						 select aspNetRoles;

			if (null == foundRoles || 0 == foundRoles.Count()) {
				return null;
			}

			return foundRoles.ToList();

		}
	}
}

The given assembly name or codebase was invalid. (Exception from HRESULT: 0x80131047)

When I made changes to the web.config file of an ASP.Net C# application, I have accidentally deleted a comma, and I started to get the runtime error message:

The given assembly name or codebase was invalid. (Exception from HRESULT: 0x80131047)

Make sure all necessary commas are there in the config files, Visual Studio does not check the format of those lines. In my case, the error was in

<provider invariantName="MySql.Data.MySqlClient" type="MySql.Data.MySqlClient.MySqlProviderServices, MySql.Data.Entity.EF6, Version=6.9.10.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d" />

Connect to a MySQL database from Visual Studio 2017

As of today weI can connect to a MySQL database, but cannot generate the Entity Data Model from a MySQL database in Visual Studio 2017

To access a MySQL database from Visual Studio 2017

IMPORTANT: First install MySQL for Visual Studio, and after that install MySQL Connector/Net.

If MySQL Connector/Net is already installed on your workstation, uninstall it before installing MySQL for Visual Studio and reinstall MySQL Connector/Net.

Install MySQL for Visual Studio

Available version information is at https://dev.mysql.com/doc/visual-studio/en/visual-studio-intro.html

  1. Close all instances of Visual Studio,
  2. Download the installer from https://dev.mysql.com/downloads/windows/visualstudio/
  3. Start the installer
  4. Click the Complete button,
  5. If you select Typical, make sure the Visual Studio 2017 components are selected

 

Install the MySql Connector/Net the fully-managed ADO.NET driver for MySQL

  1. Download the installer from https://dev.mysql.com/downloads/connector/net/
  2. Download version 6.9.10, because version 6.10.5 throws the

    Inheritance security rules violated by type: ‘MySql.Data.Entity.MySqlEFConfiguration’. Derived types must either match the security accessibility of the base type or be less accessible

    error. More info at https://stackoverflow.com/questions/47227495/inheritance-security-rules-violated-by-type-mysql-data-entity-mysqlefconfigura

  3. Select version 6.9.10, your operating system and click the Download button
  4. If you don’t want to create an Oracle account, click the No thanks… link
  5. Start the downloaded installer
  6. Click the Complete button

Install the NuGet packages

Make sure to install the same version of the NuGet packages as the MySql Connector/Net