Forem: Amir Ismail

DotVVM Controls : GridView

Amir Ismail — Wed, 22 Jul 2020 22:06:46 +0000

GridView control in DotVVM is very similar to what we used to use in our legacy web forms applications. When you run your DotVVM application, it is getting rendered as a classic HTML table.

In DotVVM, you can bind your GridView control by setting DataSource property to IEnumerable<T> or GridViewDataSet<T> object. GridView Control in DotVVM supports inline editing, sorting and defining your column template.

Simple GridView

Suppose we want to display a list of students.

public class Student
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime EnrollmentDate { get; set; }
}

in ViewModel class

public List<Student> Students { get; set; }

in dothtml file

<dot:GridView DataSource="{value: Students}" class="page-grid">
    <Columns>
         <dot:GridViewTextColumn ValueBinding="{value: FirstName}" HeaderText="First Name" />
         <dot:GridViewTextColumn ValueBinding="{value: LastName}" HeaderText="Last Name" />
         <dot:GridViewTextColumn ValueBinding="{value: EnrollmentDate}" HeaderText="Enrollment Date" />
    </Columns>
</dot:GridView>

we used GridViewTextColumn for all fields and used ValueBinding attribute to specify which property is going to be rendered in that column.

By Default DotVVM is getting the string representation of the specified value and render it.

FormatString

To specify a specific format for the rendered value, we can do that by setting FormatString of the target column. DotVVM is supporting most of .Net format strings

<dot:GridViewTextColumn ValueBinding="{value: EnrollmentDate}" 
 FormatString="yyyy-MM-dd" 
 HeaderText="Enrollment Date" />

Inline Editing

In the past when we tried to implement inline editing for a GridView in web forms application we had had to write many lines of code and implement Edit event but in DotVVM it pretty easy to implement it with only one limitation, your data source should be of type GridViewDataSet<T>. IEnumerable<T> is not supported for inline editing.

In ViewModel class change the Students property type and Set RowEditOptions.PrimaryKeyPropertyName to your list unique key(in our case is Id).

public GridViewDataSet<Student> Students { get; set; } = new GridViewDataSet<StudentListModel>()
   {
      RowEditOptions = { PrimaryKeyPropertyName = "Id" }
   };

In PreRender method populate your GridViewDataSet<Student>

public override async Task PreRender()
{
     if (Students.IsRefreshRequired)
     {
         var queryable = await _studentService.GetAllStudentsAsync();
         Students.LoadFromQueryable(queryable.AsQueryable());
     }
     await base.PreRender();
}

in dothtml file, set InlineEditing attribute of your GridView to true. By default DotVVM is allowing all columns to be editable. If you want to prevent a specific column to be edited you need to set its IsEditable attribute to false

<dot:GridView DataSource="{value: Students}" class="page-grid" InlineEditing="true">
  <Columns>
    <dot:GridViewTextColumn ValueBinding="{value: FirstName}" HeaderText="First Name" />
    <dot:GridViewTextColumn ValueBinding="{value: LastName}" HeaderText="Last Name" />
    <dot:GridViewTextColumn ValueBinding="{value: EnrollmentDate}"
       IsEditable="false"
       HeaderText="Enrollment Date" FormatString="yyyy-MM-dd" />
    <dot:GridViewTemplateColumn>
        <ContentTemplate>
           <dot:Button class Text="Edit" Click="{command: _parent.Edit(_this)}" />
        </ContentTemplate>
        <EditTemplate>
           <dot:Button Text="Save" Click="{command: _parent.Update(_this)}" />
           <dot:Button Text="Cancel" Click="{command: _parent.Cancel()}" />
        </EditTemplate>
    </dot:GridViewTemplateColumn>
  </Columns>  
</dot:GridView>

We added aGridViewTemplateColumn and specified its ContentTemplate which will be rendered in normal display

and EditTemplate which will be rendered when we click Edit button

_parent is instance of your model object and _this which is passed to Edit and Update Methods is the corresponding item in GridView data source.

