ASP.NET Core 2 and Angular 5
上QQ阅读APP看书,第一时间看更新

QuizViewModel

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.