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

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.