in ModelView class we need to add the commands (normal c# method) that will be executed when the user click on Edit, Save, and cancel buttons.

public void Edit(Student student)
{
     Students.RowEditOptions.EditRowId = student.Id;
}
public void Cancel()
{
     Students.RowEditOptions.EditRowId = null;
     Students.RequestRefresh();
}
public void Update(StudentListModel model)
{
     // code for updating your datastore
     .....
     Students.RowEditOptions.EditRowId = null;
}

When you do inline editing, DotVVM does't refresh the whole page, but it do it via ajax calls.

Nested GridViews

Suppose we want to display student grades in the same row besides his Name. to achieve this, the Student Object should contains a property if type GridViewDataSet for grades List. Then in Prerender() method populate that property for each Student object.

public override async Task PreRender()
{
     if (Students.IsRefreshRequired)
     {
         var queryable = await _studentService.GetAllStudentsAsync();
         queryable.ForEach(x =>
         {
             x.Grades = new GridViewDataSet<Grade>()
             {
                RowEditOptions = { PrimaryKeyPropertyName = "GradeId" }
             };                 
             x.Grades.LoadFromQueryable(x.StudentGrades.AsQueryable());
         });
         Students.LoadFromQueryable(queryable.AsQueryable());
     }
     await base.PreRender();
}

in dothtml file will add a new GridViewTemplateColumn for the inner GridView

<dot:GridViewTemplateColumn HeaderText="Grades" IsEditable="false">
     <dot:GridView DataSource="{value: Grades}" class="page-grid">
          <Columns>
              <dot:GridViewTextColumn ValueBinding="{value: Subject}" HeaderText="Subject" />
              <dot:GridViewTextColumn ValueBinding="{value: Month}" HeaderText="Month" />
              <dot:GridViewTextColumn ValueBinding="{value: Score}" HeaderText="Score" />                            
          </Columns>
     </dot:GridView>
</dot:GridViewTemplateColumn>

Summary

In this article we demonstrated how to use DotVVM GridView control and how it is pretty easy to bind your collection to it, enable inline editing without re-loading the whole page and how to render nested GridViews with few line of code.

Build Azure Pipeline to your DotVVM application

Amir Ismail — Mon, 25 May 2020 15:20:48 +0000

What is CI/CD?

Continuous integration (CI) and continuous delivery (CD) embody a culture, set of operating principles, and collection of practices that enable application development teams to deliver code changes more frequently and reliably. The implementation is also known as the CI/CD pipeline.
src : https://www.infoworld.com/article/3271126/what-is-cicd-continuous-integration-and-continuous-delivery-explained.html

Azure Pipeline for DevOps

Azure Pipelines is a continuous delivery tool, designed to build code in popular languages, test them, and then deliver them to your choice of endpoint. Like other CI/CD systems, it’s also extensible, with a library of tasks and extensions to add support for test tool and for integration with your devops tool chain.
src : https://www.infoworld.com/article/3305845/how-to-work-with-azure-pipelines-for-devops.html.

DotVVM CI/CD Pipeline

In this article we will go through steps required to enable CI/CD to your DotVVM web application.

To keep it short and focus on CI/CD pipeline we will not show steps required to create DevOps project on Azure DevOps. If you want to know more you can try this Lab.

Go to devops.azure.com and login.
Open your devops project and go to Pipelines then click on Create Pipeline
Select where to connect to get your code. Here I host my DotVVM application on Azrue Repos Git.
Azure displays all available repositories in selected host. Select your DotVVM repository.
once you select your target repository, Azure pipeline will go to configure your pipeline step where you select your application type. If the target application type is not listed click in show more button.
For your DotVVM application you can select ASP.NET Core (.Net Framework)
In review step, Azure displays your pipeline in YAML format. You can edit if you want manually or click on show assistant in upper right corner to select the tasks you want to to add to your pipeline.
From task list, select .Net Core task to publish your DotVVM web application.
- Command : publish
- Publish web project : checked
- Zip published projects : checked
- Add project's folder name to publish path : checked
From Task list select Azure App Service Deploy task to deploy your DotVVM to azure app service with the following configuration
- Connection Type : Azure Resource Manager
- Azure subscription : select one from your available subscriptions
- App Service type : Web App on Windows
- App Service name : select your target App service from App services available in selected subscription. If the list is empty you have to create App service first before creating your pipeline. Then click Add button to add this task to your pipeline.
Click Save and run to save your pipeline for future updates and run it immediately. If you don't want to run it, just click on down arrow and click save.
Azure will commit this pipeline to your master branch or you can create a separate branch for this commit.

Now your pipeline is configured and ready to run and deploy your DotVVM application to target Azure App service. After each push you do to master branch of your repository your azure pipeline will be triggered and deploy a new version of your DotVVM application .

Summary

In this article we showed a simple way to configure an Azure Pipeline to enable CI/CD for your DotVVM application to be deployed to a specified Azure App Service.

DotVVM:Build Conditional Validation Attribute

Amir Ismail — Sun, 26 Apr 2020 01:32:28 +0000

Validation in DotVVM

Validation in DotVVM is very similar to validation in ASP.Net MVC and ASP.Net Core.
You can validate your view model by using validation attributes. DotVVM do client side validation for only the following attributes

Required
Compare
EmailAddress
Range
RegularExporession

If the user input is not valid you have two controls you can use to show error messages

Validator Control : shows error message against the target input control
VaicationSummary Control: shows the summary for all errors in your view model.

Straight Validation

Suppose we have a small registaration form that requires the user to enter his/her name, gender, and age. All fields are required. To validate user's input we just need to annotate our viewmodel properties with Required attribute. Our ViewModel class will be like

[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }

public string Gender { get; set; }

[Required(ErrorMessage = "Age is required")]
public int? Age { get; set; }

In our view we will use only Validator control to show error messages.

<dot:Literal class="control-label col-md-3" Text="Name"></dot:Literal>
<dot:TextBox Text="{value: Name}" class="form-control" Type="Normal"></dot:TextBox>
<dot:Validator HideWhenValid="true" Value="{value: Name}" ShowErrorMessageText="true"></dot:Validator>
<br /><br />
<dot:Literal class="control-label col-md-3" Text="Gender"></dot:Literal>
<dot:RadioButton CheckedItem="{value: Gender}" CheckedValue="{value: "1"}" Text="Male"></dot:RadioButton>
<dot:RadioButton CheckedItem="{value: Gender}" CheckedValue="{value: "2"}" Text="Female"></dot:RadioButton>
<br /><br />
<dot:Literal class="control-label col-md-3" Text="Age"></dot:Literal>
<dot:TextBox Text="{value: Age}" class="form-control" Type="Number"></dot:TextBox>
<dot:Validator HideWhenValid="true" Value="{value: Age}" ShowErrorMessageText="true"></dot:Validator>
<br /><br />
<dot:Button Click="{command: Save()}" Text="Save" class="btn btn-outline-secondary btn-sm"></dot:Button>

Foucs on validator control we set

HideWhenValid to true to show error message only if the user's input is not valid
ShowErrorMessageText to true to show error message that comes from our ViewModel

Conditional Validation

We know women don't like to tell their real age so we want to respect this in our registeration form by validating the age feild only if the user selected male as his gender but if gender was female will not force her to enter her age.

In DotVVM there is no conditional Required validation, so we need to build our custom validation attribute.
What we actually need is just a new class that inherts ValidationAttribute class and override IsValid method with our logic.

public class RequiredIfAttribute : ValidationAttribute
{
    public string PropertyName { get; set; }
    public object Value { get; set; }

    public RequiredIfAttribute(string propertyName, object value, string errorMessage = "")
    {
        PropertyName = propertyName;
        ErrorMessage = errorMessage;
        Value = value;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var instance = validationContext.ObjectInstance;
        var type = instance.GetType();
        var proprtyvalue = type.GetProperty(PropertyName).GetValue(instance, null);
        if (proprtyvalue.ToString() == Value.ToString() && value == null)
        {
            return new ValidationResult(ErrorMessage);
        }
        return ValidationResult.Success;
    }
}

First we added a PropertyName property to check its value to start validation of skip it and Value property that will check against it.
Inside IsValid() method we are using reflection to get that value of the property and check if its value is equal to the provided value in the attribute and the value of the current field is null then the field value is not valid otherwise the field is not required.

In our ViewModel we will replace Required attribute that decorate Age property with our new custom attribute RequiredIf.

 [RequiredIf(nameof(Gender), "1", ErrorMessage = "Age is required")]
 public int? Age { get; set; }

Frist parameter is the PropertyName and second paramter is the Value of the Gender that makes Age field is required (I used 1 and 2 for simpilcity).

Restriction

Our custom validation is server side validation. DotVVM need you to submit your form to be able to run your custom validation.

Summary

In this post we validated our ViewModel like we used to do in ASP.Net MVC or ASP.Net Core and also created our custom validation to validate fields based on another field value.
You can find the full source code on github.

Build Single Page Application with DotVVM

Amir Ismail — Thu, 23 Apr 2020 02:22:30 +0000

Single Page Application (SPA)

In an SPA your web application is divided into components(pages) and each component has its own route(URL). You can navigate between pages using normal links as you used to do in traditional web pages.

In an SPA, the entire application runs as a single web page. In this
approach, the presentation layer for the entire application has been
factored out of the server and is managed from within the browser.
source

SPA with DotVVM

To build SPA you have to learn one of JavaScript frameworks/libraries like Angular, React, or Vue.js but with DotVVM you don't need to learn any of them. DotVVM is supporting SPA by just changing main ContentPlaceHolder in your DotVVM master page with SPAContentPlaceHolder and use RouteLink(recommended) control for navigation between your DotVVM pages.

DotVVM load the content pages asynchronously and History API for navigation.

lets try it.

Create new DotVVM web application with sample CRUD pages.
Build and run your application and try to navigate between different pages.
- You will notice your browser is loading each page.
Open Views/MasterPage.dotmaster file and find

<dot:ContentPlaceHolder ID="MainContent" />

and replace it with

<dot:SpaContentPlaceHolder ID="MainContent" />

Refresh your page using CTRL+F5
Navigate between your pages again you can notice that your browser is rendering pages without any loading.
View your page source in your browser you will notice that any RouteLink control is rendered with dotvvm.handleSpaNavigation(this); is added to its onclick event.

Restriction

You can NOT use multiple SpaContentPlaceHolder controls in your DotVVM master page.

Summary

In this article we demonstrated how it is pretty easy to build SPA with DotVVM without learning a new framework or library.

DotVVM : Add shortcuts to your buttons and links

Amir Ismail — Wed, 15 Apr 2020 01:27:23 +0000

As developers we used to use shortcuts during writing code. The most famous shortcut for developer and non-developer is CTRL+S for save command, CTRL+C for copy command and CTRL+V for paste command.

If you would like to add command shortcuts to your web application you need to write a massive JavaScript code but with DotVVM it is just a matter of one line in your markup file.

One of available controls in DotVVM Business Pack is CommandShortcut control which is allowing you to assign shortcut keys to commands in your web application. Lets see how we can achieve it.

CommandShortcut Control

it is an invisible DotVVM control lives in DotVVM.BusinessPack.Controls namespace and allows to triggers a command a viewmodel for a key shortcut.

You can create different combinations of shortcut using CTRL, Shift, Alt, and Key properties of CommandShortcut control.

Open your Visual Studio and create new DotVVM Web Application.
In Custom Your DotVVM Project, check DotVVM Business Pack and Sample CRUD Page checkboxes.

Note : You must have a valid license to be able to check DotVVM Business Pack checkbox otherwise it will be disabled.
Open DotVVMStartup.cs and add the below line to ConfigureServices() method if doesn’t exist.
```
options.AddBusinessPack();
```
Build and run your application. In the Home page you will New Item button that we want to create a shortcut key for it.

Open Default.dothtml file you and add the below lines where we add CommandShortcut control and create a new shortcut using CTRL+ALT+N combination.

<bp:CommandShortcut Ctrl="true"   
                Shift="false"  
                Alt="true"  
                Key="N"  
                Command="{command: NewItem()}" />

Open ViewModels/DefaultViewModel.cs file and add NewItem() method that just do nothing but redirects to the CRUD_Create route
```
public void NewItem()  
{  
Context.RedirectToRoute("CRUD_Create");  
}
```
Note: Here we added a new method just for redirecting to CRUD_Create route because RouteLink doesn’t have command property. another work around is replace RouteLink control with Button control.
Build and run your solution
press CTRL+ALT+N to redirect to create view.

Summary

In this article we knew how to create a shortcut key to command using CommandShortcut control which is part of DotVVM Business Pack.

You can find the full code on Github.

DotVVM: upload files using FileUpload control

Amir Ismail — Tue, 07 Apr 2020 15:09:43 +0000

In this post I will show you how it is so easy in DotVVM to upload files to a local folder or even to a blob container in your Azure Storage Account using FileUpload control.

Uploading files to Local storage.

Create Empty DotVVM web project in visual studio.
Open DotvvmStartup.cs file and add the following line to ConfigureServices methods if not exist.

options.AddDefaultTempStorages("temp");

This line is telling DotVVM to set the the default temporary storage to temp folder. Once you try to upload any file DotVVM will create that folder in the root directory of your application.

Open ViewModels/DefaultViewModel file and replace its content with the following code.

using DotVVM.Framework.Controls;
....
namespace DotVVMUploader.ViewModels
{
public class DefaultViewModel : MasterPageViewModel
{
    public string Title { get; set; }
    public UploadedFilesCollection FilesCollection { get; set; }
    public DefaultViewModel()
    {
        Title = "Welcome to upload files sample";
        FilesCollection = new UploadedFilesCollection();
    }
}
}

We defined FilesCollection property as UploadedFilesCollection. This property will contain our uploaded files.

Open Views/Default.dothtml file and add the following code.
```
<dot:FileUpload UploadedFiles="{value: FilesCollection}"
            AllowMultipleFiles="true"
            AllowedFileTypes=".png,.jpg"
            SuccessMessageText="Uploaded"
            UploadButtonText="Select Files to Upload"></dot:FileUpload>
```
Here, we are adding FileUpload control and set its properties as follows
- UploadFiles : set to FilesCollection collection we have defined in the ViewModel class.
- AllowMultipleFiles : set to true to be able to upload many files at once.
- AllowedFileTypes : set to restrict the file types you allow user to upload.
- SuccessMessageText : the message you want to display in the page to inform the user that the upload is finished with no error.
- UploadButtonText : the text you want to display as a text for upload button.
By default DotVVM will save your file with .tmp extension and keep it for 30 minutes then will be deleted automatically.

To save your files to a permanent location/storage you need to do that by yourself.
In the FileUpload control markup will set UploadCompleted attribute with the name of the event that will be triggered once the upload is completed.

<dot:FileUpload UploadedFiles="{value: FilesCollection}"
                AllowMultipleFiles="true"
                AllowedFileTypes=".png,.jpg"
                SuccessMessageText="Uploaded"
                UploadButtonText="Select Files to Upload"
                UploadCompleted="{command: SaveMyFilesLocally()}"></dot:FileUpload>

You need to inject IUploadedFileStorage to DefaultViewModel class.

private readonly IUploadedFileStorage _uploadedFileStorage;
...
public DefaultViewModel(IUploadedFileStorage uploadedFileStorage)
{
  _uploadedFileStorage = uploadedFileStorage;
}

And here SaveMyFilesLocally() method that we added in FileUpload markup.

public void SaveMyFilesLocally()
{
if (!FilesCollection.IsBusy)
{
  var permenentPath = Path.Combine(Context.Configuration.ApplicationPhysicalPath, "ProcessedFiles");
  if (!Directory.Exists(permenentPath))
  {
      Directory.CreateDirectory(permenentPath);
  }
  foreach (var file in FilesCollection.Files)
  {
       var newFileName = $"{Path.GetFileNameWithoutExtension(file.FileName)}_{file.FileId}{Path.GetExtension(file.FileName)}";
        var filePath = Path.Combine(permenentPath, newFileName);
        _uploadedFileStorage.SaveAs(file.FileId, filePath);
        _uploadedFileStorage.DeleteFile(file.FileId);
   }
   FilesCollection.Clear();
}
}

First we check if FilesCollection is busy with uploading files. If not, we start to process our uploaded files by looping over Files property of our FilesCollection.
After saving our file to permanent storage we delete it from the temp folder. Deleting files from temp folder is not necessary as DotVVM will delete it after 30 minutes but it is good to do to specially if your application upload huge number of files.
Then we clear our FilesCollection to not process the same files again if we uploaded another set of files.

Here is how our sample page looks like

Uploading files to Azure Storage Account.

Here is the magic of DotVVM begins. If any point of time you decided to upload your file to the Azure Storage Account instead of local storage, what all you need is modify SaveMyFilesLocally method.

For demonstration purpose we will add a new method SaveMyFilesToAzure and let FileUpload point to it.

<dot:FileUpload UploadedFiles="{value: FilesCollection}"
                    AllowMultipleFiles="true"
                    AllowedFileTypes=".png,.jpg"
                    SuccessMessageText="Uploaded"
                    UploadButtonText="Select Files to Upload"
                    UploadCompleted="{command: SaveMyFilesToAzure()}"></dot:FileUpload>

Install WindowsAzure.Storage nuget package
```
Install-Package WindowsAzure.Storage
```
Add the following using statement to DefaultViewModel class.
```
using Microsoft.WindowsAzure.Storage;
```

Add SaveMyFilesToAzure method to DefaultViewModel class

public async Task SaveMyFilesToAzure()
{
if (!FilesCollection.IsBusy)
{
    var stoageAccount = CloudStorageAccount.DevelopmentStorageAccount;
    var blobStorageClient = stoageAccount.CreateCloudBlobClient();
    var container = blobStorageClient.GetContainerReference("dotvvmblobcontainer");
    await container.CreateIfNotExistsAsync();
    foreach (var file in FilesCollection.Files)
    {
        var newFileName = $"{Path.GetFileNameWithoutExtension(file.FileName)}_{file.FileId}{Path.GetExtension(file.FileName)}";
        var blobRef = container.GetBlockBlobReference(newFileName);
        await blobRef.UploadFromFileAsync($"temp/uploadedFiles/{file.FileId}.tmp");
    }
    FilesCollection.Clear();
}
}

As you see it is almost the same as before. We just creating a client to Azure Storage Account.
Here I'm using the Storage Account Emulator. Explaining how to use it is out of the scope of this article. You can refer to Microsoft Documentations for more details.

Summary

In this post we demonstrated how it is pretty easy to upload files with DotVVM FileUpload Control to your local storage and to your Azure Blob Container.

You can find the full code on Github

DotVVM Authorization with IdentityServer4

Amir Ismail — Sat, 21 Mar 2020 15:53:34 +0000

DotVVM is open source MVVM framework for ASP.Net Core and OWIN and it is member of .Net Foundation. DotVVM is a free to use under Apache License but also have commercial extensions.

DotVVM lets you build interactive web UIs with just C# and HTML using MVVM pattern. DotVVM framework is shipped with many build-in controls like GridView, FileUpload, Validators, and more.

To learn more about DotVVM framework visit DotVVM.com.

In this article we will see how to secure your DotVVM web application using IdentityServer4.

What is IdentityServer4?

IdentityServer4 is an OpenID Connect and OAuth2.0 framework for ASP.Net Core. it enables:

Authentication as a service
Single Sign-n (SSO)
Access control for APIs

and more.

It is an open source framework you get its code from GitHub repository and the full documentation

You can check my previous article to know how to install DotVVM extension.

First of all we need to prepare our IdentityServer4 as our authentication service. IdentityServer4 has different templates to use, for simplicity we will use out of the box IdentityServer4 UI template which provides a complete UI for defining roles, users, clients, claim types,.etc.

To install IdentityServer templates for dotnet CLI run this command in console window.
dotnet new -i IdentityServer4.Templates

From cmd or windows PowerShell run following commands

md dotvvm/src //create folder for our solution
cd dotvvm/src
dotnet new sln -n dotvvm
dotnet new is4admin -n dotvvm.auth
dotnet sln add .\dotvvm.auth\dotvvm.auth.csproj

Open your solution in vs2019 or vs code, your solution should look like

build and run you solution it should see a page like this

To add your users, roles, and clients, click on highlighted link then click on start

Open Users page and click on Add User button then fill the New User form where you define your user and his login credentials.

Note : Save user name and password as you will use it when you run your DotVVM application.

Define your application as Client

Open Clients page and click on Add Client button
Select Web App then click Start
Fill your application main details then click Next.
Client ID : dotvvm-article-sample.
DotVVM Framework
https://localhost:5001
Callback URL. It is a URL to a page in your DotVVM application where IdentityServer will redirect to it if sign-in is succeeded. Enter https://localhost:5001 then click next.
Post-logout URL: leave it empty and click next
Secret: in this screen you specify a secret key for your DotVVM application. That key will be used in DotVVM application to identify your requests to IdentityServer. enter these values and click Add then click Next.

Type: Shared Secret
Value: dotvvm-secret
Expiration Date: 03/18/2025
Identity Resource: select all available resource that can be accessible by your DotVVM application then click Next.
Protected Resources:select all available resources that can be accessible by your DotVVM application then click Next.
Review your choices and click Save
Open your client details and go to Advanced -> Token tab and check Always Include UserClaims In Id Token

Differences between different options we have selected is out of scope of this post.

DotVVM Application

We will create a new empty DotVVM application, just include Bootstrap and Authentication sample code.

You can check this post for full steps of DotVVM application creation.

It is recommended to change you the target framework of your DotVVM application to .Net Core 3.1 and also re-install Microsoft.AspNetCore.Authentication.Cookies package.

Open Program.cs file and add the following line to BuildWebHost method. We specify the URL of the DotVVM application to match what we have used while configuring the IdentityServer client. .UseUrls("https://localhost:5001")
Install Microsoft.AspNetCore.Authentication.OpenIdConnect package.

replace ConfigureServices method with the following code

public void ConfigureServices(IServiceCollection services)
{
services.AddDataProtection();
services.AddAuthorization();
services.AddWebEncoders();
JwtSecurityTokenHandler.DefaultMapInboundClaims = false;
services.AddAuthentication(options =>{
     options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
     options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
})
.AddCookie(CookieAuthenticationDefaults.AuthenticationScheme)
.AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, options =>{
    options.Authority = "http://localhost:5000";
    options.RequireHttpsMetadata = false;
    options.SaveTokens = true;
    options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.ClientId = "dotvvm-article-sample";
    options.ClientSecret = "dotvvm-secret";
    options.ResponseType = "id_token token";
    options.Scope.Add("openid");
    options.Scope.Add("profile");
    options.CallbackPath = "/signin-oidc";
 });
 services.AddRazorPages();
 services.AddDotVVM<DotvvmStartup>();
}

