{"id":893,"date":"2019-05-20T19:14:28","date_gmt":"2019-05-20T19:14:28","guid":{"rendered":"https:\/\/portasftpserver.com\/?p=893"},"modified":"2021-02-04T16:12:15","modified_gmt":"2021-02-05T00:12:15","slug":"asp-net-core-vue-js-starter-with-trilon","status":"publish","type":"post","link":"https:\/\/portasftpserver.com\/asp-net-core-vue-js-starter-with-trilon\/","title":{"rendered":"ASP.NET Core & Vue.js Starter with Trilon + Dapper Micro ORM"},"content":{"rendered":"\n
\"\"<\/a>

<\/figcaption><\/figure><\/div>\n\n\n\n

Hello, my name is Harry. I created this sample on how to get started with C# Asp.net Core<\/span><\/strong> + <\/span>Vue<\/span><\/strong>. Vue <\/strong>is kind of new and lack of support with Asp.net Core<\/strong><\/span> in the meantime. Using the Trilon<\/g><\/strong> <\/strong>template makes easy for us. Please follow the simple steps and let me know how you like it. \ud83d\ude42 Happy coding.<\/p>\n\n\n\n

Let’s get started<\/h2>\n\n\n\n
\/\/ Make a directory where you want the project\nmkdir my-vue-starter && cd my-vue-starter\n\n\/\/ Download the dotnet template\ndotnet new -i aspnetcore-vuejs\n\n\/\/ Run and install the template\ndotnet new vuejs\n\n\/\/ Make sure you install the dependencies\nnpm install<\/pre>\n\n\n\n
You should get like this<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Let’s make some HTTP Get Request<\/h2>\n\n\n\n
 Create database “vuecore <\/strong>“, table  ” tblPersons<\/strong>” and stored procedure “getPersons<\/strong>“<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\nInsert  Some Records\n\n<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
--Snippet\nUSE [vuecore]\n GO\n INSERT INTO [dbo].[tblPersons] ([Name] ,[Address]) VALUES ('John', 'USA')\n INSERT INTO [dbo].[tblPersons] ([Name] ,[Address]) VALUES ('Smith', 'Philippines')\n INSERT INTO [dbo].[tblPersons] ([Name] ,[Address]) VALUES ('Jackie', 'China')\n GO<\/pre>\n\n\n\n
Create Stored Procedure<\/h2>\n\n\n\n
CREATE PROCEDURE getPersons @Id int = null --Optional\n AS\n IF @Id <> ''\n BEGIN\n   SELECT * FROM tblPersons WHERE Id = @Id \n END\n ELSE\n BEGIN\n      SELECT * FROM tblPersons\n END\n GO<\/pre>\n\n\n\n
Setting Our API<\/h2>\n\n\n\n
Creating “ConnectionStrings” in appsettings.json<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
{\n   \"ConnectionStrings\": {\n     \"DefaultConnection\": \"Server=(localdb)\\mssqllocaldb;Database=vuecore;Trusted_Connection=True;MultipleActiveResultSets=true\"\n   }\n   }<\/pre>\n\n\n\n
Creating<\/g> “Persons” Model<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
using System.ComponentModel.DataAnnotations;\n namespace my_vue_starter.Models\n {\n     public class Persons\n {\n     [Key]\n     public int Id { get; set; }\n     public string Name { get; set; }\n     public string Address { get; set; }\n }<\/code>\n }<\/pre>\n\n\n\n
Install DAPPER using NPM<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Creating “PersonsDataProvider”<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
using Dapper;\n using Microsoft.Extensions.Configuration;\n using my_vue_starter.Interfaces;\n using my_vue_starter.Models;\n using System.Collections.Generic;\n using System.Data;\n using System.Data.SqlClient;\n using System.Threading.Tasks;\n namespace my_vue_starter.DataProviders\n {\n     public class PersonsDataProvider : IPersons\n     {\n         private readonly string connectionString;\n         public PersonsDataProvider(IConfiguration configuration)\n         {\n             this.connectionString = configuration.GetConnectionString(\"DefaultConnection\");\n         }\n         public async Task<IEnumerable<Persons>> GetPersons(int Id)\n         {\n             using (var sqlConnection = new SqlConnection(connectionString))\n             {\n                 await sqlConnection.OpenAsync();\n                 var dynamicParameters = new DynamicParameters();\n                 dynamicParameters.Add(\"@id\",Id);\n                 return await sqlConnection.QueryAsync(\n                     \"getPersons\",\n                     dynamicParameters,\n                     commandType: CommandType.StoredProcedure);\n             }\n         }\n     }\n }<\/pre>\n\n\n\n
Creating “IPersons” Interface<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
using my_vue_starter.Models;\n using System.Collections.Generic;\n using System.Threading.Tasks;\n namespace my_vue_starter.Interfaces\n {\n     public interface IPersons\n {\n          Task<IEnumerable<Persons>> GetPersons(int Id);\n     }\n }<\/pre>\n\n\n\n
Registering to Startup (Configuration)<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
services.AddTransient<IPersons, PersonsDataProvider>();<\/pre>\n\n\n\n
Creating “PersonsController”<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 using System.Collections.Generic;\n using System.Threading.Tasks;\n using Microsoft.AspNetCore.Mvc;\n using my_vue_starter.Interfaces;\n using my_vue_starter.Models;\n namespace my_vue_starter.Controllers\n {\n  [Route(\"api\/[controller]\")]<\/code>\n   public class PersonsController : Controller<\/code>\n    {     <\/code>\n    private readonly IPersons _persons; <\/code>\n    public PersonsController(IPersons persons) <\/code>\n    { <\/code>\n        this._persons = persons;     <\/code>\n    }    <\/code>\n    public async Task<IEnumerable<Persons>> GetPerson(int Id)    <\/code>\n    {         <\/code>\n        return await this._persons.GetPersons(Id);    <\/code>\n    }<\/code>\n  }<\/code>\n }<\/pre>\n\n\n\n
Test with Postman<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Get Person with “Id”<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Configure ClientApp<\/h2>\n\n\n\n
 Registering our routes <\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
import GetData from 'components\/get-data'\n\n{ name: 'get-data', path: '\/api\/Persons', component: GetData, display: 'Get Data', icon: 'list' }<\/pre>\n\n\n\n
Adding “get-data.vue” component<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Link to component  get-data.vue<\/a><\/h4>\n\n\n\n
Download Template<\/a><\/div>\n\n\n\n
Final results<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Download the code in GitHub<\/a><\/h2>\n\n\n\n
Get me there<\/a><\/div>\n\n\n\n
BIG CREDIT T<\/strong>O TRILON<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello, my name is Harry. I created this sample on how to get started with C# Asp.net Core + Vue. Vue is kind of new and lack of support with Asp.net Core in the meantime. Using the Trilon template makes easy for us. Please follow the simple steps and let me know how you like […]<\/p>\n","protected":false},"author":1,"featured_media":1682,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[92,93,94],"class_list":["post-893","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-software","tag-asp-net-core-and-vuejs","tag-asp-net-core-with-dapper","tag-trilon-asp-net-core-and-vuejs"],"_links":{"self":[{"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/posts\/893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/comments?post=893"}],"version-history":[{"count":0,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/posts\/893\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/media\/1682"}],"wp:attachment":[{"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/media?parent=893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/categories?post=893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/tags?post=893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}