Forem: DotVVM

DotVVM for Visual Studio 2022 is now available

Daniel Gomez — Thu, 20 Jan 2022 15:30:51 +0000

DotVVM is an ASP.NET framework that allows us to create web applications using the MVVM (Model, View, ViewModel) pattern with C# and HTML.

As of this time, DotVVM is now available for Visual Studio 2022 through an extension.

Steps to follow

To install this extension we can perform the following steps:

1.- Load Visual Studio, go to the Extensions section and select Manage Extensions.

2.- Search for DotVVM.

3.- Download the extension and follow the instructions.

4.- Restart Visual Studio and create a new project.

5.- Search for DotVVM and select DotVVM Web Application.

With these steps, DotVVM is ready to be used from our Visual Studio 2022. The process is the same for Visual Studio 2019.

Additional Resources

If you want to know everything we can do with DotVVM, here are some case study articles that may be useful to you:

Thanks for reading

If you have any questions or ideas in mind, it will be a pleasure to be able to be in communication and together exchange knowledge with each other.

See you on Twitter / esDanielGomez.com.

DotVVM Advent Calendar 2021

Daniel Gomez — Wed, 01 Dec 2021 15:23:56 +0000

Hello everyone! Welcome to DotVVM Advent Calendar 2021, 25 days with 25 amazing articles to learn about DotVVM and the multiple applications we can carry out. We have an article for each of the advent days with the following general topics:

Basic concepts of ASP.NET with DotVVM.
Controls for web forms.
Data reports.
Web pages with SQL and NoSQL databases.
Deploy DotVVM applications on Azure and Amazon Web Services.
Construction of applications for real life.

Calendar

In this second edition of the calendar, the general idea is learn from the basics to the most advanced about the wonderful world of web application development with ASP.NET and DotVVM through the contributions generated by the DotVVM community this year.

Day	Date	Contribution
1	Dec 1st	Introduction to DotVVM.
2	Dec 2nd	Setting up for Dotvvm Development on Linux, MacOS and Windows.
3	Dec 3rd	DotVVM and ASP.NET Core: Implementing CRUD operations.
4	Dec 4th	Working with ASP.NET Core and DotVVM on Visual Studio Code.
5	Dec 5th	Web forms with DotVVM controls.
6	Dec 6th	Form validation in ASP.NET & DotVVM.
7	Dec 7th	Reports in DotVVM with GridView, CheckBox, and TextBox controls.
8	Dec 8th	DotVVM Controls : GridView.
9	Dec 9th	Web forms with DotVVM Business Pack.
10	Dec 10th	DotVVM: upload files using FileUpload control.
11	Dec 11th	HTML templates for repetitive elements in ASP.NET & DotVVM.
12	Dec 12th	https://dev.to/esdanielgomez/html-templates-for-repetitive-elements-in-asp-net-dotvvm-1670.
13	Dec 13th	Developing web applications with ASP.NET Core, DotVVM and MongoDB.
14	Dec 14th	DotVVM CRUD application with Entity Framework and Cosmos DB.
15	Dec 15th	Working with web services through ASP.NET Core and DotVVM (A step by step guide)..
16	Dec 16th	Deploy DotVVM and .NET Core web applications to Azure (Everything you need to know)..
17	Dec 17th	GitHub Actions + Azure: Continuous deployment of ASP.NET Core with DotVVM applications.
18	Dec 18th	Working with WCF Services through ASP.NET and DotVVM (A step-by-step guide)..
19	Dec 19th	.NET Hot Reload for DotVVM Developers.
20	Dec 20th	Deploying ASP.NET Core and DotVVM web applications to a virtual machine in Azure
21	Dec 21st	Building a Dashboard with ASP.NET Core and DotVVM.
22	Dec 22nd	Deploy web applications with ASP.NET Core and DotVVM on AWS Elastic Beanstalk.
23	Dec 23rd	Deploying ASP.NET & DotVVM web applications to a Linux virtual machine in Azure.
24	Dec 24th	Sentiment analysis in a DotVVM web application with ML.NET.
25	Dec 25th	Guide to organizing and promoting events through a web portal with ASP.NET & DotVVM.

We hope you enjoy and learn about DotVVM during these 25 days of advent. If you have any questions or would like to receive any feedback, you can write to me on Twitter or request information from info@dotvvm.com. If you want to share your progress with this amazing experience, you can use the hashtags #DotVVMCommunity #DotVVMAdventCalendar :)

From now on, ¡Merry Christmas!

Web portal to manage virtual or in-person events with ASP.NET 5 and DotVVM

Daniel Gomez — Wed, 27 Jan 2021 20:08:25 +0000

When we organize large events such as conferences or hackathons, we often need to manage speaker data, sessions or presentations within the event, sponsors, or general event data. For this purpose, we may create an administrative web portal that allows us to handle all this data.

With these considerations in mind, in this article, we'll learn in a practical way how to design a dashboard to handle data for an in-person or virtual event. This portal can help us a lot in terms of time to manage the information in a database and subsequently manage all this data in another web portal for the users/participants of the event (this second portal we will analyze in a second article).

The web portal for managing events will be done ASP.NET 5 with the MVVM pattern (Model, View, Model View) with DotVVM. Where,

The model. — will be responsible for all application data and related business logic.
View. — shall correspond to representations for the end-user of the application model. The view will be responsible for displaying the data to the user and for allowing manipulation of application data.
Model-View or View-Model. — one or more per view; the view-model will be responsible for implementing view behavior to respond to user actions and exposing model data easily.

The final result of the web portal will be as follows:

Note: The source code for this project can be found in the following GitHub repository: Event Admin.

Basic functionalities of the administrative web portal

For the management of event data, the base options and functionality that are considered within the dashboard are described below:

Organizers, which indicates the name of the communities and/or institutions that are organizing the event. Here you can put the social networks of the organizing group and also a description.
Speakers, to have a list of those people who will present a session within the event.
Sessions, where the event presentations are recorded, with their respective associated speakers. Here you can also specify the type of the session (e.g. Keynote, workshop, talk, etc.), the start date, the end date, a description, and the level of difficulty of the session (basic, intermediate, advanced).
Sponsors, since most events can be held thanks to their sponsors, each collaborator can be registered here by specifying the company name, website, logo, and description.

Now that we are aware of the options that will be included, let's start building our web portal.

Resources and tools needed

As initially mentioned, for the construction of the portal we will use ASP.NET 5 & DotVVM. In this sense, the resources and tools needed to establish our work environment are as follows:

Visual Studio 2019.
Workload in Visual Studio 2019: Developing ASP.NET web.
DotVVM Extension for Visual Studio 2019.

The database schema

Considering the base functionalities of the administrative web portal, the dashboard has been considered a SQL database, with entities: Organizer, Sponsor, Event, Speaker, Session, Speaker_has_Session, SessionLevel, and SessionType.

For this case, the database manager to be used is SQL Server, so we could initially build the dashboard on-premises, or consider some cloud resource such as Azure SQL Database, to work with the database.

The SQL script for this database is as follows:

-- -----------------------------------------------------
CREATE TABLE  Event (
  IdEvent INT NOT NULL IDENTITY(1,1),
  Name VARCHAR(45) NOT NULL,
  Description VARCHAR(500) NULL,
  Icon VARCHAR(45) NULL,
  StartDate DATETIME NOT NULL,
  EndDate DATETIME NOT NULL,
  RegistrationLink VARCHAR(45) NULL,
  StreamingLink VARCHAR(45) NULL,
  PRIMARY KEY (IdEvent))
;

-- -----------------------------------------------------
CREATE TABLE  Speaker (
  IdSpeaker INT NOT NULL IDENTITY(1,1),
  FirstName VARCHAR(45) NOT NULL,
  SecondName VARCHAR(45) NULL,
  FirstLastName VARCHAR(45) NOT NULL,
  SecondLastName VARCHAR(45) NULL,
  PhotoLink VARCHAR(45) NULL,
  TwitterLink VARCHAR(45) NULL,
  LinkedInLink VARCHAR(45) NULL,
  IdEvent INT NOT NULL,
  PRIMARY KEY (IdSpeaker),
  INDEX fk_Speaker_Event_idx (IdEvent ASC),
  CONSTRAINT fk_Speaker_Event
    FOREIGN KEY (IdEvent)
    REFERENCES Event (IdEvent)
    ON DELETE NO ACTION
    ON UPDATE NO ACTION)
;

-- -----------------------------------------------------
CREATE TABLE  SessionType (
  IdSessionType INT NOT NULL IDENTITY(1,1),
  Name VARCHAR(45) NOT NULL,
  Description VARCHAR(45) NULL,
  PRIMARY KEY (IdSessionType))
;

-- -----------------------------------------------------
CREATE TABLE  SessionLevel (
  IdSessionLevel INT NOT NULL IDENTITY(1,1),
  Name VARCHAR(45) NULL,
  Description VARCHAR(45) NULL,
  PRIMARY KEY (IdSessionLevel))
;

-- -----------------------------------------------------
CREATE TABLE  Session (
  IdSession INT NOT NULL IDENTITY(1,1),
  Name VARCHAR(45) NOT NULL,
  Description VARCHAR(500) NULL,
  StartDate DATETIME NULL,
  EndDate DATETIME NULL,
  IconLink VARCHAR(45) NULL,
  IdSessionType INT NOT NULL,
  IdSessionLevel INT NOT NULL,
  PRIMARY KEY (IdSession),
  INDEX fk_Session_SessionType1_idx (IdSessionType ASC),
  INDEX fk_Session_SessionLevel1_idx (IdSessionLevel ASC),
  CONSTRAINT fk_Session_SessionType1
    FOREIGN KEY (IdSessionType)
    REFERENCES SessionType (IdSessionType)
    ON DELETE NO ACTION
    ON UPDATE NO ACTION,
  CONSTRAINT fk_Session_SessionLevel1
    FOREIGN KEY (IdSessionLevel)
    REFERENCES SessionLevel (IdSessionLevel)
    ON DELETE NO ACTION
    ON UPDATE NO ACTION)
;

-- -----------------------------------------------------
CREATE TABLE  Speaker_has_Session (
  IdSpeaker INT NOT NULL,
  IdSession INT NOT NULL,
  INDEX fk_Speaker_has_Session_Session1_idx (IdSession ASC),
  INDEX fk_Speaker_has_Session_Speaker1_idx (IdSpeaker ASC),
  CONSTRAINT fk_Speaker_has_Session_Speaker1
    FOREIGN KEY (IdSpeaker)
    REFERENCES Speaker (IdSpeaker)
    ON DELETE NO ACTION
    ON UPDATE NO ACTION,
  CONSTRAINT fk_Speaker_has_Session_Session1
    FOREIGN KEY (IdSession)
    REFERENCES Session (IdSession)
    ON DELETE NO ACTION
    ON UPDATE NO ACTION)
;

-- -----------------------------------------------------
CREATE TABLE  Organizer (
  IdOrganizer INT NOT NULL IDENTITY(1,1),
  Name VARCHAR(45) NOT NULL,
  LogoLink VARCHAR(45) NULL,
  WebPage VARCHAR(45) NULL,
  Email VARCHAR(45) NULL,
  Description VARCHAR(45) NULL,
  FacebookLink VARCHAR(45) NULL,
  TwitterLink VARCHAR(45) NULL,
  InstagramLink VARCHAR(45) NULL,
  IdEvent INT NOT NULL,
  PRIMARY KEY (IdOrganizer),
  INDEX fk_Organizer_Event1_idx (IdEvent ASC),
  CONSTRAINT fk_Organizer_Event1
    FOREIGN KEY (IdEvent)
    REFERENCES Event (IdEvent)
    ON DELETE NO ACTION
    ON UPDATE NO ACTION)
;

-- -----------------------------------------------------
CREATE TABLE  Sponsor (
  IdSponsor INT NOT NULL IDENTITY(1,1),
  Name VARCHAR(45) NOT NULL,
  LogoLink VARCHAR(45) NULL,
  Description VARCHAR(45) NULL,
  WebPage VARCHAR(45) NULL,
  IdEvent INT NOT NULL,
  PRIMARY KEY (IdSponsor),
  INDEX fk_Sponsor_Event1_idx (IdEvent ASC),
  CONSTRAINT fk_Sponsor_Event1
    FOREIGN KEY (IdEvent)
    REFERENCES Event (IdEvent)
    ON DELETE NO ACTION
    ON UPDATE NO ACTION)
;

Project solution environment

Within the solution in Visual Studio 2019, we'll have three projects:

Data Access Layer (DAL): a class library to handle connection and access to the database.
BL (Business Layer): another class library for service management and application domain logic.
PL - Presentation Layer. This section is where we have Views and Viewmodels for designing web pages with DotVVM.

All right, with this in mind, now let's look at the steps we need to take in these three projects for the development of our web portal.

DAL - Data Access Layer

This first project corresponds to a library of classes. In this sense, as a first point, we will relate our project to the database in SQL Server. To do this, we can use Entity Framework, an object-relational mapping framework (ORM) designed to create data access applications by programming in a conceptual application model, rather than directly programming a relational storage schema.

In the Entity Framework, there are two approaches, the first Code-First, which allows us to generate the database through classes, and the second, Database-First, which allows us to generate feature classes from an existing database. As expected, in this case, we will use the Database-First approach. To meet this goal, you will need to install three Nuget packages:

Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.Tools
Microsoft.EntityFrameworkCore.SqlServer

Then we will need to insert command from the package management console. This console can be activated from the Options Menu -> View -> Other Windows -> the Package Management Console.

In this console we will insert the following command:

Scaffold-DbContext "Server=YOUR_SERVER; Database=DATABASE_NAME; Username=YOUR_USERNAME; Password=YOUR_PASSWORD Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir DAL/Entities

When we enter the command on this console, we'll have something like this:

With these steps, we already have ready the connection and configurations needed to work with the SQL Server database in ASP.NET with the help of Entity Framework.

BL - Business Logic Layer

Now it's up to us to define the models and create the services to handle the logic of our application. In this case, we will create a second class library to have a general list of entities (Event, Organizer, Session, Speaker, Sponsor) and the specific information of each of them.

In the solution within Visual Studio 2019 to the final we will have something like this:

Here are two important things to mention. As a first point, the EventId class can handle the ID of the event we want to work with. In this case, the database is designed so that we can work with multiple events at once, so in this section, we can specify the ID of the event we want to reference (in the future we could handle this identifier at the web interface level).