replace the Configure method with the following code

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  app.UseAuthentication();
  app.UseRouting();
  app.UseAuthorization();
  // use DotVVM
  var dotvvmConfiguration = app.UseDotVVM<DotvvmStartup>(env.ContentRootPath);
  dotvvmConfiguration.AssertConfigurationIsValid();
  // use static files
  app.UseStaticFiles(new StaticFileOptions
    {
       FileProvider = new PhysicalFileProvider(env.WebRootPath)
    });
   app.UseEndpoints(endpoints =>
   {
     endpoints.MapRazorPages();
   });
}

Open ViewModels/MasterPageViewModel.cs file and decorate MaterPageViewModel class with Authorize attribute.

[Authorize]

public class MasterPageViewModel : DotvvmViewModelBase
Add the following line to MasterPageVeiwModel class to read name of the logged in user from IdentityServer claims.

public string Username => Context.HttpContext.User.FindFirst("name")?.Value;
Open Views/Default.dothtml file and add this div to content control

<div class="alert alert-info">Welcome to DotVVM, {{value: Username}}</div>
First you must run dotvvm.auth project and once you run your dotvvm.web project it will be redirected login page of IdentityServer
After logging using username and password you have specified while creating user step, you will be redirected to permission pages where IdentityServer asking for your permission.
Check permission you want to allow then click Yes, Allow button to go to your DotVVM application.

