Post
Ask Question

Web Development With VUE.JS, .NET 5 And Entity Framework 5

Preface

Web applications are the most popular applications today. When starting a new web project, you have multiple choices for the web application framework, such as Spring, Ruby, Django, PHP, ASP.NET, and JavaScript-based frameworks like React, Vue and Augular. Among all of these frameworks, Vue is the most starred web framework according to github (Collection: Front-end JavaScript frameworks · GitHub). It was only created in 2014, but it has been getting more and more popular.

A web application cannot succeed without a server-side component. It has to provide dynamic content according to user input. Now .NET 5 is the latest server-side development framework from Microsoft, combing .NET framework and .NET core into one unified framework. Services developed with .NET 5 can be shared among Windows, Linux and macOS.

Data that is collected on a web application also has to be saved and accessed. Today there are many different storage mechanisms, but with .NET 5 as the server-side development framework, Entity Framework 5 and SQL Server are the nature choices for the data layer technology frameworks.

In this series we will develop a fully functioning web application that allows high school students to check who else is applying to the colleges they would like to apply to, and find out other students’ stats, like GPA, SAT scores. This will help the students to make decisions as to whether they should apply to a particular college, and if so, what types (ED, EA or RD) to apply with.

We will use VUE to develop the front-end UI and save all the data in a SQL Server database. We will use Microsoft .NET 5 to develop server-side APIs and use Entity Framework 5 to access the data stored in the SQL Server database.

What this article series covers

  • Building the Web App, installs required software for the web app and creates the skeleton of the web front-end.
  • Adding Vue Router, adds navigation menus and connects all pages together.
  • Adding Vuex, manages application state.
  • Adding controls to MyStats page, creating all the required controls on MyStats page.
  • Adding controls to MyColleges page, creating all the required controls on MyColleges page.
  • Creating the service project, installs required software for the service development, creates the service project, add models and controllers for the service
  • Invoking Services, hooks up the Vue front-end with the service back-end.
  • Preparing Database, installs SQL Server and creates tables.
  • Adding Data Access Layer, installs Entity Framework package and creates the db context repository classes.
  • Connecting service with the data access objects, hooks up the service with the repository to retrieve data from the database.
  • Saving data to database
  • Personalizing the app, adds user profile and login information

PreRequisite

  • Microsoft .NET 5
  • Microsoft Visual Studio Community 2019
  • SQL Server 2019 Express
  • SQL Server Management Studio
  • Windows 10

Who this series is for

This series is for developers who want to learn enterprise application development with a web front-end. If you are interested in learning JavaScript/Vue framework, .NET 5 and Entity Framework 5, then this series is right here for you. You will learn how to develop the web front-end with Vue, how to connect the web with the back-end .NET 5 service and how to interact with a SQL Server database from the .NET 5 service. You will learn every aspect of the web UI, service component and entity framework developments.

What you will learn from this series

  • Create a web front-end with VUE.js framework
  • Manage application state of the web application with Vuex
  • Construct a .NET 5 service to serve the web front-end
  • Access and manipulate data with Entity Framework 5
  • Build a fully functioning web application from front-end to back-end

We will start with the web interface. But first let us make sure we understand what this web application is for and how it will work.

For a high school student, junior year is a busy and challenging year. The student needs to maintain a good GPA, participate in national and/or international competitions, get involved in sport programs, join clubs, work parttime, volunteer at certain organizations, and most importantly, apply to colleges.

The problem is, when a student is applying to a college, the student does not know who else is also applying to the same college. Maybe another student who is much better already applies to the college, and typically that college only accepts one student from this high school, so the student really should avoid that college. This is especially critical for Early Decision college, as that is a student’s best bet with only one opportunity. Often a student says after the whole process finishes that “if I knew he/she was applying I would not have applied to that college”. Naviance can help a student to identify who from the same high school applied to a certain college and how good they were, but it cannot help with current year’s student applications.

In this series, we will build a web application that high school students can use to solve this problem. A high school student can use this web application to enter his own information and check other students’ information when applying to a college.

  1. A student enters his/her information like GPA, SAT/ACT score, competitions, clubs, jobs, volunteer hours, etc.
  2. The student also enters colleges he/she is going to apply to.
  3. The student can then check who else is applying to the same college and how good they are.
  4. The student adjusts his/her college list according to the information from the web application.

Next, we will build this web application with Vue, .NET 5 and Entity Framework 5.

Install Required Software

To build the web application we need to install some software first. All software we use in this series are free so you can download them from the specified web addresses.

Following is the list of the software we need to install for this article:

  1. Install Node.js from https://nodejs.org/en/download/. Choose Windows Installer (.msi) 32-bit or 64-bit, depending on your machine’s settings. At time of the writing, we used Node version 14.17.0, but you should be able to use current version as well.
  2. Install Vue.js DevTools from https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en. This is a Chrome plugin that will help you tremendously when you troubleshoot the web application.
  3. Install Visual Studio 2019 community from https://visualstudio.microsoft.com/downloads/. Make sure you choose the Community version and check Node.js development workload. You should also check “ASP.NET and web development” workload, because we will need this to create the .NET 5 service later.

Create the Web Project

Let’s start with creating the web project. We will add the .NET 5.0 service and Entity Framework in later article.

You can follow these steps to create the web project:

  1. Start Visual Studio 2019
  2. Select “Create a new project” option in the right-hand side of the startup dialog.
  3. Type vue in the search box
  4. Select “Basic Vue.js Web Application” as the template. Make sure the JavaScript version of the template is selected, not the TypeScript one. If Vue.js template is not displayed, the Node.js development load is not installed in Visual Studio. You can check previous section to install this load.
  5. Click on button Next
  6. Enter WhoisApplyingWeb as the project name, C:\ as the location, and WhoisApplying as the solution name.
  7. Leave “Place solution and project in the same directory” unchecked.
  8. Click on button Create.

