Using Vue.js Instead Of Jquery With .Net MVC
In this article, we will set up a blog site with .net mvc infrastructure by using vue.js instead of jQuery. First, we will run a simple site with both jQuery and vue.js to compare performance. Then we will implement the blog step by step with .net MVC and vue.js. For second part, it is essential to have a .net mvc knowledge!
The foundations of the article is based on the methodology of jQuery working on selector basis, I was asking myself the following questions.
1) I wonder if we can move faster if we use the virtual DOM?
2) We handle everything selectively on the jquery side, won’t template variables and data attribute binding etc. provide an easier use?
3) Can more manageable structures be installed instead of very large structures in jquery? For example lifecycle methods.
4) Does having all of the variables on the page in one place make it easier to manage?
5) Isn’t it good to take advantage of popularity or increased community content?
The answer to “What does vue.js bring” question is very simple?
Very simple. Modern structures. VirtualDOM. API friendly. Popularity and community support. Clean and decent code.
Completed Blog Project Screenshots
Performance Comparision Between Vue.js and Jquery
Now let’s simply do a performance comparison. Here we will compare these by selecting and manipulating some elements a million times. We will try with jquery first and then vue.js.
This content will simply try things out. Other than that, equating all the variables is a difficult task. For this, I will simply make a usage-oriented comparison without going into academic comparisons.
Lets start!
Please take a short look on test repo before reading.
Test repo: https://github.com/sadiksa/vuejs-jquery-html
First, let’s write something in the first column with the letter A to check that the systems are working.
I added an id to column “enterance”. And this code could do it.
On vue.js side same thing could do with text interpolation on the template.
Both of the systems work. Lets make a test scenario up!
It will add the number of operations to the first column A each time, and will add and subtract css class to the fourth picture.
jQuery usually the results was around 4.3 seconds on Edge and Safari.
For vue.js it takes only 0.9 second at Edge or 2.1 on Safari.
There is exactly 5 times the difference.
Github repo: https://github.com/sadiksa/vuejs-jquery-html.git
Blog Coding
We are creating a new .net 6 mvc project. This project comes with entity framework, sqlite and user(auth) structure installed.
Let’s plan our project. The project will consist of two sides.
1. Part of the articles that can be viewed by everyone
2. The admin section to edit articles.
In the anonymous section, there will be a few fixed pages, the home page where the blog posts are listed, and the detail page of the blog post.
On the admin side, there will be a page listing blog posts and an editorial page for managing blog details.
There will be no comment page for now.
Tech Stack:
Backend: .Net 6 MVC With Identity
Frontend: MVC Views with Vue.js, Axios for requests
Db and ORM: Sqlite, EF
Lets try auth by creating admin controller.
With the [Authorize] attribute here, only logged in users will be able to access the admin page.
Now, lets create blogs model.
With performance concerns, we will do the part of the actual blog post content in a separate db table, one to one relation.
Here both pk and fk are in the same column, to keep the cost down.
Let’s add our entities to dbset and do the migration. (You can search on google as entity framework migration commands.)
Now let’s install the necessary packages. Bootstrap comes installed. We will remove jquery libraries and install vue.js.
I removed the three default jquery packages from the lib folder. Remove src import etc from Layout.cshtml or other places.
For installation of vue.js, you can follow these instructions. https://vuejs.org/guide/quick-start.html#without-build-tools
And also add axios library.
Lets implement homepage with vue. Here, take the posts as a list and show them on the page.
Let’s examine the file. Here is the container of vue at the top. (<div id=”app”>) We set up a row and column structure with Bootstrap in it. Here we are using the vue loop feature with v-for. We also use the vue attribute binding with <img :src… We are using the text interpolation property with {{post.header}}. We also add a loading with the v-if v-else condition structure. We are adding more fetch features with @@click=”getMoreBlogPost”. The reason we put two @ here is to escape the @ features of .net razor.
I am using vue.js for the first time. So lets look at vue’s structure. We are creating vue app with an object. This object has three areas.(more is possible)
data() is method that keeps variables.
methods() keeps business methods.
mounted() is a lifecycle method. It runs when app initialized.
After doing this, we will make the post detail page. But we don’t need to use vue there. So let’s revise it on Layout.cshtml to call only where necessary.
Thus, if we do not define a section called “Vue”, this section will not be compiled.
Detail page url structure: https://localhost:7075/home/detail?postId=1
Now let’s go to the admin side, before I move on, I will change the default texts on the right and the links. You can do it yourself, too.
Here too, let’s list all the posts with vue. The logic here is similar.
Here we create a table and put it in the loop. On the far right side of the table, we have given links for delete and update. Again, at the top of the page, we have given a link to create a new one.
I wanted to use a vue component on admin homepage. I also saw that it was done in a link like this(https://medium.com/@marcel.leusch/use-vue-3-single-file-components-without-compilation-ac2ccb5f15c2), but my vue knowledge is very little and it seemed like a challenging job for me.
(UPDATE: It is possible and it is too easy for guided and supported components. Just like this component GitHub — craigh411/vue-star-rating: A simple, highly customisable star rating component for Vue 2.x. / 3.x
You can take a look into this repo.)
Then I added add, update pages. On delete action it deletes post and redirects to admin index. So there is no additional effort for the page.
The Add page consists of two parts. I used Quill as editor. First I tried putting the editor in <div id=”app”> scope (vue scope) but got an error. This has happened to me before in angular. There the reason was that both the editor and angular’s own virtual DOM refreshes collided. I think it’s similar here. So I created the editor outside the scope of vue.
Do not miss the object made for the quill here.
Here I connected the inputs with v-model. I sent these to the backend with saveData() .
Even though it is almost the same, there is something I would like to point out on the update page. I also filled the vue values with razor features at the beginning and it was very convenient!
You can run the project or review vue code details and .net mvc business code on github repo: https://github.com/sadiksa/sadikDevBlog
Thanks!