Summary

In this article we showed how to use IdentityServer4 to Authenticate your DotVVM application.
You can find the complete code sample in GitHub

DotVVM CRUD application with Entity Framework and Cosmos DB

Amir Ismail — Thu, 05 Mar 2020 23:58:36 +0000

What is DotVVM?

DotVVM is open source MVVM framework for ASP.Net Core and OWIN and it is member of .NetFoundation. DotVVM is a free to use under Apache License but also have commercial extensions.

DotVVM lets you build interactive web UIs with just C# and HTML using MVVM pattern. DotVVM framework is shipped with many build-in controls like GridView, FileUpload, Validators, and more.

Why DotVVM?

There are many reason and business scenarios that DotVVM is suitable for and very helpful like:

Migrating legacy ASP.Net web forms application to .Net Core.
New ASP.Net applications that contains many forms with a lot of controls/components.

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 Cosmos migration tool.

In this article we will go through a sample project to demonstrate how it is easy to use 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 Manage Extension window

Extensions > Manage Extensions > Online menu
In search box type DotVVM and click Download
Restart Visual Studio to complete DotVVM installation
You should find DotVVM in Extension menu.

To know more about the DotVVM extension visit its page on visual studio marketplace:https://marketplace.visualstudio.com/items?itemName=TomasHerceg.DotVVM-VSExtension2019