public class EventId
{
    private static EventId instance { get; set; } = null;

    public int Id { get; set; } = 1;

    private EventId() { }

    public static EventId GetInstance()
    {
        if (instance == null) {
            instance = new EventId();
        }

        return instance;
    }
}

A second aspect to consider is that most services implement CRUD operations (Create, Read, Update, Delete) to handle the data for each case. For example, for Organizers, the methods are as follows:

GetAllOrganizersAsync().
GetOrganizerByIdAsync(int IdOrganizer).
InsertOrganizerAsync(OrganizerDetailModel Organizer).
UpdateOrganizerAsync(OrganizerDetailModel Organizer).
DeleteOrganizerAsync(int IdOrganizer).

With this mentioned, now let's look at the design of our dashboard with DotVVM.

PL - Presentation layer

For the design of the web portal, this is where DotVVM comes into action. Each page in DotVVM consists of two files:

A View, which is based on HTML syntax and describes what the page will look like.
A ViewModel, which is a class in CTM that describes the state of the page (for example, values in form fields) and handles user interactions (for example, button clicks).

For our case we will have four Views and four main ViewModels for the sections in the dashboard:

Default: it will be the main page, in this case only the options menu will be displayed.
Create: A page made up of a form to create a new record.
Detail: to view a record in detail.
Edit: To modify or delete record information.
List: to display the list of records for a particular case.

Considering the Views and Viewmodels files, in Visual Studio 2019 we'll see something like this for our entities:

Next, let's look at some of the main components of this administrative portal.

A. Masterpage

In DotVVM, master pages or master pages are known as Masterpage, whose files have a .dotmaster extension. In this case, this page will be useful to set our HTML skeleton, import our CSS & JavaScript files, and define the contents that will be visible on all child pages (lists, forms, records).

The header of our HTML will look like this:

<head>
    <meta charset="utf-8" />
    <title>Event Admin</title>

    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <!-- CSS Files -->

    <dot:RequiredResource Name="Styles" />

</head>

A particular tag is the one found under the statement <dot:RequiredResource NameTM"Styles" />. In DotVVM, within the configuration class called DotvvmStartUp, under the ConfigureResources method, we can specify the location of the CSS files in our administrative portal so that they are organized in this section:

private void ConfigureResources(DotvvmConfiguration config, string applicationPath)
{
    config.Resources.Register("Styles", new StylesheetResource()
    {
        Location = new UrlResourceLocation("~/assets/css/material-dashboard.css?v=2.1.2")
    });
}

The MasterPage with its HTML body will be displayed as follows:

Where,

Section 1, is the HTML header where you will find the page title, CSS fonts and referenced JavaScript files, and other specifications.
Section 2, corresponds to the logo of the page, in other words, the title within it.
Section 3, is the portal options menu.
Section 4, is the section where all the contents of the daughter pages (list of speakers, sponsors, sessions, organizers; and the creation and modification forms for each of these) will be displayed.

In the portal, visually the results according to the numbering of the previously specified sections are as follows:

For the analysis of the child pages, let's look at two example cases, the list of organizers and a registration form for those organizers.

B. List – Organizers

Up to this point, we have been able to analyze the established structure that our portal will have, now let's look at one of the child pages or also called content pages.

The purpose of this first page aims to visualize through a table the organizers that are registered in the database. In this sense, in the first part of this page we find the ViewModel:

public class ListViewModel : MasterPageViewModel
{
    public string Title { get; set; }
    public string Subtitle { get; set; }

    private readonly OrganizerService OrganizerService;

    [Bind(Direction.ServerToClient)]
    public List<OrganizerListModel> Organizers { get; set; }

    public int ContUsers { get; set; }

    public ListViewModel(OrganizerService OrganizerService)
    {
        Title = "Organizer";
        Subtitle = "In this section, you can see the list of organizers registered in the database.";

        this.OrganizerService = OrganizerService;
    }

    public override async Task PreRender()
    {
        Organizers = await OrganizerService.GetAllOrganizersAsync();

        await base.PreRender();
    }
}

In this ViewModel class, we define the title and subtitle that the child page will have. We will also have an instance of OrganizerService, which will allow us to access the methods to retrieve a list of registered organizers from the database through the Organizer service (implemented in the BL).

In this same class, we can locate the definition List<OrganizerListModel> Organizers of type OrganizerListModel (defined in the classes of the models in the BL), which will have the list of organizers (IdOrganizer, and Name) to load them into a table on the main page of the organizer's section. Other interesting statement is [Bind(Direction.ServerToClient)]. These types of properties allow you to specify what information will be transferred from the server to the client or from the client to the server when using Binding Directions. Considering the list of organizers, in many cases, it is not necessary to transfer the entire view model in both directions. The server in view will suffice in this case.

Finally, in the Organizer's List ViewModel, we have the PreRender() method, which allows us to perform certain types of operations that will be performed at the time of loading the page. In this case, the database will be queried through the call of one of the service methods, in this case, OrganizerService.GetAllOrganizersAsync() to retrieve the list of organizers in an Organizers collection of type OrganizerListModel.

The second part corresponds to the View on this page.

In the first part, we find the statement <dot:Content ContentPlaceHolderIDTM"MainContent">, which specifies the id of this content page, which is being referenced from the MasterPage in turn.

In the second part we have a navbar where the title and subtitle of this home page are displayed, and in turn, a button that will redirect you to a form to create a new organizer:

Finally, in a third section, we have a counter of the number of registered organizers and the table where these records are listed.

Only one counter in the Organizers collection set in the ViewModel is displayed in the counter section:

<p class="card-category"><b>Number of registered organizers</b></p>
<h2 class="card-title">
    {{value: Organizers.Count}}
</h2>

The organizer table can be displayed as follows:

This table is designed through a GridView: <dot:GridView ... >, a DotVVM control that allows us to create a table or crew to display a certain list of information. In HTML we would be talking about the <table> tag. One of its attributes is the DataSource: DataSource'"-value: Organizers-", which allows you to specify the data source, in this case, we refer to the list of organizers: Organizers, which was defined in the ViewModel as we saw earlier.

<dot:GridView DataSource="{value: Organizers}" class="table">
    <Columns>
        <dot:GridViewTextColumn ValueBinding="{value: IdOrganizer}" HeaderText="ID" HeaderCssClass="text-primary" CssClass="text-primary" />
        <dot:GridViewTextColumn ValueBinding="{value: Name}" HeaderText="Name" HeaderCssClass="text-primary" />
        <dot:GridViewTemplateColumn>
            <dot:RouteLink Text="" RouteName="DetailOrganizer" Param-IdOrganizer="{{value: IdOrganizer}}" class="btn btn-primary btn-link btn-sm">
                <i class="material-icons">visibility</i> Detail
            </dot:RouteLink>
        </dot:GridViewTemplateColumn>
    </Columns>
</dot:GridView>

Continuing with our analysis, in the GridView we have the columns IdOrganizer, and Name of the organizers, but additionally, we can also add columns to perform operations on some specific record. In this case, with RouteLink, we can define a hyperlink that constructs a URL from route names and parameter values to redirect us to other pages or perform additional operations, for example, see in detail the registration of a particular user according to their Id:

<dot:RouteLink RouteName="DetailOrganizer" Param-Id="{{value: IdOrganizer}}" />

These paths and their corresponding parameters must be defined in the DotvvmStartup.cs file in the ConfigureRoutes method as follows:

config.RouteTable.Add("DetailOrganizer", "DetailOrganizer/{IdOrganizer}", "Views/Organizers/Detail.dothtml");

C. Registration Form – Organizers

Within the portal, there are other options for creating, modifying, and deleting a record from a particular organizer. In this case, to generalize, let's analyze the Create Organizer page. Like the List, the Create page is one that will be the daughter of the MasterPage.

As the name implies, this page aims to create a new organizer through a form within the web portal. The result is as follows:

In this case, in the form, all components correspond to text boxes for data entry. Let's look at one of them, for example, the Name field in the View will be as follows:

<div class="col-md-6">
    <div class="form-group">
        <label class="">Name</label>
        <dot:TextBox Text="{value: Organizer.Name}" class="form-control" />
    </div>
</div>

Here we can comment on two things. The first, that for text boxes we can use a DotVVM component that allows us to associate a TextBox with an attribute in the ViewModel.

public OrganizerDetailModel Organizer { get; set; } = new OrganizerDetailModel();

We can also accompany this TextBox with a control called Validator, which allows us to validate certain characteristics, for example, that the field cannot be registered as null. In these two components, we can add additional specifications, such as the corresponding styles for each case.

The send button will follow the same logic:

<dot:Button Text="Insert Organizer" Click="{command: AddOrganizer()}" class="btn btn-primary pull-right" />

This button, set through a DotVVM component, is calling a function set in the ViewModel to add a user based on the data inserted into the form. This function is structured as follows:

public async Task AddOrganizer()
{
    await OrganizerService.InsertOrganizerAsync(Organizer);
    Context.RedirectToRoute("Organizer");
}

In this case, by inserting the record successfully, from the ViewModel, we can redirect to the List page (page with the list of registered organizers) and view the new organizer inserted into the database and displayed in the general list.

As mentioned earlier, the detail and editing pages follow the same design logic in this case; similarly for the Speakers, Sessions, and Sponsors sections.

Below are some additional screenshots for the Speakers, Sessions and Sponsors registration forms respectively.

What's next?

With this tutorial article, we have learned in general how to control the data of our events, whether for conferences or hackathons, for virtual meetings, or in person, through ASP.NET 5 & DotVVM.

The code in this tutorial can be found in the following repository on GitHub: Event Admin.

In the next article, we can learn how to use the same data stored in the database with SQL Server, but this time to represent it in a web portal where users or attendees can learn about sessions, speakers, and everything else. In the case of the list of organizers, in this second portal we could have something like this:

Soon we will also have the explanation of this portal for our attendees, and of course, the source code as well. :)

Additional resources:

Today there are many applications that we can build in the .NET ecosystem, and even more specifically in the area of web page development. In this sense, below are some additional resources to further acquire knowledge in this field:

Thank you very much for reading, I hope this demo can be of use to you. If you have any questions or ideas that you need to discuss, it will be nice to be able to collaborate and together exchange knowledge with each other.

See you on Twitter! Or if you like you can also write to me by Telegram. :)

DotVVM Advent Calendar 2020

Daniel Gomez — Tue, 01 Dec 2020 05:05:03 +0000

Hello everyone! Welcome to DotVVM Advent Calendar 2020, 25 days with 25 amazing articles to learn about DotVVM and the multiple applications we can carry out. We have an article for each of the advent days with the following general themes:

Basics of ASP.NET with DotVVM.
Controls for web forms.
Data reporting.
Web pages with SQL and NoSQL databases.
Deploying dotVVM applications to Azure and Amazon Web Services
Construction of applications for real life.

Calendar

The main idea of this initiative in its first edition is that among all we can learn from the basics to the most advanced about the wonderful world of web application development with ASP.NET and DotVVM through the contributions generated by the DotVVM community this year.

Day	Date	Contribution
1	Dec 1st	Introduction to DotVVM.
2	Dec 2nd	Setting up for Dotvvm Development on Linux, MacOS and Windows.
3	Dec 3rd	DotVVM and ASP.NET Core: Implementing CRUD operations.
4	Dec 4th	Working with ASP.NET Core and DotVVM on Visual Studio Code.
5	Dec 5th	Web forms with DotVVM controls.
6	Dec 6th	DotVVM:Build Conditional Validation Attribute.
7	Dec 7th	Reports in DotVVM with GridView, CheckBox, and TextBox controls.
8	Dec 8th	DotVVM Controls : GridView.
9	Dec 9th	Web forms with DotVVM Business Pack.
10	Dec 10th	DotVVM: upload files using FileUpload control.
11	Dec 11th	Star rating with DotVVM and CSS.
12	Dec 12th	DotVVM: Add shortcuts to your buttons and links.
13	Dec 13th	Developing web applications with ASP.NET Core, DotVVM and MongoDB.
14	Dec 14th	DotVVM CRUD application with Entity Framework and Cosmos DB.
15	Dec 15th	Working with web services through ASP.NET Core and DotVVM (A step by step guide)..
16	Dec 16th	Deploy DotVVM and .NET Core web applications to Azure (Everything you need to know)..
17	Dec 17th	GitHub Actions + Azure: Continuous deployment of ASP.NET Core with DotVVM applications.
18	Dec 18th	Working with WCF Services through ASP.NET and DotVVM (A step-by-step guide)..
19	Dec 19th	DotVVM Authorization with IdentityServer4.
20	Dec 20th	Deploying ASP.NET Core and DotVVM web applications to a virtual machine in Azure
21	Dec 21st	DotVVM CRUD application with Cloud Firestore.
22	Dec 22nd	Deploy web applications with ASP.NET Core and DotVVM on AWS Elastic Beanstalk.
23	Dec 23rd	Containerize a Dotvvm Web Application and a MySql Database with Docker Compose.
24	Dec 24th	Build Azure Pipeline to your DotVVM application.
25	Dec 25th	Building a Dashboard with ASP.NET Core and DotVVM.

From now on, ¡Merry Christmas!

Website for data reporting with DotVVM Business Pack

Daniel Gomez — Mon, 24 Aug 2020 18:53:03 +0000

In many cases when we working with systems that aim to perform operations on a database, there is a need to include a section within these systems to visualize the corresponding data. Within web pages, tables are typically used to represent information, search sections to filter information, and more.

In this article we will learn how to design in a simple way, a web page to visualize certain data hosted in tables in a database relates through ASP.NET Core and DotVVM. In previous articles, we were able to learn in general how to use predefined DotVVM controls for data visualization as a report. Here are some of those articles:

Also, when you manage forms to manage information, you need to create tables before you can view the processed data. Here are some previous articles in case you want to learn how to design HTML forms with DotVVM:

This time we will learn the basics of visualizing certain data and establishing some search criteria with C- and HTML, through DotVVM's premium controls on ASP.NET Core, referred to as DotVVM Business Pack.

Note: The project source code that we will discuss in this article can be found in this GitHub repository: Reports in DotVVM with Business Pack controls.

Model, View, ViewModel Pattern

