Introduction
In this article, you will learn about the DotVVM CRUD application with Entity Framework and Cosmos DB.
What is DotVVM?
DotVVM is an open-source MVVM framework for ASP.Net Core and OWIN and it is a member of the
.NetFoundation. DotVVM is free to use under Apache License but also has commercial extensions.
DotVVM lets you build interactive web UIs with just C# and HTML using the MVVM pattern. DotVVM framework is shipped with many build-in controls like GridView, FileUpload, Validators, and more.
Why DotVVM?
There are many reasons and business scenarios that DotVVM is suitable and very helpful for, such as:
To learn more about DotVVM framework, visit
DotVVM.com.
What is Azure Cosmos DB?
Azure Cosmos DB is a NoSQL distributed and fully managed database service. Azure Cosmos DB provides different API for different NoSQL models like Document databases, Column databases, Graph databases, and Key-Value database.
You can easily migrate your existing database on your prim to Azure Cosmos DB using the Cosmos migration tool.
In this article, we will go through a sample project to demonstrate how it is easy to use the DotVVM framework in building your web application with Azure Cosmos DB as your data store.
Install DotVVM extension
-
Open Visual Studio 2019 (you can use Visual Studio 2017 as well).
-
Open the manage Extension window.
Extensions > Manage Extensions > Online menu
-
In the search box, type DotVVM and click Download.
-
Restart Visual Studio to complete the DotVVM installation.
-
You should find DotVVM in the Extension menu.
To know more about the DotVVM extension visit its page on the Visual Studio
marketplace.
Now you are ready to start coding with the DotVVM framework. DotVVM extension installs a DotVVM sample project which we will use to demonstrate how it is easy to connect to Azure Cosmos DB from a DotVVM application.
DotVVM Web Application
-
Create a new project
In create the new project window, filter project list by DotVVM and select DotVVM Web Application (.NET Core) and click next.
-
Enter “DotVVMCosmos” as your project name, project path, and “DotVVMCosmos” as the solution name. Then click on create.
Project name and solution name can be any value you want.
-
In the “Customize Your DotVVM Project” window, select:
- Bootstrap 3
- No Authentication
- Sample CRUD Page
- .NET Core 3.0 (you can target another .NET core version)
Then click Create Project.
Your project structure will look like the below screenshot:
DotVVM sample project uses the Entity Framework Code First approach and provides:
- Sample entity (Student)
- DbContext class (StudentDbContext)
- Two model classes (StudentDetailModel, StudentListModel)
- CRUD Service class (StudentService): contains all the methods required to do your CRUD operations
Create an Azure Cosmos DB Account
You can use an existing Azure subscription to create the Azure Cosmos DB account. If you don’t have an active Azure subscription, still you can try Azure Cosmos DB for free for 30 days.
- Go to https://azure.microsoft.com/en-us/try/cosmosdb/
- Sign in with your Microsoft account or GitHub account
-
Select SQL API
-
Microsoft will create an Azure Cosmos DB Account for you and the overview page will look like:
-
On the left side menu, click on Keys. From the read-write keys tab, copy URI and Primary Key values and keep it.
Back to our DotVVM project to make the required modification to connect to Azure Cosmos DB.
- Uninstall entity framework SQL Server related NuGet package Microsoft.EntityFrameworkCore.SqlServer and Microsoft.EntityFrameworkCore As we will connect to Azure Cosmos DB, not the SQL Server database
- Install Microsoft.EntityFrameworkCore.Cosmos NuGet package
Open
appsettings.json file and replace its content with the following:
- {
- "AppSettings": {
- "EndPoint": "<your cosmos db uri>",
- "Cosmoskey": "<your cosmos db primary key>",
- "DatabaseName": "DotVVM-Cosmos"
- }
- }
Appsetting.json file contains the default connection string for Local DB, but we will connect to Azure Cosmos DB, so there's no need to keep default connection string in our code.
Open Startup.cs file and replace:
- services.AddEntityFrameworkSqlServer()
- .AddDbContext(options =>
- {
- options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"));
- });
with:
- services.AddEntityFrameworkCosmos()
- .AddDbContext(options =>
- {
- options.UseCosmos(Configuration.GetSection("AppSettings").GetValue("EndPoint"),
- Configuration.GetSection("AppSettings").GetValue("Cosmoskey"),
- databaseName: Configuration.GetSection("AppSettings").GetValue("DatabaseName"));
- });
Here, we tell the .Net to use EntityFramework Cosmos Provider instead of EntityFramework SQL Server provider and adding our StudentDbContext and passing the required option to create a connection with our Cosmos DB instance.
Open DAL/StudentDbContext.cs file and add the following method to StudentDbContext class:
- protected override void OnModelCreating(ModelBuilder modelBuilder)
- {
- modelBuilder.HasDefaultContainer("Students");
- modelBuilder.Entity().ToContainer("Students");
- }
In the first line, we set the default Cosmos DB Container to be “Students”. In the second line, we map the Student entity to Students Container. If we have other entities we need to map them to the corresponding container as well.
-
Run your application. If there is no error, you will see the following page in your browser:
-
Click on New Item, fill the form, then click Add.
-
Congratulations! You added your student to the Student Cosmos DB container!
-
Go to your Cosmos DB web page and open Data Explorer. It should look like the screenshot below:
Summary
In this article, we demonstrated how to create a sample DotVVM web application and connect it to an Azure Cosmos DB NoSQL database, then perform CRUD operations as we used to do with a SQL Server database or any other relational database. We have done a few changes in the sample project code to twist it from using Entity Framework Code First approach (SQL Server) to use Entity Framework Code First approach (Cosmos DB).
You can find the complete source code on
Github.