Now you are ready to start coding with DotVVM framework. DotVVM extension installs DotVVM sample project which we will use to demonstrate how it is easy to connect to Azure Cosmos DB from DotVVM application.

DotVVM Web Application

Create new project

In create new project window, filter project list by DotVVM and select DotVVM Web Application (.NET Core) and click next.
Enter “DotVVMCosmos” as project name, project path, and “DotVVMCosmos” as solution name then click create

Project name and solution name can be any value you want.
In “Customize Your DotVVM Project” window select
- 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 be as shown

DotVVM sample project uses Entity Framework Code First approach and provides:

Sample entity (Student)
DbContext class (StudentDbContext)
Two model classes (StudentDetailModel, StudentListModel)
CRUD Service class (StudentService) : contains all methods required to do your CRUD operations

Create Azure Cosmos DB Account

You can use existing Azure subscription to create Azure Cosmos DB account. If you don’t have 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 Azure Cosmos DB Account for you and the overview page will look like
In left side menu click on Keys. From 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 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 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 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 ‘em to the corresponding container as well.
Run your application and if there is no error you will see the following page in your browser
Click on New Item and fill the form then click Add
Congratulation, you added your student to Student Cosmos DB container
Go to your Cosmos DB web page and open Data Explorer, it should look like

Summary

