.NET GENES

Hello, I was recently assigned and trained to work on future sprints for an existing project using Quasar Framework/Vue as Front-End and ASP.NET Core API as the back-end. Given that the project has been established for a couple of years now and has been significantly updated by the developer/architect in the US, learning through this involves sharing is caring, debugging and stepping through the code itself. With the goal at hand, I did some research on how to debug Quasar projects using the Visual Studio Code editor. After a few hours, I managed to debug the application based from the provided steps below. 1. Create a launch.json file if you have not do so. To create a launch.json file, click the Debug button on the left side of the editor and click 'create a launch.json file' link. This will create a launch.json file inside .vscode folder. 2. Replace the configurations object properties in the launch.json file with the settings below. Make sure to change the port of th

Hello, I've been very busy these past few months due to personal reasons and some important matters to accomplish. And since, I'm going back to the office and don't have a workstation for personal usage, I decided to visit our local mall here in Cebu and check the computer stores for high-end laptops which is affordable. After hours of walking and canvassing inside the mall, I finally found what I'm looking for. The Acer store has just dropped the prices of their laptops including it's gaming models to almost 20% of which I certainly availed and purchased. I chose their Aspire 7 A715-42G-R9F8 AMD RyzenTM 7 gaming model because of it's technical specifications, design, physical characteristics and of course, the marked down price. The basic requirements for my personal laptop of which were satisfied by Acer Aspire 7 A715-42G-R9F8 model are the following: a. Processor Type - At least Intel i7 or Ryzen 7 b. RAM - Expandable to 32GB c. Hard Disk - 512 SSD d.

Hello and Good day! In this blog post I will demonstrate on how to add a select or dropdown control in Bootstrap-Table by Wenzhixin with an OnChange() event in ASP.NET Core MVC. For this tutorial, I will only fetch records from a List variable with fake information and not from a database for simplicity sake. To begin create an ASP.NET Core MVC using Visual Studio that targets the .NET 5 Framework and perform the rest of the steps below. I. Project Setup A. Add via libman the Bootstrap-Table by Wenzhixin using CDN as the option. B. Add via libman font-awesome using CDN as the option. C. Add the latest tableExport.js to bootstrap-table folder. D. Add Nuget Package Microsoft.AspNetCore.Mvc.NewtonsoftJson 5.x E. Add a new class in the Models folder called Product.cs Here's the project structure. II. Coding The Project A. Product.cs - Add properties that describe a product. The status property is where the Dropdown of the Boostrap-Table is bound to. public class Product {

Good evening, When working with Detail View option in Bootstrap-Table by Wenzhixin, there's a possibility that you have to render the details information using a table element to the detail view with same number of columns and headers of the parent table as per client request. However, upon rendering the details view with the table element, the child table's columns are not aligned with the parent Bootstrap-Table such as the sample screen below. I tried different solutions such as CSS, jQuery/JavaScript and MutationObserver Pattern which work for a few details view and the rest would be in disarray. Before presenting the solution, here are the codes involved in this project. Bootrap Table With data-detail-view property enabled. <table id= "tblDetailsReport" class= "TableBorderCollapse table-striped" data-toggle= "table" data-sort-name= "JobNumber" data-sort-order= "asc" data-search= "t

Hi Felas! In this post, I will now demonstrate on how to integrate Tailwind CSS into an empty ASP.NET Core 5.0 MVC Web Application and the steps used where taken from my previous post on How To Install Tailwind CSS 3.0 Using Tailwind CLI And Visual Studio Code In Your Web Project Project Setup 1. Create a new ASP.NET Core MVC project using Visual Studio 2019. 2. Once created, add two empty css files called input.css and output.css inside the css subfolder of wwwroot. 3. In your _Layout.cshtml page, comment out or remove the code that references both the bootstrap.min.css and site.css files. 4. Replace that with output.css. For now this is just an empty stylesheet file and after the CLI build is done, this file will be populated with Tailwind css codes. Installing Tailwind CSS using CLI command 1. Open Package Manager Console in Visual Studio 2019 (Tools -> NuGet Package Manager -> Package Manager Console). 2. Run create package.json command. This will eventually ad

Hello and Good afternoon! In this post, I will demonstrate on how to install Tailwind CSS 3.0 which is the latest version as of this writing using Tailwind CLI and Visual Studio Code Terminal. The steps presented in this article are derived solely from the documentation which is then applied to an empty web project using Visual Studio Code IDE and it's built-in terminal. This framework was introduced to me by a ex-colleague of mine who's now focused on working with the latest front-end JavaScript and CSS frameworks. According to the documentation, Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. In a nutshell, it is a utility-first CSS framework for rapidly building custom designs. Ok enough talk and let's get down to business. 1. Create a projects folder called test-project with three subdirectories namely cs

Good afternoon! In a situtation where you add string values to a StringBuilder object using the AppendLine() method and you want to delete the last character, you might expect that using the Remove() method in the code below will work. But the truth is it does not. private static void RemoveLastCharacter() { StringBuilder sb = new StringBuilder(); sb.AppendLine( "Lorem ipsum dolor sit amet, consectetur adipiscing elit," ); sb.AppendLine( "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." ); sb = sb.Remove(sb.Length - 1, 1); Console.WriteLine(sb.ToString()); } Using Appendline() method to populate the StringBuilder object according to the documentation will also append the default line terminator after the string value to the end of the StringBuilder instance. Since the default line terminator has two characters specifically "\r\n", we need to include those two characters plus the last character of the string. The revise

Good evening, This blog post demonstrates on how to upload or send a form with multiple files using HttpPostedFileBase class which is a property of a model class using jQuery and ajax in ASP.NET MVC. Given a sample model, I have declared a HttpPostedFileBase array property which is responsible for handling multiple files. public class clsWeeklyStatusReports { public Guid ID { get ; set ; } public string DomainName { get ; set ; } public string EmployeeName { get ; set ; } public DateTime SubmissionDate { get ; set ; } public string SubmissionDateDisplay { get { return SubmissionDate.ToString( "MM/dd/yyyy" ); } } public string MimeType { get ; set ; } public string FileName { get ; set ; } public HttpPostedFileBase[] Files { get ; set ; } public clsWeeklyStatusReportsGM() { ID = Guid.Empty; DomainName = string .Empty; EmployeeName = string .Empty; MimeType = string .Empty; FileName = string .Empty

Hello, Given the input element with an autofocus directive that on page load, this control get's focused right away. <input v-autofocus :class= "{ 'error' : empname.length > 22 }" /> The code to automatically focus the control is shown below using the inserted() method. directives:{ autofocus: { inserted(el){ el.focus(); } } } For some reasons the code above does not work in Vue.js 3x. After reading the docs, the solution that work was to use mounted() function instead of inserted() method if you're using Vue.js 3x. directives:{ autofocus: { mounted(el){ el.focus(); } } } Cheers!

Good evening! After adding the node modules using 'npm i' command in a Quasar or Vue.js project, I needed to show that folder in Visual Studio Code project explorer window since it's part of the project. Some of the solutions provided was to add some json configuration in settings.json which did not work. The solution that worked for me was to alter changes in Visual Studio Code Preferences itself. To proceed, go to File -> Preferences -> Text Editor -> Files and scroll down to locate the Exclude pane. Hover to the node_modules value and click the 'Remove Exclude Item' button. After that, the node_modules folder appears in the project explorer window. Cheers!