Now an empty vue.js web project has been created. To test it, you can follow these steps:

  1. Wait a few minutes to allow Visual Studio to finish downloading required JavaScript libraries to the solution. It may take up to 5 minutes for all files to be downloaded to your local machine.
  2. In Solution Explorer, right click on the WhoisApplyingWeb project.
  3. Select “Open Command Prompt Here …”.
  4. Type “npm run serve -- --port 1337” (you should not include the quotes) then hit enter.
  5. You should see a running command window like in this image:

This tells us the web application is running now with port 1337. You can open a web browser, and enter this address to the browser:

http://localhost:1337/

then you should see the Hello world web app, created with Vue.js:

Add First Page to the Application

Next we will add three pages to our project so a student can enter status and the colleges to apply to. The student can also query who else is applying to the same colleges. We will also create a home page to display some description of the web and add links to other pages.

First let’s make some changes to the project, so next time we can run directly from within Visual Studio:

  1. Close the web browser.
  2. Close the command window.
  3. Go to Visual Studio, open file package.json in the project

Add --port 1337 to scripts/serve node so the serve node should be like this now,

"serve": "vue-cli-service serve --port 1337"

Now press F5.

Now a command window is open, and the application is being compiled inside the command window. A web browser is open as well, with the URL same as before. It should display “can't reach this page” but when the build finishes the page will refresh and display the Hello World page.

We will now add a page for the student to enter stats. You can follow these steps to create this web page:

  1. Within Visual Studio, stop debugging as we are going to add files to the project.
  2. Within Solution Explorer, create a new folder views under src folder
  3. right click on the newly created views folder and select “Add\New Item …”
  4. Enter MyStats.vue as the name

Enter following HTML code to this new file,

<template>
    <div>
        <div id="title">
            Please Enter Your Stats Below
        </div>
        <hr />
        <table id="myStatsTable">
            <tr>
                <td>Your High School:</td>
                <td></td>
            </tr>
            <tr>
                <td>Your SAT Score:</td>
                <td></td>
            </tr>
        </table>
    </div>
</template>

What we have entered to the page is a template for Vue. For Vue, every component is a template, with one root element. For our first page, the root element is a div. we also added some static controls to the page. Note this is now just a place holder for the student stats. We will customize this page more later once we have the site up and running.

Now add following code to this new file, after the template part,

<script>
    export default {
        name: 'MyStats'
    };
</script>

This is where we will write script for this page. We will come back later to add more JavaScript code. For now, we just specified the name of this page to be MyStats.

Add Second Page to the Application

We have added a page for the student to enter stats, next we will add another page for the student to enter the colleges he/she is going to apply to. Same as previous page, we will start with an almost blank page, then customize it later.

You can follow these steps to add this second page:

  1. Add a new file MyColleges.vue within folder src\views
  2. Add following HTML code to this new file:
<template>
    <div id="title">
        Please Enter Your Colleges Below
    </div>
</template>

This is now just a placeholder for this page. Later we will add more context to this page so a student can view current college list as well as add/remove a college from the list.

Add following script file to this new file,

<script>
    export default {
        name: 'MyColleges'
    };
</script>

Add Third Page to the Application

The third page will be a placeholder for the student to query who else is also applying to the same colleges. Same as previous page, we will start with an almost blank page, then customize it later.

You can follow these steps to add this third page:

  1. Add a new file WhoIsApplying.vue within folder src\views
  2. Add following HTML code to this new file:
<template>
    <div>
        Who else is also applying to the same colleges?
    </div>
</template>

And add following JavaScript code to this new file,

<script>
    export default {
        name: 'WhoIsApplying'
    };
</script>

Customize the Home Page of the Application

Now we have three pages in our application but we cannot see them, we need to do some more work to display them. But first let’s change the home page a little to meet our needs for this application.

  1. Move the file Home.vue from components to views
  2. Select Yes when prompted to update references to this file
  3. Open file Home.vue
  4. Change the div element of the template within Home.vue file to be like this:
<template>
  <div class="home">
    <h1>Who else in my school is Applying to my dream colleges? </h1>
    <p>Are you thinking to apply to a college but don't know who else in your school is also applying to the same college? </p>
    <p>Find out right here! </p>
    <p>But first, please enter your stats and your colleges so others can benefit too! </p>
    <p>You can enter your college information anonymously. Be honest, don't try to fool others, as you don't want others to enter wrong information to mislead you as well. </p>
    <button @click="MyStats">Enter your stats</button><p />
    <button @click="MyColleges">Enter your colleges</button><p />
    <button @click="WhoIsApplying">Who is applying to the same colleges? </button><p />
  </div>
</template>

On this home page, we have first explained what this site is for, and added 3 buttons. Each button will navigate to another page.

Replace the props section with following script code,

<script>
  export default {
    name: 'Home',
    methods: {
      MyStats() {
        alert("my stats")
      },
      MyColleges() {
        alert("my colledges")
      },
      WhoIsApplying() {
        alert("who is applying")
      }
    }
  }
</script>

As you can see, when a button is clicked, we now just display a message. Later we will replace it to a real link to navigate to a specific page for that button.

  1. Open app.vue file
  2. Remove the msg parameter to the Home component in line 3

Now if you press F5 to run the application, you will see the new home page with three buttons. When you click on one of these three buttons you will get a popup message.

But how can we navigate from one page to another page? That’s what we will do in the next article.


Similar Articles