In this article we demonstrated how to create a sample DotVVM web application and connect to Azure Cosmos DB NoSQL database and perform CRUD operations as we used to do with SQL Server database or any other relational database. We have done 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

DotVVM CRUD application with Cloud Firestore

Amir Ismail — Thu, 05 Mar 2020 23:57:59 +0000

In previous post we demonstrated how to use DotVVM to create CRUD application with Azure Cosmos DB as your data store.

In this post we will demonstrate how to do the same with Cloud Firestore by Google.

To know more about DotVVM Framework you can check its official website

What is Cloud Firestore?

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. It keeps your data in sync across client apps through realtime listener and offers offline support for mobile and web apps.

You can know more about Cloud Firebase here.

Install DotVVM extension

refer to previous post and follow the steps.

To know more about the DotVVM extension visit its page on visual studio marketplace:https://marketplace.visualstudio.com/items?itemName=TomasHerceg.DotVVM-VSExtension2019

Now you are ready to start coding with DotVVM framework. DotVVM extension installs DotVVM sample project which we will use to demonstrate how it is easy to connect to Cloud Firestore database from DotVVM application.

Create Cloud Firestore Project

To use cloud Firestore as your database you need to create a project on Firestore.

Go to https://console.firebase.google.com/ and login with your google account or create new one.
Click on Add Project
Enter "dotvvm" as project name.
In next step, Disable Google Analytics for this project. It is recommended to enable it for real project.
Click on Create Project. it will take one or two mins to create your project. When it is ready click on continue.
From the left navigation pan, open database then click on Create database
In the popup window, select Start in test mode then click next.
Select the location of your database(you can keep the default selection) then Click Done.
Congratulation, your Cloud Firestore database is created and ready.

