Hi everyone! Today, I want to talk about a topic I’ve been working on for quite a while, which I believe will be helpful for many developers. You start a project, everything seems to go smoothly, then you realize that a tiny detail has derailed your entire plan. To avoid such situations, let’s explore how to approach sending data from Vue.js to our C# REST API using Dapper and PostgreSQL.
First, I want to clarify that there isn’t a single correct method. But in my opinion, as a 42-year-old developer with years of experience (I started blogging in my twenties, now I just opened a new blog, greetings from Bursa :)), the most stable and manageable way is usually the best. Especially for high-performance needs, micro ORMs like Dapper are lifesavers. We all know how powerful PostgreSQL is as a database.
So, what do we do on the Vue.js side? Usually, we fill out a form. User info, product details, order information… We take this data and send it to our C# API, typically using fetch or axios libraries. We prepare the data in JSON format and send it via a POST request. It all sounds simple, but when database interaction comes into play, things can get complicated. Sometimes you send data but it doesn’t reach the database correctly or at all. That’s frustrating.
On the C# side, in our ASP.NET Core REST API project, we map the incoming JSON data to a model, then use Dapper to save this model to the database. What I love about Dapper is that you can write SQL queries directly. This is excellent for performance and makes it easy to understand what’s happening. Instead of dealing with complex ORM-generated queries, you write your own SQL and bind it with Dapper. Also, Dapper’s parameter binding is quite secure, which is a significant advantage.
Now, let’s look at a code example. Below, you’ll see a simple example of receiving user data from Vue.js and saving it to PostgreSQL with Dapper. I’ll first show an incorrect scenario, then the proper way. I usually make some mistakes initially, but I learn from them 🙂
First, we need a model to handle incoming data. Let’s call it KullaniciModel. Then, in our API controller, we accept this model as a parameter and run our query in a repository or service layer using Dapper.
In the code example below, let’s first imagine a wrong approach where we write the SQL query directly as a string. This creates security vulnerabilities and invites SQL injection, so it’s not recommended. Next, I’ll show how to do it properly with parameter binding. Remember, always using parameterized queries is the safest approach to prevent SQL injection.
Let’s first imagine a wrong scenario:
// WRONG APPROACH: Writing SQL query as a string (Security risk!) public async Task PostKullaniciYanlis(KullaniciModel kullanici) { // THIS METHOD MUST NEVER BE USED! var query = $"INSERT INTO Kullanicilar (Ad, Soyad, Email) VALUES ('{kullanici.Ad}', '{kullanici.Soyad}', '{kullanici.Email}')"; using (var connection = new NpgsqlConnection(_connectionString)) { await connection.ExecuteAsync(query); } return Ok("Attempted to add user (wrong method)."); } If you do something like this, you might encounter serious issues. Besides security concerns, binding data correctly becomes problematic. Now, let’s see the correct and safe way, which involves using parameters.
Here’s the proper and secure approach using parameterized queries:
// CORRECT APPROACH: Using parameterized queries with Dapper public async Task PostKullaniciDogru(KullaniciModel kullanici) { using (var connection = new NpgsqlConnection(_connectionString)) { var query = @"INSERT INTO Kullanicilar (Ad, Soyad, Email) VALUES (@Ad, @Soyad, @Email)"; await connection.ExecuteAsync(query, kullanici); // Dapper directly maps model properties to parameters! } return Ok("User successfully added."); } Isn’t it nice? Just by adding a parameter, our code becomes more secure and readable. Dapper takes the KullaniciModel object and maps its properties to the parameters in the query such as @Ad, @Soyad, and @Email. That’s all!
Of course, this is just a basic example. In real projects, you’d deal with more complex queries, transactions, error handling, and more. But the core idea remains the same: send JSON data from Vue.js, receive it in C# API, and save it securely to the database using Dapper. Sometimes, there may be an API Gateway involved, but that’s another topic 🙂
In summary, using Vue.js with your C# REST API, Dapper, and PostgreSQL is a great combination for performance and security. Knowing and applying the correct methods is crucial. If you’re working on similar projects, I think this approach makes a lot of sense.
For more detailed information, you can check Dapper’s official documentation here: https://github.com/DapperLib/Dapper. For PostgreSQL-related info, visit: https://www.postgresql.org.
I believe this method will make a difference especially in projects involving a lot of data and where performance is critical. Remember, technology keeps evolving, and we try to stay updated to find the best solutions. I hope this write-up is helpful for you!
Sometimes, even simple actions can take hours, right? You get frustrated but then realize the solution was actually very simple. I think that was one of those moments. 🙂 Try the code and see the difference.
I hope this article has been useful for Vue.js and C# developers. Learning from mistakes and implementing the right solutions are the most important. Happy coding!
By the way, if you’re curious, you can find many resources on this topic on YouTube. But it’s hard to find a clear, practical explanation like mine, since a lot comes from years of experience 🙂
I guess that’s enough. Happy coding everyone!
In the end, using these technologies together is really enjoyable and the results are satisfying.
In my experience, the biggest advantage of such integration is the flexibility it provides on the frontend and the high-performance data processing power on the backend.
It’s like… I don’t know how to explain perfectly but…
And if you want to explore this topic in more detail, you can search on Google and find many examples.
Fulfilling our duty by utilizing and correctly integrating technology into our projects is essential.
Isn’t it beautiful?