We might as well start with the flagship entry of our application, which will also be the most relevant and complex one.

Wait a minute, why are we starting with the ViewModel if we don't have a data model in place? Where will we get the data from?

Such questions are anything but trivial and deserve a concise explanation before going further. One of the biggest advantages of building a web application using ASP.NET and Angular is that we can start writing our code without worrying too much about data sources; that will come later, and only after we're sure about what we really need. This is not a requirement either; we're also free to start with our data source for a number of good reasons, such as the following:

• We already have a clear idea of what we'll need
• We already have our entity set(s) and/or a defined/populated data structure to work with
• We're used to starting with the data, then moving to the GUI

All the preceding reasons are perfectly fine; we won't ever get fired for doing that. Yet, the chance to start with the frontend might help us a lot if we're still unsure about how your application will look, either in terms of GUI and/or data. In building this application, we'll take advantage of that; hence, why we will start playing with our QuizViewModel even if we don't have its Data Source and Entity class yet.

From Solution Explorer, right-click on the TestMakerFreeWebApp node (the project's root node) and create a new /ViewModels/ folder; once done, right-click on that newly-added folder and issue the usual Add | New Item command.

From the ASP.NET Core | Code treeview node, select a Class file, call it QuizViewModel.cs, and click on OK to have it added under the /ViewModels/ folder.

Once done, replace the new file's sample contents with the following:

using Newtonsoft.Json; 
using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Linq; 
using System.Threading.Tasks; 
 
namespace TestMakerFreeWebApp.ViewModels 
{ 
    [JsonObject(MemberSerialization.OptOut)] 
    public class QuizViewModel 
    { 
        #region Constructor 
        public QuizViewModel() 
        { 
 
        } 
        #endregion 
 
        #region Properties 
        public int Id { get; set; } 
        public string Title { get; set; } 
        public string Description { get; set; } 
        public string Text { get; set; } 
        public string Notes { get; set; } 
        [DefaultValue(0)] 
        public int Type { get; set; } 
        [DefaultValue(0)] 
        public int Flags { get; set; } 
        public string UserId { get; set; } 
        [JsonIgnore] 
        public int ViewCount { get; set; } 
        public DateTime CreatedDate { get; set; } 
        public DateTime LastModifiedDate { get; set; } 
        #endregion 
    } 
} 
 

As we can see, this is basically a POCO object with a rather common set of general-purpose properties; our Quiz will have a Title, a Description, and so on. There are still some missing things, such as the aforementioned Questions, Answers, and Results, but these will come later on.