To be able to connect to your Firestore database from your application(server) you need to set the GOOGLE_APPLICATION_CREDENTIALS environment variable to point to JSON service account key file.

To setup your service account, go to https://cloud.google.com/docs/authentication/getting-started and follow the instructions.

DotVVM Web Application

In previous post you can find the complete steps for creating DotVVM web application. In this post we focus on code changes required to connect to Firestore database.

Uninstall entity framework Sql Server related nuget package Microsoft.EntityFrameworkCore.SqlServer and Microsoft.EntityFrameworkCore As we will connect to Cloud Firestore database not Sql Server database
Install Google.Cloud.Firestore nuget package. This package is required to run CRUD operations against your firestore database from your web application.
Open appsettings.json file and remove the connection string. keeping it will not harm but we need our code to be clean.
Delete DAL/StudentDbContext.cs file.
Open Startup.cs file and delete the following lines

services.AddEntityFrameworkSqlServer() .AddDbContext<Studentdbcontext>(options => { options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")); });
Open DAL/Entities/Student.cs file and add the following using statement

using Google.Cloud.Firestore;
Decorate the Student class with [FirestoreData] attribute and each property with [FirestoreProperty] attribute. Also change the type of EnrollmentDate property to Timestamp instead of DateTime. The complete code of Student class will be

[FirestoreData] public class Student { [FirestoreProperty] public int Id { get; set; } [FirestoreProperty] public string FirstName { get; set; } [FirestoreProperty] public string LastName { get; set; } [FirestoreProperty] public string About { get; set; } [FirestoreProperty] public Timestamp EnrollmentDate { get; set; } }

Those attributes are required and used to serialize/deserialize your entities from and to json objects. Timestamp is the Firestore datatype used to represent date/time values.

Open Services/StudentService.cs file and add the following private properties to StudentService class

private const string project = "dotvvm"; private const string collection = "students";

where project is the name of your Firestore project and collection is the name of your database collection where you will insert/retrieve records
Replace the GetAllStudentsAsync method with the following

public async Task<List<StudentListModel>> GetAllStudentsAsync() { var studentsList = new List<Student>(); FirestoreDb db = FirestoreDb.Create(Project); Query allStudentsQuery = db.Collection(Collection); QuerySnapshot allStudentsQuerySnapshot = await allStudentsQuery.GetSnapshotAsync(); foreach (DocumentSnapshot documentSnapshot in allStudentsQuerySnapshot.Documents) { studentsList.Add(documentSnapshot.ConvertTo<Student>()); } return studentsList.Select( s => new StudentListModel { Id = s.Id, FirstName = s.FirstName, LastName = s.LastName } ).ToList(); }
Replace the GetStudentByIdAsync method with the following

public async Task<StudentListModel> GetStudentByIdAsync() { FirestoreDb db = FirestoreDb.Create(Project); Query docRef = db.Collection(Collection).WhereEqualTo("Id", studentId).Limit(1); QuerySnapshot snapshot = await docRef.GetSnapshotAsync(); if (snapshot.Count > 0) { Student student = snapshot.ElementAt(0).ConvertTo<Student>(); return new StudentDetailModel() { About = student.About, EnrollmentDate = student.EnrollmentDate.ToDateTime(), FirstName = student.FirstName, Id = student.Id, LastName = student.LastName }; } else { return null; } }
Replace the UpdateStudentAsync method with the following

public async Task UpdateStudentAsync(StudentDetailModel student) { FirestoreDb db = FirestoreDb.Create(Project); Query docRef = db.Collection(Collection).WhereEqualTo("Id", student.Id).Limit(1); QuerySnapshot snapshot = await docRef.GetSnapshotAsync(); if (snapshot.Count > 0) { DocumentReference studentRef = db.Collection(Collection).Document(snapshot.ElementAt(0).Id); Dictionary<string, object> updates = new Dictionary<string, object> { { nameof(student.About), student.About}, { nameof(student.EnrollmentDate), Timestamp.FromDateTime(student.EnrollmentDate.ToUniversalTime())}, { nameof(student.FirstName), student.FirstName}, { nameof(student.LastName), student.LastName} }; await studentRef.UpdateAsync(updates); } }
Replace the InsertStudentAsync method with the following

public async Task InsertStudentAsync(StudentDetailModel student) { var entity = new Student() { Id = new Random().Next(1, int.MaxValue), FirstName = student.FirstName, LastName = student.LastName, About = student.About, //create Timestamp from DateTime value EnrollmentDate = Timestamp.FromDateTime(student.EnrollmentDate.ToUniversalTime()) }; FirestoreDb db = FirestoreDb.Create(Project); var Id = Guid.NewGuid().ToString(); DocumentReference docRef = db.Collection(Collection).Document(Id); await docRef.SetAsync(entity); }
Replace the DeleteStudentAsync method with the following

public async Task DeleteStudentAsync(int studentId) { FirestoreDb db = FirestoreDb.Create(Project); Query docRef = db.Collection(Collection).WhereEqualTo("Id", studentId).Limit(1); QuerySnapshot snapshot = await docRef.GetSnapshotAsync(); if (snapshot.Count > 0) { DocumentReference studentRef = db.Collection(Collection).Document(snapshot.ElementAt(0).Id); await studentRef.DeleteAsync(); } }
Run your application and if there is no error you will see the following page in your browser
Click on New Item and fill the form then click Add
Congratulation, you added your student to students Firestore collection
Go to your Firestore database, it should look like

notice that, Firestore is created a student collection and inserted your student entity as JSON document and also notice how it represents the EnrollmentDate value as timestamp.

Summary

In this article we demonstrated how to create a sample DotVVM web application, Cloud Firestore database and perform CRUD operations as we used to do with SQL Server database or any other relational database. We have done changes in the sample project code to twist it from using Entity Framework Code First approach (SQL Server) to use Google Cloud FireStore .Net SDK.

You can find the complete source code on github