DotVVM is based on the Design Pattern Model, View, ViewModel over .NET for communication between HTML (web pages) and C- (source code). The purpose of these parts are as follows:

Model. — is responsible for all application data and related business logic.
The view. — Representations for the end-user of the application model. The view is responsible for displaying the data to the user and allowing manipulation of application data.
Model-View or View-Model. — one or more per view; the model-view is responsible for implementing view behavior to respond to user actions and for easily exposing model data.

How do We access DotVVM Business Pack?

Business Pack is a private NuGet, in which we can make use of the competent premiums already established by DotVVM for the construction of web applications in the business field.

For the installation of the DotVVM Business Pack version, it is necessary to configure a few minutes to be able to use these functionalities. It all comes down to the following:

Install the DotVVM extension for Visual Studio 2019.
Purchase Business Pack (trial version exists) at the following address: DotVVM Business Pack.
Sign in to the DotVVM extension for Visual Studio 2019. To do this, we can go to the Visual Studio options menu in the path: Extensions -> DotVVM -> About. And ready, that'll be it.

Report with ASP.NET Core and DotVVM

To exemplify the use of some DotVVM Business Pack controls for reporting, we have a small application like this:

Taking into account the MVVM – Model, View, ViewModel pattern, we will analyze in general each of these parts for this project, which aims to display the data of particular users.

Model

Application and related business logic data is handled in this section. In this sense, we will see how the data and the corresponding services are handled.

The database consists of two tables: Person and PersonType.

The SQL statements for creating these tables, their attributes, and inserting some records are as follows:

CREATE SCHEMA IF NOT EXISTS `dbperson` DEFAULT CHARACTER SET utf8;
USE `dbperson` ;

CREATE TABLE IF NOT EXISTS `dbperson`.`PersonType` (
  `Id` INT NOT NULL,
  `Name` VARCHAR(45) NOT NULL,
  `Description` VARCHAR(45) NOT NULL,
  PRIMARY KEY (`Id`))
;

CREATE TABLE IF NOT EXISTS `dbperson`.`Person` (
  `Id` INT NOT NULL AUTO_INCREMENT,
  `FirstName` VARCHAR(45) NOT NULL,
  `LastName` VARCHAR(45) NOT NULL,
  `IdPersonType` INT NOT NULL,
  PRIMARY KEY (`Id`),
  FOREIGN KEY (`IdPersonType`) REFERENCES `dbperson`.`PersonType` (`Id`))
;

INSERT INTO `persontype` (`Id`, `Name`, `Description`) VALUES ('1', 'Type A', '');
INSERT INTO `persontype` (`Id`, `Name`, `Description`) VALUES ('2', 'Type B', '');

INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('1', 'Sergey', 'Brin', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('2', 'Larry', 'Page', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('3', 'Tim', 'Barners', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('4', 'Linus', 'Torvalds', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('5', 'Larry', 'Ellison', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('6', 'Steve', 'Ballmer', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('7', 'Steve', 'Jobs', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('8', 'Marc', 'Benioff', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('9', 'Ray', 'Ozzie', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('10', 'Nicholas', 'Negroponte', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('11', 'Diane', 'Green', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('12', 'Sam', 'Palmisano', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('13', 'Blake', 'Ross', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('14', 'Ralph', 'Szygenda', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('15', 'Rick', 'Dalzell', '2');

With the database set, the portion of the data access layer refers to the definition of the classes to work with the database features and the context to establish communication between ASP.NET Core and the database, which in this case MySQL is the one being used.

For this purpose, you need to install three NuGet packages:

Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.Tools
MySql.Data.EntityFrameworkCore

If you are working with SQL Server, the NuGet package to install will be: Microsoft.EntityFrameworkCore.SQLServer.

You then need to use the package management console to scaffold from the database (automatically generate the context and feature classes) using the following command:

Scaffold-DbContext "server=servername;port=portnumber;user=username;password=pass;database=databasename" MySql.Data.EntityFrameworkCore -OutputDir Entities -f

With this first part, the connection to the database is listed. What follows is the definition of models with which the website will be worked. These models are:

public class PersonModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int IdPersonType { get; set; }
    public string NamePersonType { get; set; }
}

public class PersonTypeModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

For each of these models there is a service, which has the following operations:

GetAllPersonsAsync()
GetPersonByIdAsync(int personId)
GetPersonByIdAndTypeAsync(int personId, int personTypeId)
GetAllPersonsByTypeAsync(int personTypeId)

PersonTypeService:

GetAllPersonTypesAsync()
GetPersonTypeByIdAsync(int personTypeId)

In Visual Studio 2019 we'll have something like this:

ViewModel

public class DefaultViewModel : MasterPageViewModel
{
    private readonly PersonService personService;
    public BusinessPackDataSet<PersonModel> Persons { get; set; } = new BusinessPackDataSet<PersonModel>();

    public List<int> PersonTypes { get; set; } = new List<int>();
    public string IdSearch { get; set; }
    public bool SearchByTextVisible { get; set; } = false;
    public bool IsWindowDisplayed { get; set; }

    public DefaultViewModel(PersonService personService)
    {
        this.personService = personService;
    }

    public async Task UpdatePersonList()
    {
        IdSearch = null;

        if (PersonTypes.Count == 2)
        {
            Persons.Items = await personService.GetAllPersonsAsync();
            SearchByTextVisible = true;
        }
        else if (PersonTypes.Count == 1)
        {
            int IdPersonType = PersonTypes.FirstOrDefault();
            Persons.Items = await personService.GetAllPersonsByTypeAsync(IdPersonType);
            SearchByTextVisible = true;
        }
        else
        {
            Persons.Items.Clear();
            SearchByTextVisible = false;
        }
    }

    public async Task SearchById()
    {
        if (PersonTypes.Count == 2)
        {
            if (!string.IsNullOrEmpty(IdSearch))
            {
                List<PersonModel> list = new List<PersonModel>(); ;
                list.Add(await personService.GetPersonByIdAsync(Int32.Parse(IdSearch)));
                Persons.Items = list;
            }
            else
            {
                Persons.Items = await personService.GetAllPersonsAsync();
            }
        }
        else if (PersonTypes.Count == 1)
        {
            if (!string.IsNullOrEmpty(IdSearch))
            {
                int IdPersonType = PersonTypes.FirstOrDefault();
                List<PersonModel> list = new List<PersonModel>(); ;
                list.Add(await personService.GetPersonByIdAndTypeAsync(Int32.Parse(IdSearch), IdPersonType));
                Persons.Items = list;
            }
            else
            {
                int IdPersonType = PersonTypes.FirstOrDefault();
                Persons.Items = await personService.GetAllPersonsByTypeAsync(IdPersonType);
            }
        }
    }
}

View

<dot:Content ContentPlaceHolderID="MainContent">

    <div class="content">

        <img src="/Resources/Images/tree.svg" class="content__background-image content__background-image--left" />

        <a href="https://www.dotvvm.com/" target="_blank">
            <img src="/Resources/Images/text.svg" class="content__image" />
        </a>
        <h1>PERSON REPORT FORM</h1>

        <img src="~/icon.png" width="15%" height="15%" />
        <div class="content__text">

            <bp:Window IsDisplayed="{value: IsWindowDisplayed}"
                       HeaderText="Reporting form"
                       CloseOnEscape="false"
                       CloseOnOutsideClick="false">

                <p>

                    <h1>Person report</h1>
                </p>
                <p>
                    <h4>Search by type:</h4>
                <p />
                <bp:CheckBox CheckedItems="{value: PersonTypes}"
                             Changed="{command: UpdatePersonList()}"
                             CheckedValue="{value: 1}" Text="Type A" />
                <br />
                <bp:CheckBox CheckedItems="{value: PersonTypes}"
                             Changed="{command: UpdatePersonList()}"
                             CheckedValue="{value: 2}" Text="Type B" />
                </p>

                <p>
                    <h4>Search by text:</h4>
                <p />
                ID Number:
                <bp:TextBox Text="{value: IdSearch}" Type="Number" class="page-input" Visible="{value: SearchByTextVisible}" />
                <bp:Button Text="Search" Click="{command: SearchById()}" class="page-button" Visible="{value: SearchByTextVisible}" />
                <p />

                <h4>Report:</h4>

                <bp:GridView DataSource="{value: Persons}" class="page-grid">
                    <Columns>
                        <bp:GridViewTextColumn Value="{value: Id}" HeaderText="Id" />
                        <bp:GridViewTextColumn Value="{value: FirstName}" HeaderText="Firstname" />
                        <bp:GridViewTextColumn Value="{value: LastName}" HeaderText="LastName" />
                        <bp:GridViewTextColumn Value="{value: NamePersonType}" HeaderText="Type" />
                    </Columns>
                    <EmptyDataTemplate>
                        There are no search results.
                    </EmptyDataTemplate>
                </bp:GridView>

            </bp:Window>

            <bp:Button Text="LOAD REPORT"
                       Click="{command: IsWindowDisplayed = true}" />

        </div>

        <img src="/Resources/Images/tree.svg" class="content__background-image content__background-image content__background-image--right" />
    </div>
</dot:Content>

Application Analysis

In the following GIF, we can see in a general way the interaction with this small web page.

The first element we will analyze is the Window component, which represents a modal dialog box, as in HTML. This control allows us to customize directly from its attributes as the window will be displayed. If we were working with DotVVM's base controls, to achieve this functionality we would have to make use of some Javascript functionalities directly to set the window. In this example, the window title can be assigned. You can also customize certain properties, such as not allowing the window to close by pressing the Escape key or clicking outside the window box.

In this example, the Boolean attribute IsWindowDisplayed, according to its value true or false, will allow whether or not to display the settings window.

<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
            HeaderText="Reporting form"
            CloseOnEscape="false"
            CloseOnOutsideClick="false">

Here is the definition of the IsWindowDisplayed attribute for the window display:

public bool IsWindowDisplayed { get; set; }

To display the window, a button is used. This button is also another of the Business Pack components. The premium version allows you to make certain customizations in terms of its styles, for example, enable/disable the button, assign an icon, among other functionalities: Button/2.0.

The result is as follows:

Within this window, the most important item corresponds to the table that allows users registered in the database to be listed. For this purpose, we use the GridView element, another DotVVM control that allows us to create tables to represent specific data. As the main part, the control allows us to indicate the data source through the DataSource property, in this case, the data source is defined as follows in the ViewModel:

public GridViewDataSet<PersonModel> Persons { get; set; } = new GridViewDataSet<PersonModel>();

The GridViewTextColumn tag is used for a column definition. In this case, we can find the Id, FirstName, LastName and Type columns. These names come from the data type of the data source, in this case, from the PersonModel model.

<bp:GridView DataSource="{value: Persons}" class="page-grid">
    <Columns>
        <bp:GridViewTextColumn Value="{value: Id}" HeaderText="Id" />
        <bp:GridViewTextColumn Value="{value: FirstName}" HeaderText="Firstname" />
        <bp:GridViewTextColumn Value="{value: LastName}" HeaderText="LastName" />
        <bp:GridViewTextColumn Value="{value: NamePersonType}" HeaderText="Type" />
    </Columns>
    <EmptyDataTemplate>
        There are no search results.
    </EmptyDataTemplate>
</bp:GridView>

One of the sub-tags in GridView is EmptyDataTemplate, which is also included in DotVVM base controls. This tag allows you to display some HTML content in case the list of items is empty. In the end, with GridView we will visualize something like this:

Learn more about the GridView component here: GridView/2.0.

All right, with this table, we have the most important part of the report. From this, we can add additional components to set search criteria for example, and update this table based on the search.

The first case is using the premium version of the DotVVM CheckBox control. As in HTML or any other design environment, the CheckBox has the role of a checkbox for selecting items in an option set. For this example, the goal is to have two checkboxes, which correspond to the types of people. Depending on the selection, either type A, type B, or both, the table of records will be updated in accordance with this decision.

In the view part, we find the CheckedItems property that stores the value of the items that are selected. We also find the Changed property, which allows you to specify the method that will perform the actions at the time this element is activated or disabled.

<bp:CheckBox CheckedItems="{value: PersonTypes}"
                Changed="{command: UpdatePersonList()}"
                CheckedValue="{value: 1}" Text="Type A" />

<bp:CheckBox CheckedItems="{value: PersonTypes}"
                Changed="{command: UpdatePersonList()}"
                CheckedValue="{value: 2}" Text="Type B" />

In the method of updating the records in the table, if we select one of the two types, then we will query the database according to the defined service: PersonService, to get the list of people according to the selected id. With this list retrieved, we will update the database by re-setting the items in the GridView data source.

Persons.Items.Clear();

As we saw in the GIF, the result of using the CheckBox control is as follows:

Learn more about the CheckBox component here: CheckBox/2.0.

Another of the controls that allow us to continue adding functionality to the GridView to set the search criteria for this report is the TextBox and Button elements. In this case, these components can be used to search for something specific to the report through a text entry. To exemplify the use of these elements in your app, the controls are used to find a specific person based on their ID.

ID Number:

<bp:TextBox Text="{value: IdSearch}" Type="Number" class="page-input" Visible="{value: SearchByTextVisible}" />

<bp:Button Text="Search" Click="{command: SearchById()}" class="page-button" Visible="{value: SearchByTextVisible}" />

Updating the elements of the GridView is similar to the CheckBox case. The result is as follows:

All the information about the TextBox control can be found in: TextBox/2.0. Y la del control Button en: Button/2.0.

What's next?

In this article, we learned certain features of the Windows, GridView, CheckBox, TextBox and Button components of DotVVM's Business Pack control set to display a list of data and set search criteria through the Model, View, ViewModel pattern in ASP.NET Core and DotVVM.

The source code for this implementation is available in this repository: Reports in DotVVM with Business Pack controls.

Here are some additional resources that might be of interest to you to continue to gain new knowledge in this area:

Free and open course on YouTube (Spanish): ASP.NET Core and DotVVM Fundamentals.
DotVVM and ASP.NET Core: Implementing CRUD Operations.
Working with web services through ASP.NET Core and DotVVM.

Thank you:

If you have any concerns or need help in something particular, it will be a pleasure to be able to collaborate.

See you on Twitter!! :)

GitHub Actions + Azure: Implementación continua de aplicaciones con ASP.NET Core y DotVVM

Daniel Gomez — Tue, 11 Aug 2020 21:16:57 +0000

En el mundo del desarrollo de software, palabras como implementación continua siempre se encuentran presentes. En este caso, la implementación continua es una estrategia para las versiones de software, para que cualquier confirmación de código que pase la fase de pruebas de forma automatizada, se libere automáticamente en un entorno de producción, desplegando los cambios que son visibles para los usuarios del software en cuestión.

Esta es una pequeña variación de la entrega continua, pues si antes se tenía que realizar un despliegue manual, aquí en (CD) simplemente por cada merge a la rama máster se procede a realizar un despliegue de forma automática, el proceso queda de la siguiente manera:

Control de cambios (Source Control)
Construcción y Pruebas (Build and Tests)
Puesta en escena (Staging)
Despliege a Producción (Production): Última versión corriendo en la web principal

Teniendo en cuenta estas consideraciones, con la implementación continua, se automatiza todo el proceso desde la confirmación de código hasta la producción. El desencadenador entre las fases de desarrollo y entrega es automático, por lo que los cambios de código se insertan en vivo una vez que reciben la validación y pasan todas las pruebas. Esto significa que los usuarios reciben mejoras tan pronto como están disponibles.

En este articulo tutorial aprenderemos paso a paso el proceso de implementación continua de una aplicación web desarrollada con DotVVM a través de ASP.NET Core para publicarla de forma automática y continua en un recurso App Service de Azure, empleando GitHub Actions.

En relación a los Actions de GitHub, esta es una funcionalidad que nos permite crear flujos de trabajo (workflows) que se pueden utilizar para compilar, probar y desplegar código, dando la posibilidad de crear flujos de integración y despliegue continuo dentro del propio repositorio de GitHub como veremos más adelante.

Actividades:

Para llevar a cabo las actividades de despliegue continuo, tendemos tres partes importantes dentro de este proceso:

Parte 1: Asociar el proyecto en cuestión desde Visual Studio 2019 con un repositorio en GitHub.
Parte 2: Crear un recurso App Service en Azure.
Parte 3: Configurar las acciones de despliegue hacia Azure en el repositorio de GitHub.

Recursos necesarios:

Para seguir paso a paso este artículo, es necesario tener en funcionamiento las siguientes herramientas:

.NET Core SDK.
Visual Studio 2019.
La carga de trabajo: Desarrollo web y ASP.NET, para Visual Studio 2019.
La extensión de DotVVM para Visual Studio 2019.
Una cuenta de GitHub.
Una suscripción de Azure.
En caso de que el proyecto este asociado a una base de datos, esta deberá estar alojada en la nube.

El entorno de la solución

Los proyectos para el desarrollo de aplicaciones con ASP.NET Core y DotVVM se fundamentan en el patrón Modelo, Vista, Vistamodelo; para la comunicación entre HTML (páginas web) y C# (código fuente). La finalidad de estas partes son las siguientes:

El modelo. — es responsable de todos los datos de la aplicación y de la lógica de negocios relacionada.
La vista. — Representaciones para el usuario final del modelo de la aplicación. La vista es responsable de mostrar los datos al usuario y de permitir la manipulación de los datos de la aplicación.
El Modelo-Vista o Vista-Modelo. — uno o más por vista; el modelo-vista es responsable de implementar el comportamiento de la vista para responder a las acciones del usuario y de exponer los datos del modelo fácilmente.

En este caso, existen tres proyectos para este propósito:

DAL (Data Access Layer): para manejar la conexión y el acceso a la base de datos.
BL (Business Layer): para el manejo de los servicios y la lógica del dominio de la aplicación.
APP - Capa de presentación de la aplicación. En esta sección es donde tenemos los Views y Viewmodels para el diseño de las páginas web con DotVVM.

La solución en Visual Studio 2019 tiene el siguiente aspecto:

¿Deseas saber cuáles son los pasos para crear una aplicación DotVVM? Para ello puedes revisar este articulo: Pasos para crear una aplicación MVVM (Model-View-Viewmodel) con DotVVM y ASP.NET Core.

Parte 1: Asociar el proyecto desde Visual Studio 2019 con un repositorio en GitHub

Lo primero que debemos hacer es verificar que tengamos instalada la extensión de GitHub para Visual Studio 2019. Para esto podemos dirigirnos al menú de opciones en la sección Extensiones y seleccionar la opción Manejar Extensiones. En este recuadro podremos realizar la verificación.

En caso de que no se cuente con la extensión de GitHub para Visual Studio 2019, el instalador se puede encontrar en la siguiente dirección: https://visualstudio.github.com/. Para agregar la extensión, Visual Studio debe estar cerrado ya que son cambios al IDE de Microsoft que se realizan durante la instalación.

Ahora sí, dicho esto, procedemos a asociar a la solución que contiene los tres proyectos (.APP, .BL y .DAL) a un repositorio en GitHub, para ello damos clic derecho en la solución de Visual Studio y seleccionamos agregar solución al control de código fuente:

Posteriormente nos dirigimos a la vista Team Explorer y conectamos nuestra cuenta de GitHub con Visual Studio en la opción Conectar.

Luego nos dirigimos a la opción del Team Explorer: Sincronización: seleccionamos Publicar en GitHub y continuamos con las instrucciones presentadas para la creación de un nuevo repositorio.

Poco tiempo después, nuestro proyecto estará asociado al repositorio que acabamos de crear. Esto lo podemos comprobar directamente desde GitHub:

Nota: Siempre que necesitemos guardar los cambios realizados, podemos guardarlos desde la sección Cambios del Team Explorer:

Y en la sección Sincronizar es necesario confirmar los cambios de salida:

Con estos primeros pasos, nuestra aplicación con DotVVM y ASP.NET Core en Visual Studio 2019 ya se encuentra asociada a un repositorio en GitHub determinado.

Parte 2: Crear un recurso App Service en Azure

Para crear un recurso de tipo App Service en Azure, podemos dirigirnos al portal: portal.azure.com/ y luego buscar el servicio en el panel de la izquierda de Azure en donde se encuentran los recursos más utilizados de Azure o en la sección de búsqueda. En cualquiera de los dos escenarios, procedemos a crear el recurso y a la final tendremos algo como esto:

En el cual, será necesario especificar el nombre del Web App, el entorno de ejecución, que en este caso es .NET Core y su última versión la 3.1 (Julio 2020). Asimismo, es necesario especificar el sistema operativo sobre el cual se desplegará la aplicación.

El proceso de creación tomará unos cuantos segundos.

Luego debemos dirigirnos al recurso en la sección general y en el menú de opciones en la sección Obtener perfil de publicación, hacemos clic para descargar el archivo de publicación correspondiente. Este archivo nos permitirá establecer una acción en GitHub para el despliegue continuo, como veremos en la Parte 3.

Parte 3: GitHub Actions para el despliegue continuo de aplicaciones en Azure

En el entorno de GitHub, un flujo de trabajo es un proceso automatizado el cual es definido en un repositorio de GitHub. Este proceso indica a GitHub cómo crear e implementar un proyecto de aplicación de funciones en GitHub.

Teniendo en cuenta estas consideraciones, GitHub Actions permite crear flujos de trabajo de ciclo de vida de software personalizados directamente en un repositorio GitHub. En este sentido, las acciones permiten crear, probar e implementar el código directamente desde GitHub.

En nuestro caso de estudio, las acciones de GitHub nos permiten definir un flujo de trabajo para crear e implementar automáticamente el proyecto desarrollado con ASP.NET Core y DotVVM en la aplicación de funciones de Azure.

Para crear este flujo de trabajo realizaremos estas actividades:

A. Configuración del secreto de GitHub
B. Configurar un flujo de trabajo
C. Implementación continua en acción

Para empezar, nos dirigiremos al repositorio de GitHub creado desde Visual Studio 2019 en la Parte 1. Con este repositorio realizaremos cada una de las actividades establecidas inicialmente.

A. Configuración del secreto de GitHub

Dentro del repositorio en cuestión, en los menús de opciones nos dirigiremos a la ruta Configuración > Secretos > Nuevo secreto.

En esta sección especificaremos el nombre del secreto, en este caso será SCM_CREDENTIALS, y el valor, el cual, corresponde al contenido del archivo de publicación descargado desde el recurso App Service en Azure, establecido en la Parte 2. Los campos tendrán un aspecto como este:

Finalmente seleccionamos en Agregar secreto.

B. Configurar un flujo de trabajo

Ahora lo que realizaremos es configurar el flujo de trabajo que permitirá establecer la funcionalidad para la implementación continua hacia Azure. Para ello, dentro del repositorio, debemos dirigirnos en la sección de Actions y seleccionar en set up a workflow yourself.

Nota: en esta sección de Actions también podemos encontrar flujos de trabajos ya establecidos para otro tipo de operaciones, por ejemplo:

Al intentar crear un flujo de trabajo por nuestra parte, un archivo YAML (.yml) definirá este flujo en la ruta de acceso /.github/workflows/ del repositorio. En esta definición se incluyen los diversos pasos y parámetros que componen el flujo de trabajo.

Dicho esto, en este apartado es donde escribiremos el código fuente para el flujo de trabajo. El código final es el siguiente:

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy ASP.NET Core with DotVVM app to Azure

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: windows-latest

    steps:
    - uses: actions/checkout@master

    - name: Set up .NET Core
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: '3.1'

    - name: Build with dotnet
      run: dotnet build --configuration Release

    - name: dotnet publish
      run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp

    - name: Deploy to Azure Web App
      uses: azure/webapps-deploy@v1
      with:
        app-name: '<APP_NAME>'
        slot-name: 'production'
        publish-profile: ${{ secrets. SCM_CREDENTIALS }}
        package: ${{env.DOTNET_ROOT}}/myapp

A continuación, veamos las partes mas importantes de este código.

En la sección name tenemos la definición del nombre de la acción. Podemos tener múltiples acciones en un mismo archivo y múltiples archivos en la carpeta .github/workflows.

En el apartado on se define el disparador de la acción, el cual puede ser cualquier evento que desencadene flujos de trabajo, donde los más comunes son push y pull_request, pero existen muchos otros disparadores. En este caso, esa será la acción que indicará que un nuevo proceso de implementación continua deberá ser iniciado.

Luego en jobs, tenemos la definición de los trabajos. El nombre de este grupo se llama build-and-deploy. Siguiendo con esta secuencia, Github actions define tres ambientes de ejecución para sus trabajos: windows-latest , ubuntu-latest y macos-latest los cuales son definidos en el nodo runs-on y ejecutan máquinas virtuales para la ejecución de las instrucciones subsiguientes. En este caso se ha definido como windows-latest. Posteriormente, los pasos son definidos en la sección de steps:

Como primer paso nos encontramos con la definición del tipo de flujo de trabajo, en este caso se utiliza use, el cual permite integrar en nuestro flujo con acciones definidos por terceros.
Luego la versión ASP.NET Core es definida, en este caso, es necesario especificar en este apartado la versión de nuestro proyecto de ASP.NET Core con DotVVM. La versión en este ejemplo es la 3.1.
Posteriormente se realiza un build al proyecto en el paso Build with dotnet.
Después, se preparan los archivos necesarios para el despliegue con dotnet publish.
Finalmente la implementación de estos archivos hacia Azure se lleva a cabo. En este caso, es necesario indicar el nombre del recurso App Service creado en Azure en el atributo app-name y en publish-profile se indica el nombre del secreto creado en el repositorio de GitHub, para este caso, el nombre establecido en la parte B fue SCM_CREDENTIALS.

Luego guardamos el archivo YAML y el flujo de trabajo estará listo para realizar la implementación continua cada vez que exista un cambio en el repositorio.

C. Implementación continua en acción

Al realizar algún cambio dentro del repositorio o desde Visual Studio 2019, el flujo de trabajo se ejecutará. Desde el apartado Actions en el repositorio de GitHub podemos ver como se realiza este proceso paso a paso, de acuerdo con los nombres y los pasos establecidos en el archivo YAML.

El resultado final de esta implementación es el siguiente:

¿Qué sigue?

Con este articulo hemos aprendido paso a paso como implementar de forma continua aplicaciones web con ASP.NET Core y DotVVM a través de GitHub Actions.

El código fuente del proyecto de muestra está disponible en el siguiente repositorio: DotVVM Sample CRUD.

A continuación, se listan algunos recursos adicionales que podrían ser de tu interés para seguir adquiriendo nuevos conocimientos en esta área:

Curso gratuito y abierto en YouTube: Fundamentos de ASP.NET Core y DotVVM.
DotVVM y ASP.NET Core: Implementación de operaciones CRUD.
Trabajando con servicios web a través de ASP.NET Core y DotVVM.

Gracias:

Si tienes alguna inquietud o necesitas ayuda en algo particular, será un gusto poder ayudar.

Nos vemos en Twitter!! :)

¡Hasta pronto!

Página web para el informe de datos con DotVVM Business Pack

Daniel Gomez — Thu, 06 Aug 2020 09:26:06 +0000

En muchas ocasiones cuando trabajamos con sistemas que tienen como objetivo realizar operaciones sobre una base de datos, existe la necesidad de incluir una sección dentro de estos sistemas para visualizar los datos correspondientes. Dentro de las páginas web, normalmente se emplean tablas para representar a la información, secciones de búsqueda para filtrar la información, entre otros elementos.

En este articulo aprenderemos como diseñar de una manera sencilla, una página web para visualizar ciertos datos alojados en tablas de una base de datos relaciona a través de ASP.NET Core y DotVVM. En artículos anteriores, pudimos aprender de manera general como utilizar controles predefinidos de DotVVM para la visualización de datos a manera de reporte. Estos son algunos de esos artículos:

Asimismo, cuando se manejan formularios para administrar información, es necesario crear tablas para poder visualizar los datos tratados. Estos son algunos artículos previos por si deseas aprender como diseñar formularios con HTML con DotVVM:

En esta ocasión aprenderemos los fundamentos para visualizar determinados datos y establecer algunos criterios de búsqueda con C# y HTML, a través de los controles premium de DotVVM sobre ASP.NET Core, denominados como DotVVM Business Pack.

Nota: el código fuente del proyecto que analizaremos en este articulo lo puedes encontrar en este repositorio de GitHub: Reports in DotVVM with Business Pack controls.

El patrón de diseño Modelo, Vista, Vistamodelo - MVVM

DotVVM se fundamenta en el patrón de diseño Modelo, Vista, Vistamodelo sobre .NET para la comunicación entre HTML (páginas web) y C# (código fuente). La finalidad de estas partes son las siguientes:

El modelo. — es responsable de todos los datos de la aplicación y de la lógica de negocios relacionada.
La vista. — Representaciones para el usuario final del modelo de la aplicación. La vista es responsable de mostrar los datos al usuario y de permitir la manipulación de los datos de la aplicación.
Modelo-Vista o Vista-Modelo. — uno o más por vista; el modelo-vista es responsable de implementar el comportamiento de la vista para responder a las acciones del usuario y de exponer los datos del modelo fácilmente.

¿Cómo se puede acceder a DotVVM Business Pack?

Business Pack es un NuGet privado, en el cual, podemos hacer uso de los competentes premium ya establecidos por DotVVM para la construcción de aplicaciones web en el ámbito empresarial.

Para la instalación de la versión Business Pack de DotVVM, es necesario realizar una configuración de unos pocos minutos para poder emplear estas funcionalidades. Todo se resume en lo siguiente:

Instalar la extensión de DotVVM para Visual Studio 2019.
Adquirir Business Pack (existe la versión de prueba) en la siguiente dirección: DotVVM Business Pack.
Iniciar sesión en la extensión de DotVVM para Visual Studio 2019. Para ello, podemos dirigirnos al menú de opciones de Visual Studio en la ruta: Extensiones -> DotVVM -> About. Y listo, eso será todo.

Reporte con ASP.NET Core y DotVVM

Para ejemplificar la utilización de algunos controles Business Pack de DotVVM para la realización de un reporte, tendemos una pequeña aplicación como esta:

Teniendo en cuenta el patrón MVVM – Modelo, Vista, Vistamodelo, analizaremos de forma general cada una de estas partes para este proyecto, que tiene como objetivo mostrar los datos de usuarios determinados.

Modelo

Los datos de la aplicación y de la lógica de negocios relacionada se maneja en esta sección. En este sentido, vamos a ver cómo se manejan los datos y los servicios correspondientes.

La base de datos está conformada por dos tablas: Person y PersonType.

Las sentencias SQL para la creación de estas tablas, sus atributos y la inserción de algunos registros son las siguientes:

CREATE SCHEMA IF NOT EXISTS `dbperson` DEFAULT CHARACTER SET utf8;
USE `dbperson` ;

CREATE TABLE IF NOT EXISTS `dbperson`.`PersonType` (
  `Id` INT NOT NULL,
  `Name` VARCHAR(45) NOT NULL,
  `Description` VARCHAR(45) NOT NULL,
  PRIMARY KEY (`Id`))
;

CREATE TABLE IF NOT EXISTS `dbperson`.`Person` (
  `Id` INT NOT NULL AUTO_INCREMENT,
  `FirstName` VARCHAR(45) NOT NULL,
  `LastName` VARCHAR(45) NOT NULL,
  `IdPersonType` INT NOT NULL,
  PRIMARY KEY (`Id`),
  FOREIGN KEY (`IdPersonType`) REFERENCES `dbperson`.`PersonType` (`Id`))
;

INSERT INTO `persontype` (`Id`, `Name`, `Description`) VALUES ('1', 'Type A', '');
INSERT INTO `persontype` (`Id`, `Name`, `Description`) VALUES ('2', 'Type B', '');

INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('1', 'Sergey', 'Brin', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('2', 'Larry', 'Page', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('3', 'Tim', 'Barners', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('4', 'Linus', 'Torvalds', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('5', 'Larry', 'Ellison', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('6', 'Steve', 'Ballmer', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('7', 'Steve', 'Jobs', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('8', 'Marc', 'Benioff', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('9', 'Ray', 'Ozzie', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('10', 'Nicholas', 'Negroponte', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('11', 'Diane', 'Green', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('12', 'Sam', 'Palmisano', '1');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('13', 'Blake', 'Ross', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('14', 'Ralph', 'Szygenda', '2');
INSERT INTO `person` (`Id`, `FirstName`, `LastName`, `IdPersonType`) VALUES ('15', 'Rick', 'Dalzell', '2');

Con la base de datos establecida, la parte correspondiente a la capa de acceso de datos hace referencia a la definición de las clases para trabajar con las entidades de la base de datos y al contexto para establecer la comunicación entre ASP.NET Core y la base de datos, que, en este caso, MySQL es la que se esta utilizando.

Para este propósito, es necesario instalar tres paquetes NuGet:

Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.Tools
MySql.Data.EntityFrameworkCore

En caso de que se esté trabajando con SQL Server, el paquete NuGet a instalar será: Microsoft.EntityFrameworkCore.SQLServer.

Posteriormente, es necesario utilizar la consola de administración de paquetes para realizar scaffolding desde la base de datos (generar automáticamente el contexto y las clases de las entidades) a través del siguiente comando:

Scaffold-DbContext "server=servername;port=portnumber;user=username;password=pass;database=databasename" MySql.Data.EntityFrameworkCore -OutputDir Entities -f

Con esta primera parte, la conexión a la base de datos esta lista. Lo que prosigue a continuación es la definición de modelos con los cuales se trabajará en la página web. Estos modelos son:

public class PersonModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int IdPersonType { get; set; }
    public string NamePersonType { get; set; }
}

public class PersonTypeModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

Para cada uno de estos modelos se cuenta con un servicio, los cuales tienen las siguientes operaciones:

PersonService:

GetAllPersonsAsync()
GetPersonByIdAsync(int personId)
GetPersonByIdAndTypeAsync(int personId, int personTypeId)
GetAllPersonsByTypeAsync(int personTypeId)

PersonTypeService:

GetAllPersonTypesAsync()
GetPersonTypeByIdAsync(int personTypeId)

En Visual Studio 2019 tendremos algo como esto:

Vistamodelo

public class DefaultViewModel : MasterPageViewModel
{
    private readonly PersonService personService;
    public BusinessPackDataSet<PersonModel> Persons { get; set; } = new BusinessPackDataSet<PersonModel>();

    public List<int> PersonTypes { get; set; } = new List<int>();
    public string IdSearch { get; set; }
    public bool SearchByTextVisible { get; set; } = false;
    public bool IsWindowDisplayed { get; set; }

    public DefaultViewModel(PersonService personService)
    {
        this.personService = personService;
    }

    public async Task UpdatePersonList()
    {
        IdSearch = null;

        if (PersonTypes.Count == 2)
        {
            Persons.Items = await personService.GetAllPersonsAsync();
            SearchByTextVisible = true;
        }
        else if (PersonTypes.Count == 1)
        {
            int IdPersonType = PersonTypes.FirstOrDefault();
            Persons.Items = await personService.GetAllPersonsByTypeAsync(IdPersonType);
            SearchByTextVisible = true;
        }
        else
        {
            Persons.Items.Clear();
            SearchByTextVisible = false;
        }
    }

    public async Task SearchById()
    {
        if (PersonTypes.Count == 2)
        {
            if (!string.IsNullOrEmpty(IdSearch))
            {
                List<PersonModel> list = new List<PersonModel>(); ;
                list.Add(await personService.GetPersonByIdAsync(Int32.Parse(IdSearch)));
                Persons.Items = list;
            }
            else
            {
                Persons.Items = await personService.GetAllPersonsAsync();
            }
        }
        else if (PersonTypes.Count == 1)
        {
            if (!string.IsNullOrEmpty(IdSearch))
            {
                int IdPersonType = PersonTypes.FirstOrDefault();
                List<PersonModel> list = new List<PersonModel>(); ;
                list.Add(await personService.GetPersonByIdAndTypeAsync(Int32.Parse(IdSearch), IdPersonType));
                Persons.Items = list;
            }
            else
            {
                int IdPersonType = PersonTypes.FirstOrDefault();
                Persons.Items = await personService.GetAllPersonsByTypeAsync(IdPersonType);
            }
        }
    }
}

Vista

<dot:Content ContentPlaceHolderID="MainContent">

    <div class="content">

        <img src="/Resources/Images/tree.svg" class="content__background-image content__background-image--left" />

        <a href="https://www.dotvvm.com/" target="_blank">
            <img src="/Resources/Images/text.svg" class="content__image" />
        </a>
        <h1>PERSON REPORT FORM</h1>

        <img src="~/icon.png" width="15%" height="15%" />
        <div class="content__text">

            <bp:Window IsDisplayed="{value: IsWindowDisplayed}"
                       HeaderText="Reporting form"
                       CloseOnEscape="false"
                       CloseOnOutsideClick="false">

                <p>

                    <h1>Person report</h1>
                </p>
                <p>
                    <h4>Search by type:</h4>
                <p />
                <bp:CheckBox CheckedItems="{value: PersonTypes}"
                             Changed="{command: UpdatePersonList()}"
                             CheckedValue="{value: 1}" Text="Type A" />
                <br />
                <bp:CheckBox CheckedItems="{value: PersonTypes}"
                             Changed="{command: UpdatePersonList()}"
                             CheckedValue="{value: 2}" Text="Type B" />
                </p>

                <p>
                    <h4>Search by text:</h4>
                <p />
                ID Number:
                <bp:TextBox Text="{value: IdSearch}" Type="Number" class="page-input" Visible="{value: SearchByTextVisible}" />
                <bp:Button Text="Search" Click="{command: SearchById()}" class="page-button" Visible="{value: SearchByTextVisible}" />
                <p />

                <h4>Report:</h4>

                <bp:GridView DataSource="{value: Persons}" class="page-grid">
                    <Columns>
                        <bp:GridViewTextColumn Value="{value: Id}" HeaderText="Id" />
                        <bp:GridViewTextColumn Value="{value: FirstName}" HeaderText="Firstname" />
                        <bp:GridViewTextColumn Value="{value: LastName}" HeaderText="LastName" />
                        <bp:GridViewTextColumn Value="{value: NamePersonType}" HeaderText="Type" />
                    </Columns>
                    <EmptyDataTemplate>
                        There are no search results.
                    </EmptyDataTemplate>
                </bp:GridView>

            </bp:Window>

            <bp:Button Text="LOAD REPORT"
                       Click="{command: IsWindowDisplayed = true}" />

        </div>

        <img src="/Resources/Images/tree.svg" class="content__background-image content__background-image content__background-image--right" />
    </div>
</dot:Content>

Análisis de la aplicación

En el siguiente GIF se puede visualizar de manera general la interacción con esta pequeña página web.

El primer elemento que analizaremos es el componente Window, el cual, representa a una ventana de diálogo de tipo modal, como en HTML. Este control nos permite personalizar directamente desde sus atributos como se visualizará la ventana. Si estuviésemos trabajando con los controles base de DotVVM, para lograr esta funcionalidad tendríamos que hacer uso de algunas funcionalidades de Javascript directamente para establecer la ventana. En este ejemplo, el título de la ventana se puede asignar. Asimismo, se pueden personalizar ciertas propiedades, por ejemplo, no permitir que la ventana se cierre al presionar la tecla Escape o dar clic fuera del recuadro de la ventana.

En este ejemplo, el atributo booleano IsWindowDisplayed, de acuerdo con su valor true o false, permitirá visualizar o no la ventana establecida.

<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
            HeaderText="Reporting form"
            CloseOnEscape="false"
            CloseOnOutsideClick="false">

Esta es la definición del atributo IsWindowDisplayed para la visualización de la ventana:

public bool IsWindowDisplayed { get; set; }

Para mostrar la ventana, se hace uso de un botón. Este botón también es otro de los componentes Business Pack. La versión premium permite realizar ciertas personalizaciones en cuanto a sus estilos, por ejemplo, activar/desactivar el botón, asignar un icono, entre otras funcionalidades: Button/2.0.

El resultado es el siguiente:

Dentro de esta ventana, el elemento mas importante corresponde a la tabla que permite listar a los usuarios registrados en la base de datos. Para este objetivo se utiliza el elemento GridView, otro control de DotVVM que nos permite crear tablas para representar datos en específico. Como parte principal, el control nos permite indicar la fuente de datos a través de la propiedad DataSource, en este caso, la fuente de datos se define de la siguiente manera en el Viewmodel:

public GridViewDataSet<PersonModel> Persons { get; set; } = new GridViewDataSet<PersonModel>();

Para la definición de las columnas se utiliza la etiqueta GridViewTextColumn. En este caso, podemos encontrar las columnas Id, FirstName, LastName y Type. Estos nombres vienen del tipo de dato de la fuente de datos, en este caso, del modelo PersonModel.

<bp:GridView DataSource="{value: Persons}" class="page-grid">
    <Columns>
        <bp:GridViewTextColumn Value="{value: Id}" HeaderText="Id" />
        <bp:GridViewTextColumn Value="{value: FirstName}" HeaderText="Firstname" />
        <bp:GridViewTextColumn Value="{value: LastName}" HeaderText="LastName" />
        <bp:GridViewTextColumn Value="{value: NamePersonType}" HeaderText="Type" />
    </Columns>
    <EmptyDataTemplate>
        There are no search results.
    </EmptyDataTemplate>
</bp:GridView>

Una de las sub-etiquetas de GridView es EmptyDataTemplate, la cual está incluida también en los controles base de DotVVM. Esta etiqueta permite mostrar algún contenido HTML en caso de que el listado de elementos se encuentre vacío. A la final, con GridView visualizaremos algo como esto:

Más información sobre el componente GridView aquí: GridView/2.0.

Muy bien, con esta tabla tenemos la parte más importante del reporte. A partir de esto, podemos agregar componentes adicionales para establecer criterios de búsqueda por ejemplo y actualizar esta tabla según la búsqueda.

El primer caso es utilizando la versión premium del control CheckBox de DotVVM. Al igual que en HTML o cualquier otro entorno de diseño, el CheckBox tiene el rol como casilla de verificación para seleccionar elementos en un conjunto de opciones. Para este ejemplo, el objetivo es tener dos casillas de verificación, los cuales corresponden a los tipos de personas. Según la selección, ya sea del tipo A, del tipo B, o de los dos, la tabla de registros se actualizará de acuerdo con esta decisión.

En la parte de la vista, nos encontramos con la propiedad CheckedItems que almacenara el valor de los elementos que se encuentren seleccionados. Asimismo, nos encontramos con la propiedad Changed, la cual permite especificar el método que realizara las acciones al momento que este elemento sea activado o desactivado.

<bp:CheckBox CheckedItems="{value: PersonTypes}"
                Changed="{command: UpdatePersonList()}"
                CheckedValue="{value: 1}" Text="Type A" />

<bp:CheckBox CheckedItems="{value: PersonTypes}"
                Changed="{command: UpdatePersonList()}"
                CheckedValue="{value: 2}" Text="Type B" />

En el método de actualización de los registros de la tabla, si seleccionados uno de los dos tipos, entonces realizaremos una consulta en la base de datos de acuerdo con el servicio definido: PersonService, para obtener el listado de personas según el id seleccionado. Con este listado recuperado, actualizaremos la base de datos al establecer nuevamente los ítems de la fuente de datos del GridView.

Persons.Items.Clear();

Como vimos en el GIF, el resultado de utilizar el control CheckBox es el siguiente:

Más información sobre el componente CheckBox aquí: CheckBox/2.0.

Otro de los controles que nos permiten seguir agregando funcionalidades al GridView para establecer criterios de búsqueda a este reporte son los elementos TextBox y Button. En este caso, estos componentes pueden ser de utilizad para buscar algún elemento específico del reporte a través de una entrada de texto. Para ejemplificar el uso de estos elementos en la aplicación, los controles sirven para encontrar a una persona especifica según su Id.

ID Number:

<bp:TextBox Text="{value: IdSearch}" Type="Number" class="page-input" Visible="{value: SearchByTextVisible}" />

<bp:Button Text="Search" Click="{command: SearchById()}" class="page-button" Visible="{value: SearchByTextVisible}" />

La actualización de los elementos del GridView es similar al caso del CheckBox. El resultado es el siguiente:

Toda la información sobre el control TextBox la podemos encontrar en: TextBox/2.0. Y la del control Button en: Button/2.0.

¿Qué sigue?

Con este artículo, hemos aprendido ciertas características de los componentes Windows, GridView, CheckBox, TextBox y Button del conjunto de controles Business Pack de DotVVM para visualizar un listado de datos y establecer criterios de búsqueda a través del patrón de diseño Modelo, Vista, Vistamodelo en ASP.NET Core y DotVVM.

El código fuente de esta implementación está disponible en este repositorio: Reports in DotVVM with Business Pack controls.

Recursos adicionales

Deseas seguir adquiriendo nuevos conocimientos sobre ASP.NET Core y DotVVM, estos recursos podrían ser de tu interés:

Curso gratuito y abierto en YouTube: Fundamentos de ASP.NET Core y DotVVM.
DotVVM y ASP.NET Core: Implementación de operaciones CRUD.
Trabajando con servicios web a través de ASP.NET Core y DotVVM.

Gracias:

Si tienes alguna inquietud o necesitas ayuda en algo particular, será un gusto poder ayudar.

Nos vemos en Twitter!! :)

¡Hasta pronto!

GitHub Actions + Azure: Continuous deployment of ASP.NET Core with DotVVM applications

Daniel Gomez — Mon, 03 Aug 2020 21:07:51 +0000

In the world of software development, words such as continuous implementation are always present. In this case, continuous deployment is a strategy for software versions, so that any code commit that passes the testing phase automatically is released in a production environment, deploying changes that are visible to users of the software in question.

This is a small variation of continuous delivery because if you had to perform a manual deployment before, here in (CD) simply for each merge to the master branch is proceeded to perform a deployment automatically, the process remains as follows:

Change Control (Source Control)
Build and Tests
Staging (Staging)
Deploy to Production: Latest version running on the main website

Taking these considerations into account, with continuous deployment, the entire process from code commit to production is automated. The trigger between the development and delivery phases is automatic, so code changes are pushed live once they receive validation and pass all tests. This means that users receive improvements as soon as they are available.

In this tutorial article, we'll learn step-by-step the process of continuously deploying a web application developed with DotVVM through ASP.NET Core to publish it automatically and continuously to an Azure App Service resource, using GitHub Actions.

In relation to GitHub Actions, this is a functionality that allows us to create workflows that can be used to compile, test and deploy code, giving the possibility to create integration flows and continuous deployment within the GitHub repository itself as we will see later.

Activities:

To carry out continuous deployment activities, we have three important parts within this process:

Part 1: Associate the project in question from Visual Studio 2019 with a repository on GitHub.
Part 2: Create an App Service resource in Azure.
Part 3: Configure deployment actions to Azure in the GitHub repository.

Required Resources:

To follow this article step by step, you need to have these tools:

.NET Core SDK.
Visual Studio 2019.
Workload: Web Development and ASP.NET, for Visual Studio 2019.
The DotVVM extension for Visual Studio 2019.
A GitHub account.
An Azure subscription.
If the project is associated with a database, it must be hosted in the cloud.

The solution environment

Projects for application development with ASP.NET Core and DotVVM are based on the Model, View, View model pattern; for communication between HTML (web pages) and C# (source code). The purpose of these parts are as follows:

Model. — is responsible for all application data and related business logic.
The view. — Representations for the end-user of the application model. The view is responsible for displaying the data to the user and allowing manipulation of application data.
Model-View or View-Model. — one or more per view; the model-view is responsible for implementing view behavior to respond to user actions and for easily exposing model data.

In this case, there are three projects for this purpose:

DAL (Data Access Layer): to manage database connection and access.
BL (Business Layer): for the handling of services and application domain logic.
APP - Application Presentation Layer. This section is where we have Views and Viewmodels for designing web pages with DotVVM.

The solution in Visual Studio 2019 looks like this:

Want to know the steps to create a DotVVM app? To do this you can review this article: Steps to create an MVVM application (Model-View-ViewModel) with DotVVM and ASP.NET Core.

Part 1: Associate the project from Visual Studio 2019 with a repository on GitHub

The first thing to do is to verify that we have the GitHub extension installed for Visual Studio 2019. To do this we can go to the options menu in the Extensions section and select the Manage Extensions option. In this box, we can perform the verification.

In case you do not have the GitHub extension for Visual Studio 2019, the installer can be found at the following address: visualstudio.github.com/. To add the extension, Visual Studio must be closed as they are changes to the Microsoft IDE that are made during installation.

Now, we proceed to associate with the solution that contains the three projects (.APP, .BL and . DAL) to a repository on GitHub, to do this, right-click on the Visual Studio solution and select Add Solution to Source Control:

Later we went to the Team Explorer view and connected our GitHub account to Visual Studio in the Connect option.

Then we go to the Team Explorer option: Synchronization: select Publish to GitHub and continue with the instructions presented for creating a new repository.

A short time later, our project will be associated with the repository we just created. We can check this directly from GitHub:

Note: Whenever we need to save our changes, we can save them from the Changes section of Team Explorer:

And in the Sync section we need to confirm the output changes:

With these first steps, our application with DotVVM and ASP.NET Core in Visual Studio 2019 is already associated with a particular GitHub repository.

Part 2: Create an App Service resource in Azure

To create an App Service-type resource in Azure, we can go to the portal: portal.azure.com/ and then search for the service in the left pane of Azure where the most commonly used Azure resources are located or in the search section. In either scenario, we proceed to create the resource and to the end, we will have something like this:

In which, we will need to specify the name of the Web App, the runtime environment, which in this case is .NET Core and its latest version 3.1 (August 2020). We also need to specify the operating system on which the application will be deployed.

The creation process will take a few seconds.

Then we should go to the resource in the general section and in the options menu in the Get Post Profile section, click to download the corresponding publishing file. This file will allow us to set action on GitHub for continuous deployment, as we'll see in Part 3.

Part 3: GitHub Actions for continuous deployment of applications in Azure

In the GitHub environment, a workflow is an automated process that is defined in a GitHub repository. This process tells GitHub how to create and deploy a function app project on GitHub.

With these considerations in mind, GitHub Actions enables us to create custom software lifecycle workflows directly in a GitHub repository. In this sense, actions allow us to create, test, and deploy our code directly from GitHub.

In our case study, GitHub actions allow us to define a workflow to automatically create and deploy the project developed with ASP.NET Core and DotVVM in the Azure function application.

To create this workflow we will perform these activities:

A. GitHub Secret Settings
B. Set up a workflow
C. Continuous implementation in action

To get started, we'll head to the GitHub repository created from Visual Studio 2019 in Part 1. With this repository, we will perform each of the activities initially established.

A. Setting up GitHub's secret

Within the repository in question, in the options menus we will go to the path Settings > Secrets > New secret.

In this section we will specify the name of the secret, in this case, it will be SCM_CREDENTIALS, and the value, which corresponds to the content of the publish file downloaded from the App Service resource in Azure, set out in Part 2. The fields will look like this:

Finally, select in Add secret.

B. Set up a workflow

Now what we'll do is configure the workflow that will allow us to set the functionality for continuous deployment to Azure. To do this, within the repository, we need to go to the Actions section and select in set up a workflow yourself.

Note: in this Actions section we can also find workflows already established for other types of operations, for example:

When attempting to create a workflow on our part, a YAML (.yml) file will define this flow in the repository path /.github/workflows/. This definition includes the various steps and parameters that make up the workflow.

That said, this section is where we'll write the source code for the workflow. The final code is as follows:

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy ASP.NET Core with DotVVM app to Azure

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: windows-latest

    steps:
    - uses: actions/checkout@master

    - name: Set up .NET Core
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: '3.1'

    - name: Build with dotnet
      run: dotnet build --configuration Release

    - name: dotnet publish
      run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp

    - name: Deploy to Azure Web App
      uses: azure/webapps-deploy@v1
      with:
        app-name: '<APP_NAME>'
        slot-name: 'production'
        publish-profile: ${{ secrets. SCM_CREDENTIALS }}
        package: ${{env.DOTNET_ROOT}}/myapp

Next, let's look at the most important parts of this code.

In the name section we have the definition of the action name. We can have multiple actions in the same file and multiple files in the folder .github/workflows.

The action trigger is defined in the on section, which can be any event that triggers workflows, where the most common ones are push and pull_request, but there are many other triggers. In this case, that will be the action that will indicate that a new continuous deployment process should be initiated.

Then in jobs, we have the definition of jobs. The name of this group is called build-and-deploy. Continuing with this sequence, Github's actions define three execution environments for its jobs: windows-latest, ubuntu-latest, and macos-latest which are defined in the runs-on node and run virtual machines for the execution of subsequent statements. In this case, it has been set to windows-latest. The steps are then defined in the steps section:

As a first step, we find the definition of the type of workflow, in this case, use is used, which allows us to integrate into our flow with actions defined by third parties.
Then the version ASP.NET Core is defined, in this case, it is necessary to specify in this section the version of our ASP.NET Core project with DotVVM. The version in this example is 3.1.
The project is then built in the Build with dotnet step.
Then the necessary files are prepared for deployment with dotnet publish.
Finally, the deployment of these files to Azure takes place. In this case, it is necessary to indicate the name of the App Service resource created in Azure in the attribute app-name and in publish-profile the name of the secret created in the GitHub repository is indicated, for this case, the name set in part B was SCM_CREDENTIALS.

Then we save the YAML file and the workflow will be ready to perform continuous deployment whenever there is a change in the repository.

C. Continuous implementation in action

When we make any changes within the repository or from Visual Studio 2019, the workflow will run. From the Actions section in the GitHub repository we can see how this process is done step by step, according to the names and steps set in the YAML file.

The end result of this implementation is as follows:

What's next?

With this article, we have learned step by step how to continuously deploy web applications with ASP.NET Core and DotVVM through GitHub Actions.

The sample project source code is available in the following repository: DotVVM Sample CRUD.

Here are some additional resources that might be of interest to you to continue to gain new knowledge in this area:

Free and open course on YouTube (Spanish): ASP.NET Core and DotVVM Fundamentals.
DotVVM and ASP.NET Core: Implementing CRUD Operations.
Working with web services through ASP.NET Core and DotVVM.

Thank you:

If you have any concerns or need help in something particular, it will be a pleasure to be able to collaborate.

See you on Twitter!! :)

Implementación de aplicaciones web con ASP.NET Core y DotVVM en AWS Elastic Beanstalk

Daniel Gomez — Fri, 24 Jul 2020 19:27:10 +0000

Hoy en día, la computación en la nube es tendencia en el mundo tecnológico, debido a su impacto al generar servicios y soluciones informáticas para usuarios y empresas. Si nos centramos en el área del desarrollo de software a través de ASP.NET por ejemplo, una de las relaciones directas con la nube es el poder desplegar estas aplicaciones.

En este articulo aprenderemos como desplegar sitos web en la nube, específicamente con DotVVM sobre ASP.NET Core 3.1 hacia Amazon Web Services, bajo un enfoque de Plataforma como Servicio – PaaS. Si recordamos este enfoque dentro de los tipos de servicios en la nube, hacemos referencia a un entorno de desarrollo y de implementación, sin preocuparnos de la administración de los recursos de infraestructura tecnológica.

Actividades:

Para llevar a cabo las actividades de despliegue sobre AWS, tendemos tres partes importantes:

Parte 1: Configuraciones previas de AWS.
Parte 2: Información sobre los recursos requeridos de AWS para el despliegue.
Parte 3. Despliegue de aplicaciones web con ASP.NET Core y DotVVM desde Visual Studio 2019.

Recursos necesarios:

Para seguir paso a paso este articulo, es necesario tener en funcionamiento las siguientes herramientas:

.NET Core SDK.
Visual Studio 2019.
La carga de trabajo Desarrollo web y ASP.NET para Visual Studio 2019.
La extensión de DotVVM para Visual Studio 2019.

Parte 1: Configuraciones previas de AWS

Amazon Web Services, también conocida como AWS, es un conjunto de herramientas y servicios de cloud computing de Amazon. Para nuestro objetivo de despliegue, es necesario realizar algunas configuraciones previas, que van desde el ajuste de usuarios, hasta la configuración de AWS en Visual Studio 2019. En otras palabras, estas son las configuraciones previas que realizaremos:

1. Obtener una cuenta de capa gratuita de AWS.
2. Configurar una cuenta IAM.
3. Establecer las políticas para un usuario determinado en IAM.
4. Instalar y configurar AWS Toolkit para Visual Studio 2019.

Sin más que decir, vamos a profundizar cada una de estas actividades previas y revisar lo que debemos hacer.

1. Obtener una cuenta de capa gratuita de AWS

AWS dispone de un nivel gratuito para probar y consumir servicios durante 12 meses. En la siguiente dirección podemos realizar el registro correspondiente: aws.amazon.com/free.

Este es un proceso sencillo, sin embargo, hay que tener en cuenta que hay que proporcionar los datos de nuestra tarjeta de crédito/debito para poder activarla.

2. Configurar una cuenta IAM

Muy bien, suponiendo que ya hemos creado una cuenta raíz en AWS, al iniciar sesión veremos la consola:

Dentro de la consola buscaremos el servicio IAM. Identity and Access Management (IAM), es un servicio que permite administrar el acceso a los servicios y a los recursos de AWS. Asimismo, permite crear y administrar usuarios y grupos de AWS, así como utilizar permisos para conceder o negar el acceso a los recursos.

Al ingresar a este servicio, nos dirigiremos al apartado Users dentro del menú de opciones y seleccionaremos Add User. El objetivo es crear un usuario, el cual se utilizará para asociar los servicios de AWS que se van a utilizar, ya que no es recomendable proporcionar nuestros privilegios de acceso de usuario raíz.

El formulario para agregar un nuevo usuario se verá de esta manera:

Una vez que se haya terminado con la creación del nuevo usuario de IAM, es necesario descargar las credenciales. Estas las necesitaremos más adelante para realizar la configuración en Visual Studio.

Nota: es muy importante mantener este archivo CSV en un lugar seguro, ya que allí se encuentran las credenciales de acceso.

3. Establecer las políticas del usuario

Para poder desplegar nuestras aplicaciones con ASP.NET Core y DotVVM desde Visual Studio, nuestro nuevo usuario IAM necesita poder acceder a ciertos servicios de AWS. En este caso, nos dirigiremos al usuario en cuestión dentro de IAM en AWS y seleccionamos la opción Add inline policy.

Luego, es necesario realizar este proceso para cada uno de los siguientes servicios:

Elastic Beanstalk
EC2
S3
CloudFormation

Después de agregar estos servicios, asignaremos un nombre para esta política y la guardaremos. Al final tendremos algo como esto:

4. Instalar y configurar AWS Toolkit para Visual Studio

Dentro de las configuraciones previas de AWS necesarias, lo que nos resta por hacer es instalar la extensión de AWS para Visual Studio 2019. Esta herramienta nos permitirá trabajar con el ecosistema de .NET en cuanto a desarrollo, depuración e implementación de soluciones en relación con Amazon Web Services.

Enlace de descarga: https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.AWSToolkitforVisualStudio2017
.

Para la instalación, Visual Studio 2019 deberá estar cerrado.

Al iniciar Visual Studio, el asistente de configuración de AWS iniciará y nos pedirá configurar nuestras credenciales. En este caso podemos hacer uso del archivo CSV generado en la creación del usuario correspondiente en IAM.

Al guardar las credenciales, tendremos listo AWS Explorer, el cual nos permitirá trabajar con los servicios de AWS con los que tengamos autorización. Esto de acuerdo con las políticas establecidas anteriormente.

Con todo en su lugar, ahora ya podemos trabajar con AWS desde Visual Studio 2019.

Parte 2: Acerca de los servicios requeridos para la implementación en Amazon Web Services

Como pudimos observar en el proceso de configuración, son varios servicios de AWS que se utilizaran para desplegar nuestras aplicaciones web con ASP.NET Core y DotVVM. A continuación, veremos brevemente de que se trata cada uno de ellos.

Elastic Beanstalk

AWS Elastic Beanstalk es un servicio de implementación y aprovisionamiento en la nube que automatiza el proceso de configuración de aplicaciones en la infraestructura de Amazon Web Services.

Para usar el servicio, los desarrolladores solo tenemos que cargar nuestras aplicaciones. El aprovisionamiento, el equilibrio de carga, el escalado automático y la supervisión del estado de las aplicaciones se controlan automáticamente.

EC2

Amazon Elastic Compute Cloud, más conocido como EC2, el servicio estrella de AWS, es una solución de Amazon para ofrecer un entorno informático de capacidad y tamaño modificable.
EC2 cuenta con varias instancias de uso general que brindan una combinación de recursos informáticos, memoria y de red. En esta dirección podemos conocer los tipos de instancias con los que cuenta AWS y sus características: https://aws.amazon.com/es/ec2/instance-types/.

Amazon S3, nombre que proviene de Amazon Simple Storage Service, hace referencia a un servicio ofrecido que proporciona almacenamiento de objetos a través de una interfaz de servicio web. Amazon S3 utiliza la misma infraestructura de almacenamiento escalable que Amazon.com utiliza para ejecutar su red global de comercio electrónico.

Estos objetos pueden ser distintos tipos de archivos de los que normalmente se encuentran en cualquier ordenador: documentos, archivos comprimidos zip o rar, archivos multimedia, etc. Todo esto se logra mediante un proceso de almacenamiento en buckets, o “cubos” en español, en los que cada usuario puede ir colocando los distintos datos y objetos que desee almacenar. Estos cubos se reparten por la estructura de centros de datos de Amazon de forma que cada usuario sólo puede acceder a sus cubos personales.

CloudFormation

AWS CloudFormation es un servicio que proporciona un lenguaje común para modelar y aprovisionar recursos para una aplicación a través del entorno de AWS. En otras palabras, AWS CloudFormation permite administrar nuestra infraestructura o un grupo de recursos de AWS en un archivo de texto o plantilla. Una colección de recursos de AWS se denomina pila. Los recursos de AWS se pueden crear o actualizar mediante una pila. Un ejemplo de pila, son los recursos que utilizaremos para el despliegue de nuestra aplicación con ASP.NET Core y DotVVM: Elastic Beanstalk, EC2 y EC3.

Ahora que ya hemos conocido a breves rasgos los recursos que se utilizaran automáticamente sobre AWS para el despliegue correspondiente, ahora pasaremos a la parte practica desde Visual Studio 2019.

Parte 3: Implementación de proyectos con ASP.NET Core y DotVVM desde Visual Studio 2019

El proyecto para este caso con ASP.NET Core y DotVVM está fundamentado en el patrón MVVM (Modelo, Vista, Vistamodelo), con cada una de estas partes dentro del mismo:

El modelo. — responsable de todos los datos de la aplicación y de la lógica de negocios relacionada.
La vista. — representaciones para el usuario final del modelo de la aplicación. La vista es responsable de mostrar los datos al usuario y de permitir la manipulación de los datos de la aplicación.
El Modelo-Vista o Vista-Modelo. — uno o más por vista; el modelo-vista es responsable de implementar el comportamiento de la vista para responder a las acciones del usuario y de exponer los datos del modelo fácilmente.

Teniendo en cuenta estas consideraciones, dentro del proyecto en Visual Studio daremos clic derecho sobre el proyecto, y en la sección de opciones seleccionaremos Publish to AWS Elastic Beanstalk:

Con esto tendremos disponible el asistente de publicación de AWS Elastic Beanstalk, aquí crearemos un nuevo entorno de aplicación:

A continuación, elegiremos un nombre para la aplicación y su URL:

En esta misma sección podemos especificar el ambiente con el que deseamos trabajar:

Después de comprobar la disponibilidad del URL, configuraremos los requisitos de hardware, en otras palabras, el tipo de instancia EC2:

Para este caso en particular con DotVVM, trabajaremos con una imagen de Linux:

Al finalizar veremos el resumen de las configuraciones realizadas. Para continuar debemos dar clic en Deploy:

A partir de este momento el proceso de despliegue a comenzado.

Esta implementación puede tardar algunos minutos, dependiendo del tamaño de la aplicación y de los recursos empleados en ASP.NET Core con DotVVM. Estas son las configuraciones que se llevan a cabo internamente:

Una máquina virtual de Amazon EC2 es configurada para ejecutar aplicaciones web sobre ASP.NET Core en la versión especificada.
Un grupo de seguridad de Amazon EC2 es configurado para permitir la entrada en el puerto 80.
Un balanceador de carga de Elastic Load Balancing para distribuir las solicitudes a las instancias que ejecutan la aplicación.
Un grupo de Auto Scaling para reemplazar una instancia si se termina o deja de estar disponible.
Una ubicación de almacenamiento para el código fuente, los logs y otros artefactos.
Dos alarmas de CloudWatch que monitorizan la carga de las instancias de su entorno y se activan si la carga es demasiado alta o baja.
Una pila de AWS CloudFormation para lanzar los recursos en su entorno y propagar los cambios de configuración.
Un nombre de dominio que enruta a la aplicación web en el subdominio región.elasticbeanstalk.com.

Al finalizar este proceso, casi transparente para nosotros, veremos nuestra aplicación desplegada sobre AWS:

¿Qué sigue?

Con este articulo hemos aprendido paso a paso sobre la implementación de aplicaciones web con DotVVM sobre ASP.NET Core en Amazon Web Services.

Una de las grandes ventajas de la nube son las herramientas que estas nos ofrecen para trabajar con nuestras aplicaciones, en este caso, sobre AWS, se han podido apreciar los conceptos relacionados a una Plataforma como Servicio, en el cual, no tenemos que preocuparnos por los procesos internos ni por el control de la infraestructura, solo por el desarrollo como tal.

A continuación se muestran algunos recursos que podrían ser de tu interés para seguir adquiriendo nuevos conocimientos en esta área:

Curso gratuito y abierto en YouTube: Fundamentos de ASP.NET Core y DotVVM.
DotVVM y ASP.NET Core: Implementación de operaciones CRUD.
Implementación continua en Azure con Visual Studio y GitHub

Gracias:

Si tienes alguna inquietud o necesitas ayuda en algo particular, será un gusto poder colaborar.

Nos vemos en Twitter!! :)

¡Hasta pronto!

Deploy web applications with ASP.NET Core and DotVVM on AWS Elastic Beanstalk

Daniel Gomez — Thu, 23 Jul 2020 18:12:57 +0000

Today, cloud computing is a trend in the tech world, due to its impact in generating services and computing for users and businesses. If we focus on the area of software development through ASP.NET for example, one of the direct partnerships with the cloud is being able to deploy these applications.

In this article, we will learn how to deploy web sites in the cloud, specifically with DotVVM on ASP.NET Core 3.1 to Amazon Web Services, under a Platform as a Service – PaaS approach. If we remember this approach within the types of cloud services, we refer to a development and deployment environment, without worrying about managing technology infrastructure resources.

Activities:

To perform language activities on AWS, we have three important parts:

Part 1: Pre-AWS Configurations.
Part 2: Information about the resources required by AWS for the program.
Part 3. Web application time with ASP.NET Core and DotVVM from Visual Studio 2019.

Resources Required:

To follow this article step by step, you need to have the following tools in the following accounts:

.NET Core SDK.
Visual Studio 2019.
The Web Development and ASP.NET workload for Visual Studio 2019.
The DotVVM extension for Visual Studio 2019.

Part 1: AWS Pre-Configurations

Amazon Web Services, also known as AWS, is a set of Amazon cloud computing tools and services. For our deployment goal, we need to make some pre-configurations, ranging from user tuning to configuring AWS in Visual Studio 2019. In other words, these are the previous configurations we will make:

1. Get an AWS Free Tier account.
2. Set up an IAM account.
3. Set policies for a given user in IAM.
4. Install and configure the AWS Toolkit for Visual Studio 2019.

Without more to say, let's deepen each of these previous activities and review what we need to do.

1. Get an AWS Free Tier Account

AWS has a free tier to test and consume services for 12 months. At the following address, we can register accordingly: aws.amazon.com/free.

This is a simple process, however, it should be noted that we have to provide the credit/debit card details in order to activate it.

2. Set up an IAM account

All right, assuming we've already created a root account on AWS, when we sign in, we'll see the console:

Within the console, we'll search for the IAM service. Identity and Access Management (IAM) is a service that allows us to manage access to AWS services and resources. It also allows us to create and manage AWS users and groups, and use permissions to grant or deny access to resources.

When we enter this service, we will go to the Users section in the options menu and select Add User. The goal is to create a user, which will be used to associate the AWS services to be used, as it is not recommended to provide our root user access privileges.

The form to add a new user will look like this:

After we're done with creating the new IAM user, we need to download the credentials. We'll need these later to configure in Visual Studio.

Note: It is very important to keep this CSV file in a safe place, as the login credentials are located there.

3. Set user policies

In order to deploy our applications with ASP.NET Core and DotVVM from Visual Studio, our new IAM user needs to be able to access certain AWS services. In this case, we'll target the user in question within IAM on AWS and select the Add inline policy option.

Then, we need to perform this process for each of the following services:

Elastic Beanstalk
EC2
S3
CloudFormation

After adding these services, we will name this policy and save it. In the end, we'll have something like this:

4. Install and configure the AWS Toolkit for Visual Studio

Within the required pre-configurations of AWS, the last thing to do is to install the AWS extension for Visual Studio 2019. This tool will allow us to work with the .NET ecosystem in terms of developing, debugging, and deploying solutions in relation to Amazon Web Services.

Download link: https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.AWSToolkitforVisualStudio2017
.

For installation, Visual Studio 2019 must be closed.

When we start Visual Studio, the AWS Setup Wizard will start and ask us to configure our credentials. In this case, we can make use of the CSV file generated in the creation of the corresponding user in IAM.

When we save our credentials, we'll be ready with AWS Explorer, which lets us work with the AWS services we're authorized to. This in accordance with the policies set out above.

All in place, we can now work with AWS from Visual Studio 2019.

Part 2: Information about the services required for deployment to Amazon Web Services

As we saw in the setup process, there are several AWS services that were used to deploy our web applications with ASP.NET Core and DotVVM. Next, we will briefly see what each of them is about.

Elastic Beanstalk

AWS Elastic Beanstalk is a cloud deployment and provisioning service that automates the application configuration process in our Amazon Web Services infrastructure.

To use the service, developers only have to load our apps. Provisioning, load balancing, auto-scaling, and monitoring the health of applications are handled automatically.

EC2

Amazon Elastic Compute Cloud, better known as EC2, AWS's flagship service, is an Amazon solution for providing a capacity and size computing environment that can be modified.
EC2 has several general-purpose instances that provide a combination of computing, memory, and network resources. At this address, we can learn about the types of instances AWS has and its features: https://aws.amazon.com/ec2/instance-types/.

Amazon S3, a name that comes from Amazon Simple Storage Service, refers to an offered service that provides object storage through a web service interface. Amazon S3 uses the same scalable storage infrastructure that Amazon.com used to run its global e-commerce network.

These objects can be different types of files than are normally found on any computer: documents, compressed zip or rar files, multimedia files, etc. All this is achieved through a bucket storage process, or "cubes" in Spanish, in which each user can place the different data and objects that they want to store. These cubes are spread across Amazon's datacenter structure so that each user can only access their personal cubes.

CloudFormation

AWS CloudFormation is a service that provides a common language for modeling and provisioning resources for an application through the AWS environment. In other words, AWS CloudFormation allows us to manage our infrastructure or a group of AWS resources in a text file or template. A collection of AWS resources is called a stack. AWS resources can be created or updated using a stack. An example stack is the resources we'll use for deploying our application with ASP.NET Core and DotVVM: Elastic Beanstalk, EC2, and EC3.

Now that we've briefly known the resources that were automatically used on AWS for the corresponding deployment, we'll now move on to the practice part from Visual Studio 2019.

Part 3: Implementing projects with ASP.NET Core and DotVVM from Visual Studio 2019

The project for this case with ASP.NET Core and DotVVM is based on the MVVM pattern (Model, View, Viewmodel), with each of these parts within it:

Model. — responsible for all application data and related business logic.
The view. — representations for the end-user of the application model. The view is responsible for displaying the data to the user and allowing manipulation of application data.
Model-View or View-Model. — one or more per view; the model-view is responsible for implementing view behavior to respond to user actions and for easily exposing model data.

Taking these considerations into account, within the project in Visual Studio we will right-click on the project, and in the options section we will select Publish to AWS Elastic Beanstalk:

With this we'll have the AWS Elastic Beanstalk publishing wizard available, here we'll create a new application environment:

Next, we'll choose a name for the app and its URL:

In this same section we can specify the environment with which we want to work:

After checking the availability of the URL, we'll configure the hardware requirements, in other words, the EC2 instance type:

For this particular case with DotVVM, we will work with a Linux image:

In the end we will see the summary of the configurations made. To continue we must click on Deploy:

From this point on, the deployment process has begun.

This deployment may take a few minutes, depending on the size of the application and the resources used in ASP.NET Core with DotVVM. These are the configurations that are performed internally:

An Amazon EC2 VM is configured to run web applications on ASP.NET Core in the specified version.
An Amazon EC2 security group is configured to allow entry on port 80.
An Elastic Load Balancing to distribute requests to the instances running the application.
An Auto Scaling group to replace an instance if it is terminated or becomes unavailable.
A storage location for source code, logs, and other artifacts.
Two CloudWatch alarms that monitor the load on instances in our environment and fire if the load is too high or too low.
An AWS CloudFormation stack to launch resources in our environment and propagate configuration changes.
A domain name that routes to the web application in the región.elasticbeanstalk.com subdomain.

At the end of this process, almost transparent to us, we'll see our AWS-deployed application:

What's next?

With this article, we learned step-by-step about deploying web applications with DotVVM on ASP.NET Core on Amazon Web Services.

One of the great advantages of the cloud are the tools that these offer us to work with our applications, in this case, over AWS, we have been able to appreciate the concepts related to a Platform as a Service, in which we do not have to worry about internal processes or control of infrastructure, just about development as such.

Here are some resources that might be of interest to you to continue to gain new knowledge in this area:

Thank you:

If you have any concerns or need help in something particular, it will be a pleasure to be able to collaborate with you.

See you on Twitter!! :)

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.

Diseño de formularios web con Bootstrap para DotVVM desde ASP.NET Core

Daniel Gomez — Mon, 20 Jul 2020 12:44:28 +0000

Bootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.

Bootstrap tiene varios recursos para configurar los estilos de los elementos de la página de una manera simple y eficiente, además de facilitar la construcción de páginas que, al mismo tiempo, están adaptadas para la web y para dispositivos móviles. Dentro del marco de trabajo de ASP.NET Core, específicamente DotVVM para el diseño de páginas web, existe un conjunto de herramientas denominadas como Bootstrap for DotVVM, la cual nos permite trabajar con ASP.NET Core y Bootstrap a la vez.

El patrón de diseño Modelo, Vista, Vistamodelo - MVVM

El modelo. — es responsable de todos los datos de la aplicación y de la lógica de negocios relacionada.
La vista. — Representaciones para el usuario final del modelo de la aplicación. La vista es responsable de mostrar los datos al usuario y de permitir la manipulación de los datos de la aplicación.
El Modelo-Vista o Vista-Modelo. — uno o más por vista; el modelo-vista es responsable de implementar el comportamiento de la vista para responder a las acciones del usuario y de exponer los datos del modelo fácilmente.

Adquirir Bootstrap for DotVVM

Bootstrap for DotVVM no es más que un NuGet privado para Visual Studio, en el cual, podemos hacer uso de los competentes ya establecidos para la construcción de aplicaciones web en el ámbito empresarial.

Para la instalación de la versión del Bootstrap for DotVVM, además de obtener la licencia correspondiente (existe una versión de prueba), es necesario realizar una configuración de unos pocos minutos para poder emplear estas funcionalidades. Los pasos para agregar el NuGet privado se pueden consultar en la siguiente dirección: Installing Bootstrap for DotVVM.

Crear un proyecto Bootstrap for DotVVM en Visual Studio 2019

Para crear un proyecto con la opción de Bootstrap en DotVVM desde Visual Studio 2019, empezaremos creando el proyecto para este caso de tipo DotVVM Web Application (.NET Core):

Al especificar el nombre y continuar, el asistente de inicialización del proyecto nos brindará una serie de opciones para agregar ciertas funcionalidades al proyecto. En este caso la funcionalidad que nos interesa es la de Bootstrap for DotVVM ubicada en la sección DotVVM Commercial Extensions:

Formulario web con Bootstrap for DotVVM

Para ejemplificar la utilización de ciertos componentes de Bootstrap con DotVVVM tendemos una pequeña aplicación web como esta:

Teniendo en cuenta que esta página web en DotVVM está conformada por una vista y por su correspondiente vistamodelo, analicemos las partes más importantes en conjunto de estos elementos.

Vista

<dot:Content ContentPlaceHolderID="MainContent">

    <bs:PageHeader>
        <div align="center"><h3 align="center"><b>{{value: Title}}</b></h3></div>
    </bs:PageHeader>

    <div align="center">
        <bs:Form>
            <br />
            <bs:Panel Type="Primary" style="width:70%;">
                <HeaderTemplate>
                    <div>
                        <br />
                        <bs:Image ImageUrl="UserIcon.png" AlternateText="Persons" width="35%" height="35%" />
                    </div>
                </HeaderTemplate>
                <ContentTemplate>

                    <bs:FormGroup>
                        <div Validator.Value="{value: Person.Username}"
                             Validator.InvalidCssClass="has-error"
                             Validator.SetToolTipText="true"
                             class="page-input-box">

                            <bs:TextBoxGroup LabelText="Username"
                                             Text="{value: Person.Username}"
                                             Type="Normal" />
                        </div>
                    </bs:FormGroup>

                    <bs:FormGroup>
                        <div Validator.Value="{value: Person.EnrollmentDate}"
                             Validator.InvalidCssClass="has-error"
                             Validator.SetToolTipText="true"
                             class="page-input-box">
                            <bs:DateTimePickerGroup SelectedDate="{value: Person.EnrollmentDate}" LabelText="EnrollmentDate" Mode="Date" />
                        </div>
                    </bs:FormGroup>

                    <bs:FormGroup LabelText="Gender">
                        <div Validator.Value="{value: Person.Gender}"
                             Validator.InvalidCssClass="has-error"
                             Validator.SetToolTipText="true"
                             class="page-input-box">

                            <bs:RadioButton Text="Male"
                                            GroupName="RadioButtonsGenders"
                                            CheckedValue="Male"
                                            CheckedItem="{value: Person.Gender}"
                                            Inline="true" />
                            <bs:RadioButton Text="Female"
                                            GroupName="RadioButtonsGenders"
                                            CheckedValue="Female"
                                            CheckedItem="{value: Person.Gender}"
                                            Inline="true" />
                            <bs:RadioButton Text="Other"
                                            GroupName="RadioButtonsGenders"
                                            CheckedValue="Other"
                                            CheckedItem="{value: Person.Gender}" 
                                            Inline="true" />

                        </div>
                    </bs:FormGroup>

                    <bs:FormGroup>
                        <div Validator.Value="{value: Person.About}"
                             Validator.InvalidCssClass="has-error"
                             Validator.SetToolTipText="true"
                             class="page-input-box">
                            <bs:TextBoxGroup LabelText="About"
                                             Text="{value: Person.About}"
                                             Type="MultiLine" />
                        </div>
                    </bs:FormGroup>

                </ContentTemplate>
                <FooterTemplate>
                    <b>Bootstrap for DotVVM with ASP.NET Core demo</b>
                </FooterTemplate>
            </bs:Panel>
        </bs:Form>
    </div>

</dot:Content>

**Vistamodelo*

public class DefaultViewModel : MasterPageViewModel
{
    public string Title { get; set; }
    public PersonModel Person { get; set; } = new PersonModel { EnrollmentDate = DateTime.UtcNow.Date };

    public DefaultViewModel()
    {
        Title = "Person Form";
    }
}

Modelo

El modelo para los datos de una persona se encuentra definida de la siguiente manera:

public class PersonModel
{
    [Required]
    public string Username { get; set; }
    public DateTime EnrollmentDate { get; set; }
    public string Gender { get; set; }
    public string About { get; set; }
}

El primer elemento Bootstrap dentro de la aplicación es el componente PageHeader, el cua, representa el encabezado de esta página web.

<bs:PageHeader>
    <div align="center"><h3 align="center"><b>{{value: Title}}</b></h3></div>
</bs:PageHeader>

Para el formato base del formulario web, se hace uso del componente Form. Como su nombre lo indica, este elemento representa a un formulario Bootstrap. Para los elementos correspondientes como las cajas de texto, los RadioButton, LabelText, etc. se utiliza el control FormGroup para indicar que estos elementos son parte de este formulario. Por ejemplo, para un formulario con un TextBox, el código fuente se vería algo como esto:

<bs:Form>
    <bs:FormGroup LabelText="TextBox">
        <dot:TextBox Text="{value: Text}" />
    </bs:FormGroup>
</bs:Form>

Para mostrar una interfaz visualmente amigable para el usuario y para ejemplificar los controles de Bootstrap, el formulario está organizado a través del componente Panel, el cual permite establecer un encabezado, un cuerpo y un pie de página.

En el encabezado por ejemplo podemos encontrarnos en este caso con una imagen que ha sido creada a través del componente Image:

<HeaderTemplate>
    <div>
        <br />
        <bs:Image ImageUrl="UserIcon.png" AlternateText="Persons" width="35%" height="35%" />
    </div>
</HeaderTemplate>

Dentro del contenido del panel se encuentran los elementos propios del formulario, cada uno con un componente de los controles base llamado Validator, el cual, como su nombre lo indica, permite realizar validaciones en un formulario. Por el ejemplo, para el atributo Username de una Persona, la validación se realiza de acuerdo con las anotaciones establecidas en el modelo de la clase Persona, [Required] para este atributo en particular.

[Required]
public string Username { get; set; }

En el caso del atributo Username para una persona, el componente TextBoxGroup es utilizado para representarlo visualmente en el formulario. Uno de los atributos de este control es el LabelText, el cual permite establecer una etiqueta para esta caja de texto.

<bs:FormGroup>
    <div Validator.Value="{value: Person.Username}"
            Validator.InvalidCssClass="has-error"
            Validator.SetToolTipText="true"
            class="page-input-box">

        <bs:TextBoxGroup LabelText="Username"
                            Text="{value: Person.Username}"
                            Type="Normal" />
    </div>
</bs:FormGroup>

Siguiendo esta secuencia, para el campo EnrollmentDate se utiliza el control DateTimePickerGroup. Algo interesante de este componente es que nos permite trabajar con distintos formatos de fecha, hora o la combinación de ambos. En la siguiente imagen podemos ver un ejemplo de esto:

En el caso del genero de la persona, se utiliza el componente RadioButton, el cual extiende el control RadioButton predeterminado con características de Bootstrap adicionales. Para este caso se hace uso del atributo IsInline, ya que permite establecer si habrá más botones de opción en la misma línea.

<bs:RadioButton Text="Male"
                GroupName="RadioButtonsGenders"
                CheckedValue="Male"
                CheckedItem="{value: Person.Gender}"
                Inline="true" />
<bs:RadioButton Text="Female"
                GroupName="RadioButtonsGenders"
                CheckedValue="Female"
                CheckedItem="{value: Person.Gender}"
                Inline="true" />
<bs:RadioButton Text="Other"
                GroupName="RadioButtonsGenders"
                CheckedValue="Other"
                CheckedItem="{value: Person.Gender}" 
                Inline="true" />

Finalmente, para el campo About de la persona también se utiliza con componente de tipo TextBoxGroup como en el campo de Username, la diferencia en este caso es en el atributo Type, siendo en esta ocasión de tipo MultiLine.

<bs:TextBoxGroup LabelText="About"
                    Text="{value: Person.About}"
                    Type="MultiLine" />

¿Qué sigue?

Con este artículo, hemos aprendido ciertas características de los componentes personalizados de Bootstrap para DotVVM. Asimismo, hemos visto como crear formularios dinámicos a través de la implementación de vistas y modelos de las vistas con los controles predefinidos por DotVVM sobre ASP.NET Core desde Visual Studio 2019 para trabajar con páginas web.

El código fuente de esta implementación está disponible en este repositorio: Bootstrap for ASP.NET Core with DotVVM.

Recursos adicionales

Deseas seguir adquiriendo nuevos conocimientos sobre ASP.NET Core y DotVVM, estos recursos podrían ser de tu interés:

Curso gratuito y abierto en YouTube: Fundamentos de ASP.NET Core y DotVVM.
DotVVM y ASP.NET Core: Implementación de operaciones CRUD.

Gracias:

Si tienes alguna inquietud o necesitas ayuda en algo particular, será un gusto poder ayudar.

Nos vemos en Twitter!! :)

¡Hasta pronto!