“Visual Studio” and “Visual Studio Code” are not the same thing. Visual Studio is an integrated development environment (IDE) and Visual Studio Code is a rich text editor like Sublime Text and Atom.

But the difference between the tools is more than just IDE and text editor.

An IDE is a robust tool for writing, editing, debugging, and running your code. A text editor only lets you write and edit your code. You might have to step out of a text editor to run your code or download plugins to help it do the running for you.

In this article, you'll learn the main differences between Visual Studio and Visual Studio Code. But firstly, we need to know what “Visual Studio” is and what “Visual Studio Code is” before diving into those differences.

What We'll Cover

• What is Visual Studio?
• What is Visual Studio Code?
• What is the Difference between “Visual Studio” and “Visual Studio Code”?
• Which should you Choose between “Visual Studio” and “Visual Studio Code”?
• Conclusion

What is Visual Studio?

Visual Studio was first released in 1997 by Microsoft. It's an integrated development environment (IDE) for developing, editing, and debugging websites, web, and mobile applications as well as cloud services.

Because it's an IDE, programming utilities like a debugger, compiler, intellisence, and more are all bundled into it for you.

Visual Studio comes with built-in support for C# and .NET. It also supports other programming languages like C, C++, Python, F#, web languages (HTML, CSS, JavaScript), and a lot more. Support for Java was removed back in Visual Studio 2017.

Visual Studio runs on Windows and Mac. It has 3 editions – community, professional, and enterprise. The community version is free, while the professional and enterprise are not.

The installation is quite a bit more robust on Windows than Mac. So, on Windows, you might have to download more than 42 GB depending on what you want to do.

But on Mac, as of the time of writing this article, you need around 6.2 GB of disk space.

What is Visual Studio Code?

Visual Studio Code (also called VS Code) is like the mini version of Visual Studio. It is an open-source and lightweight text editor available on Windows, Mac, and Linux. There’s also the web version available at https://vscode.dev/.

VS Code comes with built-in support for JavaScript, TypeScript and Node JS, but you can use it to code in any language you want. All you need to do is download the relevant extensions.

Some of the extensions are made by Microsoft, but a lot of others are third-party extensions.

Unlike Visual Studio, you don’t need much space to download VS Code. You might not need more than 200 MB of disk space to download it.

Since it supports JavaScript, TypeScript, and Node JS by default, you get a debugger and intellisence, too. But to get intellisence, a compiler, and debuggers for other languages, you have to download relevant extensions.

Now you know that Visual Studio is an IDE and Visual Studio Code is a text editor. So let's summarize their main differences next.

What is the Difference between “Visual Studio” and “Visual Studio Code”?

Which should you Choose between “Visual Studio” and “Visual Studio Code”?

There has been a long-running debate about which is better and which to choose between Visual Studio and Visual Studio Code. Well, it depends on what you are doing.

If you’re developing exclusively with a language supported by Visual Studio such as C#, C, C++, Python, and others, Visual Studio or other relevant IDEs are likely the best option for you.

But even if you’re developing in those languages but you require a React, Vue, or Angular frontend, VS code might be the best option for you.

If you’re working in a team, they might provide you with the enterprise version of Visual Studio, or any other IDE that correlates with the language you are working with. For example, PyCharm for Python and IntelliJ Idea for Java.

If you’re using Linux, you have to choose Visual Studio Code or some other IDE apart from Visual Studio. That’s because Visual Studio does not run on Linux.

If you’re the kind of person that likes to customize your editor to your taste, just go for VS Code because it's highly customizable. You also should probably choose VS Code if you are mixing technologies.

Conclusion

This article showed you the differences between Visual Studio and VS Code, and also what they both are separately.

The debate should never be which one is better than the other, but which is best for what you want to do, or what you need. That’s why we looked at some scenarios that might encourage you to choose one over the other.

Thank you for reading.

When you use code snippets in Visual Studio, it can make your coding process a lot easier and faster. But what are code snippets? And how can you use them?

In this article, we'll look at how you can create code snippets in C#. Just keep in mind that snippets are available in other languages in Visual Studio as well.

If you already know what code snippets are, then you can skip down to the “How to Auto-Generate Code Snippets” section.

What are Code Snippets?

If you regularly work with Visual Studio, you might already know what code snippets are. Code snippets represent a shortcut for a larger piece of code.

As an example, open a C# project in Visual Studio and write “for” and then press the tab key twice. As you can see, instead of writing the full for loop we created a for loop just by writing “for”.

There are a lot more pre-defined code snippets you can use. For example, if you write “cw” and then press the tab key twice you’ll see an auto-completion that writes this:

Console.WriteLine();

You can check out the full list of the pre-defined code snippets in the docs here:

How to Create Custom Code Snippets

Now that you understand what a code snippet is, we can now go over how to create one.

To create your first code snippet, create a “.snippet” file. I called my file “MySnippet.snippet”, but you can call it whatever you want.

After the creation of the code snippet file, open the file in Visual Studio and add the following piece of code into the file.

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title></Title>    
            <Author></Author>
            <Description></Description>
            <Shortcut></Shortcut> 
        </Header>
        <Snippet>
            <Code Language="">
                <![CDATA[]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

In the example above, we use the basic structure of a code snippet file. Now, we’ll edit it and create a code snippet that will convert “cr” to Console.ReadLine().

Title Tag

The title tag contains the title of the snippet (not the shortcut name). In this example we’ll call the title “ReadLineSnippet”.

Author Tag

In the Author tag, you can insert your name/company to get credit for the snippet creation.

Description Tag

In the description tag, insert a short description of what the snippet does exactly.

Shortcut Tag

The name in the shortcut tag is the name that calls the larger piece of code. For example:

cw -> Console.WriteLine();

The “cw” is specified as the name in the shortcut tag.

Language

Because we're working with C# we should specify that in the language:

<Code Language = "CSharp">

<![CDATA[]]>

The <![CDATA[]]> holds the value of our snippet. In our example, inside the squared brackets we’ll insert Console.ReadLine() like this:

<![CDATA[Console.ReadLine();]]>

Additional Code Snippet Options

Defining Variables:

We can also define variables and give them a default value. By defining a variable we can use it multiple times in the snippet, and we give the user the option to change all the occurrences of the default value at once.

For example, if our snippet creates the following code:

arr -> 
Object[] arr = new Object[100];
for(int i = 0; i < arr.Length; i++)
{   
    arr[i] = default(Object);
}

And we define “Object” as a variable, we can replace all its occurrences. All we need to do is to write in the first occurrence a different name – for example “int” – and then tab twice and it will turn all occurrences of “Object” to “int”.

If we had defined arr as a variable too, we could move from one variable to another by pressing tab (when you create the snippet the first variable will be selected in red/cyan color – you can move to the other by pressing tab).

How to define a variable

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>init array.</Title>    
            <Author>Gilad Bar-Ilan</Author>
            <Description>creates and initializes an array.</Description>
            <Shortcut>myArr</Shortcut> 
        </Header>
        <Snippet>
            <Code Language="CSharp">
                <![CDATA[$typeName$[] $varName$ = new $typeName$[100];
                for(int $i$ = 0; $i$ < $varName$.Length; $i$++)
                {
                  $varName$[$i$] = default($typeName$);
                }]]>
            </Code>
            <Declarations>      
                <Literal>      
                    <ID>varName</ID>      
                    <ToolTip>variable name.</ToolTip>         
                    <Default>arr</Default>        
                </Literal>
                <Literal>      
                    <ID>typeName</ID>      
                    <ToolTip>type name.</ToolTip>         
                    <Default>Object</Default>        
                </Literal>
                 <Literal>      
                    <ID>i</ID>      
                    <ToolTip>iterator name.</ToolTip>         
                    <Default>i</Default>        
                </Literal>
             </Declarations>     
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

As you can see in the example above, each variable we use needs to be inside the <Literal> tag under the <Declarations> tag.

• <ID>  — How we call the variable in the <![CDATA[]]>
• <ToolTip> — A short description of the variable.
• <Default>  — The default value of the variable.

NOTE — When you use a variable in the <![CDATA[]]> you should write it in the following structure: $<here you put the variable name>$.

How to add the code snippet to your project

After we’ve created our code snippet file, we want to use it in our projects. To do so we should put the file inside the custom snippet folder of Visual Studio. This will automatically add the code snippet to our project.

If you want to find the folder path:

• Open a C# project.
• Go to Tools -> Code Snippets Manager
• Copy the path you see in the head of the box opened where it says “Location”.

After you’ve got the path, simply add the file into the path.

NOTE — Your “My Code Snippets” folder may be located in a different place on your computer, so don't rely on the path in the picture.

How to Auto-Generate Code Snippets

Now we can now go over what it means to auto-generate code snippets.

We know that adding “.snippet” files into the “My Code Snippets” folder adds the snippets automatically into our project. So now we can use that behaviour to create code that will automatically create snippet files and add them to our project.

What kind of code snippets do we want?

In this project, we are going to create a snippet for objects with a default constructor where the shortcut name will be the type name. For example:

Random + tab twice -> Random random = new Random();

The idea of the project is to read the namespaces we use in our project and make a custom snippet for each object that follows the conditions.

We want to add the snippets for the types of every namespace we use. This means that even if we specify a namespace in the ‘using’ but don’t use any of its objects, we’ll still include a code snippet for its members (those who follow the condition).

In addition to the namespaces, we are also going to create a snippet for our defined types.

Things we need to take care of:

• Remove the no longer needed types’ code snippets (if we removed types we’ve created or removed namespaces from the project).
• Update the code snippets every time the user runs the program (we don’t update in the background).
• Add new snippets for new namespaces we use / types we create.
• Make a structure for the types’ code snippet.

How to get all of our defined objects

If we want to get the full list of the user-defined types there are two ways to do so.

The first way – which is not as good as the second – is by using Regular Expressions. By using regular expressions, we can go over each file in our project and match for a default constructor in a class/declaration of a struct (because structs always have a default constructor).

Problems with the Regex technique

If the user separates the files we can check before using the regex if the file was modified. By doing that we can avoid repeating files that haven’t been modified.

But minor changes in the file will cause us to read the file again even if there is no difference in the objects. It'll also result in unorganized files that have a lot of code in a single file which can cause us to read the file over and over. (If the whole code is in a single file or just a few we won’t be able to avoid reading unchanged parts from the code.)

The Second Technique — Reflection

Instead of using Regex we can use reflection and get the classes we created by reading the metadata instead of reading each file as a text.

        /// <summary>
        /// Returns a list of all the types we created.
        /// </summary>
        /// <returns></returns>
        public static List<Type> GetCustomTypes()
        {
            StackTrace myStackTrace = new StackTrace();

            //contains the name of the namesapce of the project
            //using stackframe we get's the first calling method (main - the bottom of the stack) and then we check the namespace of the type where the method is located.
            //in our case main is located under 'Program' then we check what is the namespace of Program.
            string namespace_ = myStackTrace.GetFrame(myStackTrace.FrameCount - 1).GetMethod().DeclaringType.Namespace;

            Assembly assembly = Assembly.GetExecutingAssembly();

            //holds all the custom types.
            //assembly.GetTypes() => returns all the types.
            //then we remove all the types which is not related to our namesapce.
            //then we remove all the compiler created types.
            //then we remove all the types which doesn't have a default constructor.
            var types = assembly.GetTypes().Where(x => x.Namespace == namespace_).Where(x => !x.Name.Contains("<>c"))
                        .Where(x => x.GetConstructors().Any(x => x.GetParameters().Length == 0));
            return types.ToList();
        }

How to get the libraries’ objects

We'll run into a lot of problems in this part of the project. Let's look at what might go wrong.

Problem 1

If we read the assemblies we use in our project using Reflection we won’t have the option to get the types from libraries we defined in the ‘using’ but that we don’t actually use. For example:

using System.Linq;
using System.IO;
public static void Main()
{  
    int[] arr = Enumerable.Range(0,100).ToArray(); //Linq's functionallity
}

In the example above ,we only use Linq functionality, which means that if we are going to read the used assemblies in the project we won’t see System.IO even though we want it to be shown.

Problem 2

Another possible problem happens even when we do use the library. This is because a namespace can have multiple assemblies and due to efficiency the compiler won’t call all the assemblies when it doesn’t need to. So even if we use the library it doesn't mean we’ll have all the assemblies.

How can we solve the problem?

This problem is complicated because we cannot change the way the compiler works. So if we want to solve the problem we’ll have to be creative.

Our solution won't be very efficient, but we don’t have a lot of options for how to solve this.

We can use an algorithm

• We get all the namespaces we use in all of our “.cs” files in the project.
• Then we iterate over all the System DLL files and we check if the types there relate to one of the namespaces we use in the project.
• We add to this list also our defined types, as well as references we added to the project, if the reference is defined in the ‘using’ we add his types even if we don‘t use his types in the program itself.
• After we do that we check if the type has a default constructor.

The code for solving the problem is quite complicated, so let’s go over it.

using System;
using System.Reflection;
using System.Linq;
using System.IO;
using System.Collections.Generic;
using System.Diagnostics;
using System.Text.RegularExpressions;

namespace Reader
{
    public class TypeReader
    {
        public static List<Type> GetAllTypes()
        {
            #region GetSystemLibrary Files
            string systemDllPath = typeof(string).Assembly.Location; //gets the dll of the string type.
            systemDllPath = Path.GetDirectoryName(systemDllPath);
            string[] systemLibraries = Directory.GetFiles(systemDllPath); //the list of the system libraies dlls.  
            #endregion

            #region Namespaces in project files.
            string[] namespaces_ = Directory.GetFiles(GetSourceCodePath())
                                      .Where(x => x.EndsWith(".cs")).ToArray();
            namespaces_ = GetNamespaces(namespaces_).ToArray();//we remove the semi colon
            #endregion

            #region Check the system libraries.
            List<Type> types = systemLibraries.Where(x => x.EndsWith(".dll")).Select(x =>
            {
                Assembly asm = null;
                try
                {
                    asm = Assembly.LoadFile(x);

                }
                catch
                {
                    asm = null;
                }

                return asm;
            }).SelectMany(x => x != null ? x.GetTypes() : new Type[] { })
                        .Where(x => x != null && !x.Name.Contains("<>c")).Where(x => namespaces_.Contains(x.Namespace))
                        .Where(x => x.IsPublic && (x.IsClass || x.IsValueType)).ToList();
            #endregion

            #region add assemblies we use in our program.
            types.AddRange(AppDomain.CurrentDomain.GetAssemblies()
                           .SelectMany(x => x.GetTypes().Where(x => !x.Name.Contains("<>c")).Where(x => namespaces_.Contains(x.Namespace)))
                           .Where(x => x.IsPublic && (x.IsClass || x.IsValueType)));
            #endregion

            #region add custom types we created.
            types.AddRange(GetCustomTypes()); //adds our custom created snippets
            #endregion

            #region add types belongs to refrences we didn't use in our project.
            types.AddRange(GetUnUsedRefrenecedTypes(namespaces_)); //adds the refrenced libraries we specify but don't use.
            #endregion

            #region filter types.
            types = types.Where(x => x.IsValueType || x.GetConstructors().Any(x => x.GetParameters().Length == 0)).ToList();
            #endregion

            #region remove duplicated type names.
            types = types.GroupBy(x => x.FullName).Select(x => x.First()).ToList();
            #endregion

            return types;
        }

        //Returns the assembly of the main function.
        public static string GetMainAssemblyLocation()
        {
            StackTrace main = new StackTrace();
            string path = main.GetFrame(main.FrameCount - 1).GetMethod().DeclaringType.Assembly.Location;
            return Path.GetDirectoryName(path);
        }

        public static string GetSourceCodePath()
        {
            string projectPath = GetMainAssemblyLocation();

            try
            {
                while (!Directory.GetFiles(projectPath).Any(x => x.EndsWith(".cs")))
                {
                    projectPath = projectPath.Remove(projectPath.LastIndexOf("\\"));
                }
            }
            catch
            {
                throw new SourceCodeNotFoundException();
            }

            return projectPath;
        }

        public static List<string> GetNamespaces(string[] files)
        {
            List<string> namespaces = new List<string>();

            foreach (string file_ in files)
            {
                StreamReader fileStream = new StreamReader(file_);
                Regex matchUsing = new Regex(@"using([ ]|\t|\n)+\S+;");
                string[] fileNamespaces = matchUsing.Matches(fileStream.ReadToEnd()).Select(x => x.Value)
                                          .Select(x => x.Remove(x.IndexOf("using"), "using".Length).Trim()).ToArray();
                namespaces.AddRange(fileNamespaces);

                fileStream.Close();
            }

            return namespaces.Select(x => x.Remove(x.Length - 1, 1)).Distinct().ToList();
        }

        /// <summary>
        /// This is used in case we have a custom refrenced library (could be a dll we created)
        /// and we specify that in the using, however, we don't use his assemblies.
        /// </summary>
        /// <returns></returns>
        public static List<Type> GetUnUsedRefrenecedTypes(string[] namespaces_)
        {
            string sourceCode = GetMainAssemblyLocation();
            List<Type> otherTypes = new List<Type>();

            string[] fileNames = Directory.GetFiles(Path.GetDirectoryName(sourceCode));

            if (fileNames.Any(x => x.EndsWith(".dll")))
            {
                fileNames = fileNames.Where(x => x.EndsWith(".dll")).ToArray();

                foreach (var file in fileNames)
                {
                    Assembly asm;

                    try
                    {
                        asm = Assembly.LoadFile(file);
                    }
                    catch
                    {
                        continue;
                    }

                    otherTypes.AddRange(asm.GetTypes().Where(x => !x.Name.Contains("<>c"))
                                        .Where(x => x.IsPublic && (x.IsClass || x.IsValueType))
                                        .Where(x => namespaces_.Contains(x.Namespace)).GroupBy(x => x.Name)
                                        .Select(x => x.First()));
                }
            }

            return otherTypes;
        }

        /// <summary>
        /// Returns a list of all the types we created.
        /// </summary>
        /// <returns></returns>
        public static List<Type> GetCustomTypes()
        {
            StackTrace myStackTrace = new StackTrace();
            Type mainType = myStackTrace.GetFrame(myStackTrace.FrameCount - 1).GetMethod().DeclaringType;

            //contains the name of the namesapce of the project
            //using stackframe we get's the first calling method (main - the bottom of the stack) and then we check the namespace of the type where the method is located.
            //in our case main is located under 'Program' then we check what is the namespace of Program.
            string namespace_ = mainType.Namespace;
            Assembly assembly = mainType.Assembly;

            //holds all the custom types.
            //assembly.GetTypes() => returns all the types.
            //then we remove all the types which is not related to our namesapce.
            //then we remove all the compiler created types.
            //then we remove all the types which doesn't have a default constructor.
            var types = assembly.GetTypes().Where(x => x.Namespace == namespace_).Where(x => !x.Name.Contains("<>c")); ;
            return types.ToList();
        }
    }

    internal class SourceCodeNotFoundException : Exception
    {
        public override string Message => "Could not load the '.cs' files, please make sure\n" +
                                    "your files located in the default place / you have a valid project type.";
    }
}

Important Note:

//If I mention in the explanation the words "main function" I mean:

public static void Main()
{   
    TypeReader.GetAllTypes();
}
//Which means that the main function does not located in the 
//TypeReader class it's the main function who calls the class.

GetSystemLibrary Files Region

In these lines, we get all the library files of “System”.

• We check where the assembly of one of the system DLLs is located (in our case where the assembly of ‘string’ is).
• Then we remove the file name from the path so we’ll have only the directory.
• Then we take only the library files from the directory (“.dll”).

We do so because all of the System libraries files are located in the same directory.

Namespaces in the project files Region

In these lines, we get all the namespaces we use in all of our project files.

Custom methods we use in these lines

GetSourceCodePath — This function returns the path of our source code. First, we get the path of the main function’s dll. By assuming that the user works with the default way of sorting directories in Visual Studio, we ‘remove’ directories from our path until we reach a directory with .cs files.

GetMainAssemblyLocation — We use StackTrace to get the assembly location of the main function. An example for 'Removing' is
C:\Users\File1\File2 -> C:\Users\File1

If we can’t find any directory we throw SourceCodeNotFoundException.

GetNamespaces — The method returns all the namespaces within the files we entered. It iterates over each file and reads all the namespaces we are using in each one of them using Regex.

For each namespace we’ll get using <Something>; then we’ll remove all of the extra characters and we only keep the <Something>.

In GetAllTypes

• We read all the files from our source code directory
• We only keep the files with an extension of “.cs”
• We get the namespaces of the files.

Check the system libraries Region

In these lines, we check the system libraries. These lines fix both problems we mentioned before.

• We get all the files in the system DLL's directory and we only keep those that represent a dll (with an extension of “.dll”).
• We try to load each one of these files.
• If we can load the file then we get the types in the assembly.
• We remove all the compiler created types “<>c”.
• We only keep the types related to one of the namespaces in our project.
• Then we only keep the public types and those that are class or struct.

Why do we do it like this?

The problems we mentioned before were caused because we tried to check what the program actually uses in runtime. But the compiler makes optimizations, and that’s why we cannot really reach the cases mentioned in the problems.

So for solving this problem, we need to get creative and check the namespaces we use in our project files. Then we load the assemblies, and at the end check that each type if its namespace is one of the namespaces we use in our project.

add assemblies we use in our program Region

In these lines, we add the assemblies we use in our program.

For each one of the assemblies, we make the same check for the type it contains.

• If the type is public
• If it’s struct or class
• If it’s not a compiler-created type.
• If it’s related to one of the namespaces we use in our project.

add custom types we created Region

In this line, we add all of the custom types we’ve created.

GetCustomTypes — The function uses StackTrace for getting the namespace and the assembly of the main function.

After we have the assembly we get the types that related to the main’s namespace.

add types belongs to references we didn't use in our program Region

In this line, we add the types that belong to references we didn’t use in the program and that were specified in the ‘using’ (just like we did for the system types, but this time we do that for the references we added manually, not ‘System’).

GetUnUsedReferencedTypes 

• We go over the source code directory (the manually added references located there).
• We try to load the ‘.dll’ files and add all the types that pass the conditions we did in previous checks in main.

filter types Region

In this line, we only keep value types and classes that have a default constructor (if they are value types they have a default constructor for sure).

remove duplicated type names Region

We remove duplicated types by name.

How to Build the Snippets

We've gotten through the hard part, so now it’s time to build the snippets!

using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using Reader;

namespace SnippetGenerator2
{
    public class CodeSnippetGenerator
    {
        public string SnippetLocation;

        public CodeSnippetGenerator(string snippetLocation)
        {
            this.SnippetLocation = snippetLocation.EndsWith("\\") ? snippetLocation : snippetLocation + "\\";
        }

        public void UpdateSnippets()
        {
            List<Type> allTypes = TypeReader.GetAllTypes();
            Func<Type, string> makeFileName = x => SnippetLocation + x.Name + "-" + x.Namespace + ".snippet";

            DirectoryInfo myCodeSnippets = new DirectoryInfo(SnippetLocation);
            string[] snippetFileNames = allTypes.Select(x => makeFileName(x)).ToArray();
            string[] previous = myCodeSnippets.GetFiles().Where(x => x.Name.EndsWith(".snippet")).Select(x => x.Name).ToArray();

            //we only keep the files that no longer exsisted.
            previous = previous.Where(x => !snippetFileNames.Contains(x)).ToArray();
            previous.ToList().ForEach(x =>
            {
                try
                {
                    File.Delete(SnippetLocation + x);
                }
                catch { }
            });//we remove the files we don't need.

            allTypes.ForEach(x => 
            {
                if (!Directory.GetFiles(SnippetLocation).Contains(makeFileName(x)))
                    CreateSnippet(x);
            }
            ); //we create snippets for the types.
        }

        public List<string> RemoveAllCodeSnippets()
        {
            string[] files = Directory.GetFiles(SnippetLocation).ToArray();
            List<string> notDeleted = new List<string>();


            files.ToList().ForEach(x =>
            {
                StreamReader snippetFile = new StreamReader(x);

                if (snippetFile.ReadToEnd().Contains("<Author>AUTO-GENERATOR</Author>"))
                {
                    snippetFile.Close();

                    try
                    {
                        File.Delete(x);
                    }
                    catch
                    {
                        notDeleted.Add(x);
                    }
                }
            });

            int i = 0;
            while(i < notDeleted.Count)
            {
                i++;
                try
                {
                    File.Delete(notDeleted[i]);
                }
                catch
                {
                    continue;
                }
                notDeleted.Remove(notDeleted[i]);
            }

            return notDeleted;
        }


        /// <summary>
        /// Creates a snippet.
        /// </summary>
        /// <param name="type">The type to make the default create for.</param>
        /// <param name="description">The description of the snippet.</param>
        internal void CreateSnippet(Type type,
                                       string description = "DefaultDescription")
        {

            string snippet_structure = $@"<?xml version=""1.0"" encoding=""utf-8""?>
  <CodeSnippets xmlns = """">  
     <CodeSnippet Format = ""1.0.0"">   
         <Header>    
            <Title>{type.Name}-{type.Namespace}</Title>    
            <Author>AUTO-GENERATOR</Author>
            <Description> {description}</Description>
            <Shortcut> {type.Name} </Shortcut>   
         </Header>   
         <Snippet>  
           <Code Language = ""CSharp"">    
                 <![CDATA[{type.Name} $obj$ = new {type.Name}();]]>     
             </Code>     
             <Declarations>      
                <Literal>      
                    <ID>obj</ID>      
                    <ToolTip>variable name.</ToolTip>         
                       <Default>{type.Name.ToLower()}</Default>        
                   </Literal>       
                </Declarations>         
             </Snippet>        
           </CodeSnippet>
         </CodeSnippets>";

            //write the snippet into the snippets directory.
            File.WriteAllText(SnippetLocation + type.Name + "-" + type.Namespace + ".snippet", snippet_structure);
        }
    }
}

Let's talk about this code:

• “Reader” is the namespace of the class we’ve built before.
• TypeReader is the name of the class we’ve built before.
• The file names of the Snippets will be written as <TypeName>-<NamespaceName>.snippet

The Constructor

• The constructor accepts the path for the “My Code Snippets” directory from the user.

The CreateSnippet method

The “CreateSnippet” method creates a snippet with a common structure.

• Title — The <typeName>-<namespace>
• Author — AUTO-GENERATOR, we call all of them by the same name so we’ll know what snippets were created by the CodeSnippetGenerator and what were created by the user.
• We create a structure of:

TypeName typename(in small letters) = new TypeName();

• We set the “shortcut” to be the type name also.

The RemoveAllSnippets method

The RemoveAllSnippets method removes all the snippets that the CodeSnippetGenerator created.

We know if files were created by the code snippet generator by checking if the Author tag contains “AUTO-GENERATOR”.

We try again to delete files that were not deleted the first time. If we can’t delete them at the second time we return a list of the file names that we couldn't delete.

The UpdateSnippets method

The UpdateSnippets method updates the snippets each run. On each run:

• We read the names of the types we use in our main program (not in the CodeSnippetGenerator class).
• We read the names of the .snippet files we have from the previous run.
• We make an array of filenames for each one of our types from our current run.
• We see what snippet files we no longer need by comparing what names of snippet files we had in our previous run that don't exist in the filenames of the current run.
• We remove these files.
• Then we create a “.snippet” file for each type that doesn’t already have one.

How to Use the Snippet Auto-Generator Program

If you want to use the program, simply open a C# project and at the beginning of the main function write:

var csg = new CodeSnippetGenerator("path of 'My Code Snippets'>);
csg.UpdateSnippets(); //to create & update the snippets in 
project.csg.RemoveAllSnippets(); //to remove the created snippets.

Congratulations! You’ve now created your own CodeSnippetGenerator.

I hope these come in handy and save you time when you're writing your code. Thanks for reading :)

In this article, I'll share some of the plugins that I use to make development with Ruby on Rails easier and more fun.

Why use these tools?

Development tools play a significant role in a developer's life. If you are a junior developer and are just getting started working on projects, then knowing about the appropriate tools is a must.

These tools can save you a lot of time and they allow you to code more efficiently and thus increase your productivity.

If you are Ruby on Rails developer who's looking for free development tools, I would recommend Visual Studio. It has a ton of plugins, like the ones mentioned below, and they have helped me increase my productivity a lot.

Note: All visual studio plugins are available on the Visual Studio Marketplace for free.

So let's dive in.

Ruby

With ~1.3M downloads, this is one of the most popular plugins for Ruby. It provides enhanced Ruby language and debugging support.

With enhanced debugging support, developers can set breakpoints and inspect the local and global variables in debug mode. This helps to debug any issues easily and in quick time.

This plugin also supports code formatting via rubocop which is very much needed when you are working with team of developers to maintain consistent code format.

Ruby plugin has the following features:

• Automatic Ruby environment detection with support for rvm, rbenv, chruby, and asdf

• Lint support via RuboCop, Standard, and Reek

• Format support via RuboCop, Standard, Rufo, and RubyFMT

• Basic Intellisense support

• Ruby debugging support

Source: Ruby

Rails

This is another popular plugin for Rails which provides enhanced Rails support.

ERB HTML templating is widely used in Rails ecosystem as views to render HTML pages for websites. The Rails plugin has support for the .erb syntax and also provides auto-completion for popular HTML tags like stylesheet, meta tags, asset tags, and so on.

This plugin also helps to switch between Rails views (*.erb files) easily. It also helps you see online documentation of any methods or commands easily side by side.

Here are some of the features this plugin supports:

• Ruby on Rails “Asset Helpers” and “Tag Helpers” snippets.

• .erb syntax highlights.

• Navigation between related files through command.

• Go to Definition.

• View path suggestion, Model’s static method suggestion, and Model’s field suggestion.

• Open the online document to the side through command.

Source: Rails

Image from VSCode Rails

Ruby Solargraph

Ruby Solargraph is one of the most helpful plugins on this list, and provides IntelliSense, code completion, and inline documentation for Ruby.

Inline documentation helps you view all the allowed methods of the class/object, and also helps you easily understand the definition of each method and its arguments.

This is one of the plugins I have personally used many times to refer to a Ruby method's documentation, arguments for a method, and so on.

Image from VSCode Solargraph

Vscode Endwise

This is my favorite extension that can save you a lot of time and headaches. This extension automatically adds end to all your Ruby code blocks.

Image from VSCode Endwise

Rails Db Schema

This plugin helps you define a DB schema and also enables auto-completion for Rails DB schemas.

While defining schemas or creating tables for any Entity, this plugin enables and autocompletes syntax for all your DDLs (Database definition language) like create_table, create_index, delete_table, update_table, and so on.

Image from VSCode DB Schema

It helps in autocomplete of all attributes of any database entity. For example, if User has email, name, and date_of_birth attributes, this plugin will automatically detect the definition of entity and autocompletes its attributes when you type User.

Image from VSCode DB Schema

Why use Visual Studio?

There are many other IDE options for Ruby on Rails developers like RubyMine (the enterprise version), Sublime, Vim, and so on.

But my personal favorite is Visual Studio as it has extensive plugin support for multiple languages like Golang, PHP, Node.js, and more. So it's the default IDE, especially for polyglot developers.

Even though visual studio lacks few features compared to RubyMine like getting support for the latest Rails version updates, it covers the majority of the features required for development via community plugins.

If this article was useful, please share it with your network. Also, follow me on Twitter to know when I publish my next article.

If you ask a Xamarin developer what could be changed in Xamarin development, they would for sure mention one of the following:

• build time
• performance
• app start time
• previewers
• removing bin/obj from IDE
• lack of Image wizard in Visual Studio for Mac
• no XAML Intellisense,

and so on...and if I’m being honest, the answers above are right. But hey, we are the developers! If Microsoft won’t give us these features, let’s try to find workarounds or invent something on our own.

There are several libraries and IDE extensions that make our lives easier. For sure one of them is MFractor —a super powerful extension for Visual Studio for Mac.

So what is MFractor?

MFractor is an extension for Visual Studio for Mac. It was founded in 2015 in Australia. Being on the market for 3.5 years, it has gained people’s trust and love. “How did it do that?” — you might ask. It is because it extends Visual Studio for Mac with features that are missing on a daily basis.

• Do you want XAML Intellisense? Done. Just install MFractor.
• Do you want to remove bin/obj folders within your IDE? MFractor can do it. (By the way — in my opinion, it seems silly that we either need extensions for this or that we need to delete them from time to time. Something is definitely not working…)
• And here comes the bomb: Do you want to have an image wizard in Visual Studio for Mac, so you can manage the resources?

I knew you would want that! Have I already told you about MFractor? Och, I did!

Let’s make this clear: MFractor is a super powerful tool when you are developing apps with Visual Studio on your Mac.

You might not believe my words, so let’s check how it works in real life.

Installation

It’s very easy. In VS4Mac, simply open Extensions… under the Visual Studio menu, click Gallery and search for MFractor.

Voilà. One thing to notice: you will have install instead of Disable/ Uninstall… Simply install it and follow the steps required and a pop-up will open. After you’ve installed it, let’s move on to the interesting part.

Image manager

Let’s start with this totally awesome feature. It came out quite recently, so it is still pretty fresh.

Let’s assume that you want to manage image assets within your project, but you really hate doing it manually.

Check out what MFractor is capable of:

As you can see, you have a list of all icons included in the project with thumbnails. When you click on the item, you can see the image in a bigger size. Also, you may notice that there is a dropdown where you can select your project and check which icons are included in the project (SPYROtalks is the name of my project).

What can you do within the image manager?

Import New Image Asset

Adding the asset is really easy.

1. You simply select the image from your computer. MFractor should detect automatically what is the Image Density. If you don’t agree you can change it.
2. After you do it, you need to provide the Resource name. Fair enough, right?
3. Now, you need to decide to which projects you want to add the asset.

Basically, that’s all you must provide. If you want, you can resize an image or optimise it. While writing this article I decided to check how good is the image optimisation. In order to check it, I took 10 photos and optimised all of them. Here are the results:

Results of optimisation

As you can see in the table above, in general, the results were pretty good. An average of 54% makes it a good result. What is interesting, though, is the fact that one image was bigger after optimisation than the others. Why? I don’t know.

Delete image

In Image manager, you can also delete assets. What is great and time-saving is the fact that it will remove all asset densities at once. No need to delete it 6 (or even more) times. Truly a time saver.

Optimise all images

In case you forgot to optimise your asset when adding it, you can later optimise all images. Good to know.

If you want to learn more about image assets, go ahead and read Matthew’s article which is available on MFractor blog here.

XAML IntelliSense

If you are not that experienced in developing with Xamarin.Forms, you might find developing XAML UIs a nightmare. On the other hand, even if you are an experienced Xamarin.Forms developer, you might get pretty frustrated when using XAML.

First of all, because of the lack of a previewer (there is one, but let’s be honest: it does not work for complex views), you are creating UI’s almost blind. You have to use your imagination. Wouldn’t it be better if we had a built-in LiveXAML or something like that? Unfortunately, it doesn’t look like Microsoft is gonna provide us with something at the moment. A pity.

Secondly, because of the lack of XAML IntelliSense. It would be nice to have it, so when you created bindings to your ViewModel you could select the property from the dropdown instead of typing it on your own. Who has never made a typo in the name of the property, compiled the code and then wondered why the heck it was not working?

MFractor to the rescue!

Another great feature of MFractor is XAML IntelliSense. It can suggest to you the names of the properties in ViewModel, so you can bind to them. Also, it can suggest the names of the images you have in resources and many more. Don’t believe me? Go ahead and check these gifs:

Just to explain: in my project, I have three icons: _Icon.png, LauncherForeground.png, and _logospyrotalks.png. As you can see, MFractor is giving me an option to choose one. Nice!

Let’s move on to bindings. As you may suspect, MFractor is suggesting the properties in a similar way that it is suggesting the images.

As you can see in my ViewModel, I have 5 bindable properties. What I really like is the fact that with MFractor, is almost not possible to make a typo in the name of the property.

Generate ViewModel property

Are you are a person that prefers to write Views first? If yes, I have good news for you: with MFractor you can generate ViewModel properties from your View.

When creating the View you may find that you’ve forgotten to create one property or another. With MFractor you can create them without changing the file. Nice, huh?

Go to a usage of ViewModel property

From time to time you might want to check where the property is being used. Unfortunately, when you look for references in Visual Studio, it won’t find the ones you have in XAML. Of course, as you may assume, MFractor can find those references for you.

MVVM Wizard

This is something that wasn’t stated at the beginning of this blog as it was not released yet. According to the marketing announcement in version 3.7.3 the MVVM Wizard will be available.

According to the tweet by Matthew Robbins (the founder of MFractor) you will be able to create both View & ViewModels with (almost) one click.

What is nice about this feature is the fact that it gives you control over where you place the files and what are the base classes. It sounds promising, but I had some questions: will it support Xamarin.Native also? If we add XAML with BaseContentPage, will it work out of the box?

So I just installed version 3.7.3, and there is MVVM Manager. It looks like the one in the picture above. There are three ways to access it: from the MFractor menu, from Solution options, and with a Cmd + Shift +M shortcut. Right now, the manager works for Xamarin.Forms projects only.

If you want ViewModel to derive from BaseClass, you might need to write the class with a namespace before. Otherwise, you will need to import the class when the VM is created.

UPDATE 31.01

What you will read below is no longer valid (XAML issue). I have raised the issue above, and after 33h it was solved. Version 3.7.5 should have it fixed. As I have written in my tweet — this is how solving bugs should be done! End of update ;-)

The problem is with the XAML file. As I assumed, deriving from eg. BaseContentPage wouldn’t be that easy. When you want the View to derive from your BaseContentPage you need to feed the MVVM Manager with the following:

Is the code visible that we need? Not fully. It’s similar to the one that we want but not exactly the same. We need code like this:

It is not a big change, but we need to handle it on our own. I can fully understand that this is not an easy task to achieve. I believe it’s still better to slightly adjust the created files than to create them from scratch.

If you are interested, on the MFractor blog you can read more about MVVM Manager.

bin/obj

As I have stated at the beginning of this article, I am not sure what to think of bin/obj folders. Firstly, you have to delete them pretty often when developing a Xamarin app. I think it’s an issue.

Why do we have to do it? If it is a known issue (and based on my conversations with my colleagues, I believe it is), shouldn’t we be provided with an option to delete those folders within our IDE? Doing it manually takes so long. Sure, you can have a script to do it, but is it something we need to implement on our own?

Fortunately, MFractor has a feature that can delete those folders for you. How? Pretty simple. Check it out:

In here you have options: either delete Output folders (deletes bin/obj & NuGet packages) or you can only Clear Nuget Packages.

Conclusion

So what are the cons of using MFractor? Some might say that MFractor Professional price ($200 AUD per year) can be the issue. But hey! Is it that much for a lifetime license? I don’t think so. Especially when you take into consideration the number of hours being wasted because of, for example, a typo in your XAML or adding image assets.

Originally posted on my blog ?

Sass is a very popular CSS pre-processor. The intent of this tutorial is to show you how to compile Sass files within Visual Studio using Webpack. Our discussion will include minification and autoprefixing for production.

Visual Studio meets Sass

Sure, there are some plug-ins in the Visual Studio Marketplace, and it can be nice to just install a plug-in and forget about configuration. But what happens if the plug-in is not supported anymore and stops working with newer Visual Studio versions? Well, too bad. This is the case with one of the most popular compiler plug-ins on the market.

By configuring the compilation yourself, you will have total control over the output. Also, vendor prefixes will be added automatically to your CSS rules. How cool is that?

Prerequisites

You will need to have Node installed, and you can grab it here. That’s it really. You’ll also need npm, but it will also be installed with Node.

Creating the Project

Note: We will be creating a .NET Core MVC app, but the same principles apply to any ASP.NET MVC app. You would just need to modify the Webpack configuration a little bit to output the CSS file to the Content directory.

Open Visual Studio and create a new ASP.NET Core Web Application, then select Web Application (Model-View-Controller). I’m naming my project netcore-sass-webpack.

Creating the project

Create a Styles folder within the root of the project. Inside it, create a Sass file and name it site.scss. Open this new Sass file and copy the following:

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background: #D69655 url('../wwwroot/images/pattern.png') repeat;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

You will notice that this is the same CSS provided by Visual Studio when we created the project, with the exception of the background rule in the body tag. Now delete the provided CSS located under wwwroot/css (both files: site.css and site.min.css). Don’t worry, we will auto-generate these with Webpack.

Now, download pattern.png and place it under wwwroot/images.

Create an empty JavaScript file under the root of the application and name it webpack.config.js. We will take care of this later. You should end up with the following project structure:

Project Structure

Note: You don’t need to do the following two steps for every project, just once (unless you un-install and re-install Visual Studio).

You will need to provide Visual Studio with the Node installation path. Go back to your project and select Tools -> Options on the left pane Projects and Solutions -> Web Package Management and add the path to Node installation at the top of the list ( C:\Program Files\nodejs or C:\Program Files (x86)\nodejs, depending if you installed the x64 or x86 version).

Node path

Finally download NPM Task Runner and install it — but you will need to close Visual Studio first.

Webpack and NPM Dependencies

Open Command Prompt and navigate to the root of the project and install the needed dependencies:

cd netcore-sass-webpack\netcore-sass-webpack
npm init -y
npm i -D webpack webpack-cli node-sass postcss-loader postcss-preset-env sass-loader css-loader cssnano mini-css-extract-plugin cross-env file-loader

The first npm command initializes your package.json and the second installs your dependencies.

• webpack, webpack-cli — Module bundler
• node-sass — Bindings for Node to LibSass; provides support for Sass
• postcss-loader, postcss-preset-env — PostCSS loader for Webpack to process autoprefixing and minification
• sass-loader, css-loader — Webpack needs specific loaders to support Sass and CSS
• cssnano — CSS minifier
• mini-css-extract-plugin — Extracts the CSS to a separate file
• cross-env — Provides support to Windows users for environment variables. We will use NODE_ENVenvironment variable
• file-loader — Provides support for files (images) in our CSS rules

At this point you can re-open the project in Visual Studio. After the project finishes loading, open package.json and add the following scripts:

"scripts": {
    "dev": "webpack --watch",
    "build": "cross-env NODE_ENV=production webpack"
  },

• dev — We will bind this script whenever the project opens, and Webpack will continually watch for changes to the source Sass files, compile them, and output the separate CSS file
• build — We will bind this script before each project build and will produce the production CSS file, including minification and autoprefixing

Note: The NPM scripts will run automatically using the Task Runner window. More on that later.

It is time to work on our Webpack configuration. Open webpack.config.js and copy the following:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const postcssPresetEnv = require("postcss-preset-env");
// We are getting 'process.env.NODE_ENV' from the NPM scripts
// Remember the 'dev' script?
const devMode = process.env.NODE_ENV !== "production";
module.exports = {
  // Tells Webpack which built-in optimizations to use
  // If you leave this out, Webpack will default to 'production'
  mode: devMode ? "development" : "production",
// Webpack needs to know where to start the bundling process,
  // so we define the Sass file under './Styles' directory
  entry: ["./Styles/site.scss"],
// This is where we define the path where Webpack will place
  // a bundled JS file. Webpack needs to produce this file,
  // but for our purposes you can ignore it
  output: {
    path: path.resolve(__dirname, "wwwroot"),
// Specify the base path for all the styles within your
    // application. This is relative to the output path, so in
    // our case it will be './wwwroot/css'
    publicPath: "/css",
// The name of the output bundle. Path is also relative
    // to the output path, so './wwwroot/js'
    filename: "js/sass.js"
  },
  module: {
    // Array of rules that tells Webpack how the modules (output)
    // will be created
    rules: [
      {
        // Look for Sass files and process them according to the
        // rules specified in the different loaders
        test: /\.(sa|sc)ss$/,
// Use the following loaders from right-to-left, so it will
        // use sass-loader first and ending with MiniCssExtractPlugin
        use: [
          {
            // Extracts the CSS into a separate file and uses the
            // defined configurations in the 'plugins' section
            loader: MiniCssExtractPlugin.loader
          },
          {
            // Interprets CSS
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          {
            // Use PostCSS to minify and autoprefix with vendor rules
            // for older browser compatibility
            loader: "postcss-loader",
            options: {
              ident: "postcss",
// We instruct PostCSS to autoprefix and minimize our
              // CSS when in production mode, otherwise don't do
              // anything.
              plugins: devMode
                ? () => []
                : () => [
                    postcssPresetEnv({
                      // Compile our CSS code to support browsers
                      // that are used in more than 1% of the
                      // global market browser share. You can modify
                      // the target browsers according to your needs
                      // by using supported queries.
                      // https://github.com/browserslist/browserslist#queries
                      browsers: [">1%"]
                    }),
                    require("cssnano")()
                  ]
            }
          },
          {
            // Adds support for Sass files, if using Less, then
            // use the less-loader
            loader: "sass-loader"
          }
        ]
      },
      {
        // Adds support to load images in your CSS rules. It looks for
        // .png, .jpg, .jpeg and .gif
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              // The image will be named with the original name and
              // extension
              name: "[name].[ext]",
// Indicates where the images are stored and will use
              // this path when generating the CSS files.
              // Example, in site.scss I have
              // url('../wwwroot/images/pattern.png') and when generating
              // the CSS file, file-loader will output as
              // url(../images/pattern.png), which is relative
              // to '/css/site.css'
              publicPath: "../images",
// When this option is 'true', the loader will emit the
              // image to output.path
              emitFile: false
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // Configuration options for MiniCssExtractPlugin. Here I'm only
    // indicating what the CSS output file name should be and
    // the location
    new MiniCssExtractPlugin({
      filename: devMode ? "css/site.css" : "css/site.min.css"
    })
  ]
};

Refer to the comments in the code to understand the configuration. (More readable file here.)

Now we need to create some bindings in Task Runner Explorer. Navigate to View -> Other Windows -> Task Runner Explorer. The window will show at the bottom and you will see the scripts you created in package.json listed there under Custom. You will also see some tasks under Defaults, but you can just ignore them.

We need two bindings:

• Right click build -> Bindings -> Before Build — Visual Studio will run this task before each build. Remember this npm script runs Webpack for production and will optimize the CSS file.
• Right click dev -> Bindings -> Project Open — Visual Studio will run this task when you open the project. Remember this npm script runs Webpack in watch mode and will watch for any changes in your Sass files and output the processed CSS file.

Task Runner Explorer should look like this:

Task Runner Explorer

Note: For some reason, Visual Studio sometimes will fail to start the dev task upon opening the project. If that happens, just open the Task Explorer and run the task manually.

You can get the full code from the GitHub repository.

Final Thoughts

And that’s all there is too it. Since you already have Visual Studio open, none of the tasks are running. Go ahead and right click the dev task and select run. You will see the task loading and when it finishes you will see that a site.css file was created under wwwroot/css directory. Open site.scss, make a change and save it. Now open site.css, you will see your change reflected there. Cool!!

Run your project by pressing Ctrl + F5, you will see a site.min.css file created under wwwroot/css directory. This file was created when Task Runner ran the build script before it built the project.

The final site should look like this:

Final site

I know, I know, the background is very cheesey…but I needed an image to show the Webpack file-loader in action.

With this configuration, you can even add support to transpile modern JavaScript (ES6+) to ES5. Look into these: @babel/core, babel-loader, @babel/preset-env.

Thank you for reading, and I hope you enjoyed it. If you have any questions, suggestions, or corrections let me know in the comments below. Don’t forget to give this article a share, and you can follow me on Twitter, GitHub, Medium, LinkedIn.

You can also visit my personal blogging site.

Update 8/25/19: I have been building a prayer web app called "My Quiet Time - A Prayer Journal". If you would like to stay in the loop please sign up through the following link: http://b.link/mqt

The app will be released before the end of the year, I have big plans for this app. To see some mockup screenshots follow the following link: http://pc.cd/Lpy7

My DMs on Twitter are open if you have any questions regarding the app ?

Introduction

In this article, we are going to create a cascading dropdown list in Blazor using Entity Framework Core database first approach. We will create two dropdown lists — Country and City. Upon selecting the value from the country dropdown, we will change the value of the City dropdown.

We will be using Visual Studio 2017 and SQL Server 2014.

Let’s take a look at the final product.

Prerequisites

• Install .NET Core 2.1 Preview 2 SDK from here
• Install Visual Studio 2017 v15.7 or above from here
• Install ASP.NET Core Blazor Language Services extension from here
• SQL Server 2008 or above

Blazor framework is not supported by versions below Visual Studio 2017 v15.7.

Source Code

Before proceeding, I would recommend that you get the source code from GitHub.

Creating Tables

We will be using two tables to store our data.

1. Country: used to store the name of the Country. It contains two fields — CountryId and CountryName.
2. Cities: This contains the list of cities for the Countries we will insert in the Country table. It contains three fields — CityId, CountryId, and CityName. The CountryId column is a foreign key referring to CountryId in the Country table.

Execute the following commands to create both tables:

CREATE TABLE Country(CountryId VARCHAR(5) PRIMARY KEY,CountryName VARCHAR(20) NOT NULL)GOCREATE TABLE Cities(CityId VARCHAR(5) PRIMARY KEY,CountryId VARCHAR(5) FOREIGN KEY REFERENCES Country(CountryId),CityName VARCHAR(20) NOT NULL)GO

Now we will put some data in both of the tables. Open the Country table and execute the following insert statement.

INSERT INTO Country VALUES ('C1', 'India')INSERT INTO Country VALUES ('C2', 'China')INSERT INTO Country VALUES ('C3', 'USA')

Then execute the following insert statements to insert data into the Cities table.

INSERT INTO Cities VALUES ('P1','C1','New Delhi')INSERT INTO Cities VALUES ('P2','C1','Mumbai')INSERT INTO Cities VALUES ('P3','C1','Chennai')INSERT INTO Cities VALUES ('P4','C1','Hyderabad')INSERT INTO Cities VALUES ('P5','C1','Bengaluru')INSERT INTO Cities VALUES ('P6','C2','Beijing')INSERT INTO Cities VALUES ('P7','C2','Shanghai')INSERT INTO Cities VALUES ('P8','C2','Hong Kong')INSERT INTO Cities VALUES ('P9','C2','Macau')INSERT INTO Cities VALUES ('P10','C3','New York')INSERT INTO Cities VALUES ('P11','C3','Chicago')INSERT INTO Cities VALUES ('P12','C3','Las Vegas')

Create Blazor Web Application

Open Visual Studio and select File >> New >> Project.

After selecting the project, a “New Project” dialog will open. Select .NET Core inside the Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from the available project types. Name the project “BlazorDDL” and press OK.

After clicking on OK, a new dialog will open asking you to select the project template. You can see two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns. Then, select the “Blazor (ASP .NET Core hosted)” template and press OK.

Now, our Blazor solution will be created. You can see the folder structure in Solution Explorer as shown in the below image.

You can see that we have three project files created inside this solution.

1. BlazorDDL.Client: it has the client side code and contains the pages that will be rendered on the browser.
2. BlazorDDL.Server: it has the server side code, such as DB related operations and web API.
3. BlazorDDL.Shared: it contains the shared code that can be accessed by both client and server.

Scaffolding the Model to the Application

We are using Entity Framework core database first approach to create our models. We will create our model class in the “BlazorDDL.Shared” project so that it can be accessible to both the client and server project.

Navigate to Tools >> NuGet Package Manager >> Package Manager Console. Select “BlazorDDL.Shared” from the Default project dropdown. Refer to the image below:

First we will install the package for the database provider that we are targeting, which is SQL Server in this case. Run the following command:

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Since we are using Entity Framework Tools to create a model from the existing database, we will install the tools package as well. Run the following command:

Install-Package Microsoft.EntityFrameworkCore.Tools

After you have installed both packages, we will scaffold our model from the database tables using the following command:

Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Country, Cities

Do not forget to put your own connection string (inside “ ”). After this command gets executed successfully, you can see that a Models folder has been created and contains three class files: “myTestDBContext.cs”, _“_Cities.cs”, and “Country.cs”. And so we have successfully scaffolded our Models using EF core database first approach.

At this point in time, the Models folder will have the following structure.

Creating the Data Access Layer for the Application

Right click on “BlazorDDL.Server” project and then select Add >> New Folder and name the folder “DataAccess”. We will be adding our class to handle database-related operations inside this folder only.

Right click on the “DataAccess” folder and select Add >> Class. Name your class “DataAccessClass.cs”. This class will handle our database-related operations.

Open “DataAccessLayer.cs” and put the following code into it.

using BlazorDDL.Shared.Models;using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;namespace BlazorDDL.Server.DataAcces{    public class DataAccessLayer    {        myTestDBContext db = new myTestDBContext();        public IEnumerable<Country> GetAllCountries()        {            try            {                return db.Country.ToList();            }            catch            {                throw;            }        }        public IEnumerable<Cities> GetCityData(string id)        {            try            {                List<Cities> lstCity = new List<Cities>();                lstCity = (from CityName in db.Cities where CityName.CountryId == id select CityName).ToList();                return lstCity;            }            catch            {                throw;            }        }    }}

Here we have defined two methods:

1. GetAllCountries: it will fetch all the country data from the country table.
2. GetCityData: it will fetch the city data corresponding to the country id provided to it.

Now our data access layer is complete. We will proceed to create our web API Controller.

Adding the web API Controller to the Application

Right click on the “BlazorDDL.Server/Controllers” folder and select Add >> New Item. An “Add New Item” dialog box will open. Select “ASP.NET” from the left panel, then select “API Controller Class” from templates panel and name it “CountriesController.cs”. Press Add.

This will create our API “CountriesController” class.

We will call the methods of the “DataAccessLayer” class to fetch data and pass on the data to the client side.

Open the “CountriesController.cs” file and put the following code into it.

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using BlazorDDL.Server.DataAcces;using BlazorDDL.Shared.Models;using Microsoft.AspNetCore.Mvc;using Microsoft.AspNetCore.Http;namespace BlazorDDL.Server.Controllers{    public class CountriesController : Controller    {        DataAccessLayer objCountry= new DataAccessLayer();        [HttpGet]        [Route("api/Countries/GetCountryList")]        public IEnumerable<Country> GetCountryList()        {            return objCountry.GetAllCountries();        }        [HttpGet]        [Route("api/Countries/GetCities/{id}")]        public IEnumerable<Cities> GetCities(string id)        {            return objCountry.GetCityData(id);        }    }}

At this point in time, our BlazorDDL.Server project has the following structure.

We are done with our backend logic. Therefore, we will now proceed to code our client side.

Adding Razor View to the Application

Right click on the “BlazorDDL.Client/Page”s folder and then select Add >> New Item. An “Add New Item” dialog box will open. Select Web from the left panel, then select “Razor View” from the templates panel and name it “CountryData.c_s_html”.

This will add a “CountryData.cshtml” page to our “BlazorDDL.Client/Pages” folder.

Open the “CountryData.cshtml” page and put the following code into it.

@using BlazorDDL.Shared.Models@page "/country"@inject HttpClient Http<h1>Country Data</h1><p>This component demonstrates cascading dropdownlist using EntityFrameWork Core</p><hr />@if (countryList == null){    <p><em>Loading...</em></p>}else{    <div class="row">        <div class="col-md-4">            <label for="Country" class="control-label">Country</label>        </div>        <div class="col-md-4">            <label asp-for="Cities" class="control-label">Cities</label>        </div>    </div>    <div class="row" style="padding-top:10px">        <div class="col-md-4">            <select class="form-control" onchange="@CountryClicked">                <option value="">-- Select Country --</option>                @foreach (var country in countryList)                {                    <option value="@country.CountryId">@country.CountryName</option>                }            </select>        </div>        <div class="col-md-4">            <select class="form-control" onchange="@CityClicked">                <option value="">-- Select City --</option>                @if (cityList != null)                {                    @foreach (var city in cityList)                    {                        <option value="@city.CityName">@city.CityName</option>                    }                }            </select>        </div>    </div>    <div class="row" style="padding-top:50px">        <div class="col-md-4">            <label class="control-label">Country Name: @countryName</label>        </div>        <div class="col-md-4">            <label class="control-label">City Name: @cityName</label>        </div>    </div>}@functions {List<Country> countryList = new List<Country>();List<Cities> cityList = new List<Cities>();string countryId { get; set; }string countryName { get; set; }string cityName { get; set; }protected override async Task OnInitAsync(){    countryList = await Http.GetJsonAsync<List<Country>>("api/Countries/GetCountryList");}protected async void CountryClicked(UIChangeEventArgs countryEvent){    cityList.Clear();    cityName = string.Empty;    countryId = countryEvent.Value.ToString();    countryName = countryList.FirstOrDefault(s => s.CountryId == countryId).CountryName;    cityList = await Http.GetJsonAsync<List<Cities>>("api/Countries/GetCities/" + countryId);    this.StateHasChanged();}void CityClicked(UIChangeEventArgs cityEvent){    cityName = cityEvent.Value.ToString();    this.StateHasChanged();}}

Let’s understand this code.

At the top, we have included BlazorDDL.Shared.Models namespace so that we can use our Country and Cities model class on this page. We define the route of this page using the @page directive. So, in this application, if we append “/country” to the base URL, then we will be redirected to this page. We are also injecting HttpClient service to enable the web API call.

Then we have defined the HTML section to display two Dropdown lists on our web page. We are calling the “CountryClicked” method on the “onchange” event of the Country dropdown. This method will call the “GetCites” web API method to fetch the city data from the Cities table corresponding to the countryid of the selected country.

We are also setting the value of the “countryName” property to the selected country. The “StateHasChanged” method is invoked to refresh the UI. This will ensure that the City dropdown list will get refreshed on changing the country dropdown.

Similarly, we have another dropdown list to display cities data corresponding to each country. On the “onchange” event of the Cities dropdown, we are setting the value of the “cityName” property to the selected city.

We are also displaying the selected country name and city name value on the webpage.

The @functions section contains all our properties and methods. We have defined two variables: countryList of type Country, and cityList of type City. These handle the countries and cities data, respectively. We have also declared three properties to handle the countryId, countryName, and cityName data.

Inside the “OnInitAsync” method, we are calling the GetCountryList web API method to populate countryList. This variable is used to bind the data to the Country dropdown list on page load.

Adding the Link to the Navigation menu

The last step is to add the link to our “CountryData” page in the navigation menu. Open the “BlazorDDL.Client/Shared/NavMenu.cshtml” page and put the following code into it.

<div class="top-row pl-4 navbar navbar-dark">    <a class="navbar-brand" href="/">BlazorDDL</a>    <button class="navbar-toggler" onclick=@ToggleNavMenu>        <span class="navbar-toggler-icon"></span>    </button></div><div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>    <ul class="nav flex-column">        <li class="nav-item px-3">            <NavLink class="nav-link" href="/" Match=NavLinkMatch.All>                <span class="oi oi-home" aria-hidden="true"></span> Home            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="/counter">                <span class="oi oi-plus" aria-hidden="true"></span> Counter            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="/fetchdata">                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="/country">                <span class="oi oi-list-rich" aria-hidden="true"></span> Country            </NavLink>        </li>    </ul></div>@functions {bool collapseNavMenu = true;void ToggleNavMenu(){    collapseNavMenu = !collapseNavMenu;}}

Now we have completed our cascading dropdown list application.

Execution Demo

Launch the application.

A web page will open as shown in the image below. The navigation menu on the left shows the navigation link for the CountryData page.

Click on “country” in the navigation menu. It will redirect to the CountryData view where you can see two dropdown s— Country and Cities — on the page. Notice the URL has “/country ” appended to it as we have defined it using the @page directive.

Here you can see both the dropdown lists. The Country dropdown list is already populated with the country data. If we select any country name from this dropdown, then the city dropdown will also get populated with the corresponding city data. We can also see the selected country and city values in the labels below both drop down lists.

Hosting the application

To learn how to host a Blazor application using IIS , refer to Deploying a Blazor Application on IIS

Conclusion

We have learned how to create cascading dropdown lists in Blazor using Entity Framework Core database first approach with the help of Visual Studio 2017 and SQL Server 2014. Please get the source code from GitHub and play around to get a better understanding.

Get my book Blazor Quick Start Guide to learn more about Blazor.

You can check my other articles on Blazor here

You can also find this article at C# Corner.

See Also

• ASP.NET Core — Getting Started With Blazor
• ASP.NET Core — CRUD Using Blazor And Entity Framework Core
• ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
• ASP.NET Core — CRUD With React.js And Entity Framework Core
• ASP.NET Core — Using Highcharts With Angular 5

Originally published at https://ankitsharmablogs.com/

Microsoft has recently announced the release of a new .NET web framework called Blazor. In this article, we are going to create a web application using Blazor with the help of Entity Framework Core. We will be creating a sample Employee Record Management System and perform CRUD operations on it.

Prerequisites

• Install .NET Core 2.1 Preview 2 SDK from here
• Install a preview of Visual Studio 2017 v15.7 from here
• Install ASP.NET Core Blazor Language Services extension from here
• SQL Server 2012 or above

The Blazor framework is not supported by versions below Visual Studio 2017 v15.7.

Before proceeding further, I suggest you read my previous article on getting started with Blazor.

Source code

Also, I would recommend that you get the source code from Github before getting started.

Creating the table

We will be using a DB table to store all the records of the employees.

Open SQL Server and use the following script to create the tblEmployee table:

Create table tblEmployee(            EmployeeId int IDENTITY(1,1) NOT NULL,            Name varchar(20) NOT NULL,            City varchar(20) NOT NULL,            Department varchar(20) NOT NULL,            Gender varchar(6) NOT NULL        )

Now, let’s move on to create our web application.

Create the Blazor web application

Open Visual Studio and select File >> New >> Project.

After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel.

Then, select “ASP.NET Core Web Application” from the available project types. Put the name of the project as BlazorCrud and press OK.

After clicking OK, a new dialog will open asking you to select the project template. You will see two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns. Then, select “Blazor (ASP .NET Core hosted)” template and press OK.

Now, our Blazor solution will be created. You can observe the folder structure in Solution Explorer as shown in the below image.

You will see that we have 3 project files created inside this solution:

1. BlazorCrud.Client — It has the client side code and contains the pages that will be rendered on the browser.
2. BlazorCrud.Server — It has the server side code, such as DB related operations and the web API.
3. BlazorCrud.Shared — It contains the shared code that can be accessed by both client and server.

Execute the program. It will open the browser and you will see a page similar to the one shown below.

Here you can see a navigation menu on the left side, which contains the navigation to the pages in our application. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application, but for the sake of this tutorial, we will delete the fetchdata and counter pages from BlazorCrud.Client/Pages folder.

Adding the model to the application

Right click on BlazorCrud.Shared project and then select Add >> New Folder and name the folder Models. We will be adding our model class in this folder only.

Right click on the Models folder and select Add >> Class. Name your class Emplo_ye_e.cs. This class will contain our Employee model properties. Now our BlazorCrud.Shared project has the following structure:

Open Employee.cs and put the following code in it:

using System;  using System.Collections.Generic;  using System.ComponentModel.DataAnnotations;  using System.Text;    namespace BlazorCrud.Shared.Models  {      public class Employee      {          public int EmployeeId { get; set; }          [Required]          public string Name { get; set; }          [Required]          public string Gender { get; set; }          [Required]          public string Department { get; set; }          [Required]          public string City { get; set; }      }  }

And so our model has been created. Now we will create our data access layer.

Creating the data access layer for the application

Right click on BlazorCrud.Server project and then select Add >> New Folder and name the folder DataAccess. We will be adding our classes to handle database-related operations inside this folder only.

Right click on the DataAccess folder and select Add >> Class. Name your class EmployeeCont_ex_t.cs. This is our Entity Framework DB context class that allows us to interact with the database. Open EmployeeCont_e_xt.cs and put the following code into it:

using BlazorCrud.Shared.Models;  using Microsoft.EntityFrameworkCore;  using System;  using System.Collections.Generic;  using System.Linq;  using System.Threading.Tasks;    namespace BlazorCrud.Server.DataAccess  {      public class EmployeeContext : DbContext      {          public virtual DbSet<Employee> tblEmployee { get; set; }            protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)          {              if (!optionsBuilder.IsConfigured)              {                  optionsBuilder.UseSqlServer(@"Put Your Connection string here");              }          }      }  }

Do not forget to put in your own connection string.

Add one more class to DataAccess folder and name it EmployeeDataAccessLayer.cs. This class will handle our CRUD related DB operations. Open EmployeeDataAccessLayer.cs and put the following code into it:

using BlazorCrud.Shared.Models;  using Microsoft.EntityFrameworkCore;  using System;  using System.Collections.Generic;  using System.Linq;  using System.Threading.Tasks;    namespace BlazorCrud.Server.DataAccess  {      public class EmployeeDataAccessLayer      {          EmployeeContext db = new EmployeeContext();            //To Get all employees details           public IEnumerable<Employee> GetAllEmployees()          {              try              {                  return db.tblEmployee.ToList();              }              catch              {                  throw;              }          }            //To Add new employee record             public void AddEmployee(Employee employee)          {              try              {                  db.tblEmployee.Add(employee);                  db.SaveChanges();              }              catch              {                  throw;              }          }            //To Update the records of a particluar employee            public void UpdateEmployee(Employee employee)          {              try              {                  db.Entry(employee).State = EntityState.Modified;                  db.SaveChanges();              }              catch              {                  throw;              }          }            //Get the details of a particular employee            public Employee GetEmployeeData(int id)          {              try              {                  Employee employee = db.tblEmployee.Find(id);                  return employee;              }              catch              {                  throw;              }          }            //To Delete the record of a particular employee            public void DeleteEmployee(int id)          {              try              {                  Employee emp = db.tblEmployee.Find(id);                  db.tblEmployee.Remove(emp);                  db.SaveChanges();              }              catch              {                  throw;              }          }      }  }

Now our data access layer is complete. Next, we will proceed to create our web API Controller.

Adding the web API controller to the application

Right click on BlazorCrud.Server/Controllers folder and select Add >> New Item. An “Add New Item” dialog box will open. Select ASP.NET from the left panel, then select “API Controller Class” from the templates panel and name it EmployeeController.cs. Press OK.

This will create our API EmployeeController class.

We will call the methods of the EmployeeDataAccessLayer class to fetch data and pass on the data to the client side.

Open the EmployeeController.cs file and put the following code into it:

using System;  using System.Collections.Generic;  using System.Linq;  using System.Threading.Tasks;  using BlazorCrud.Server.DataAccess;  using BlazorCrud.Shared.Models;  using Microsoft.AspNetCore.Mvc;    namespace BlazorCrud.Server.Controllers  {      public class EmployeeController : Controller      {          EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();            [HttpGet]          [Route("api/Employee/Index")]          public IEnumerable<Employee> Index()          {              return objemployee.GetAllEmployees();          }            [HttpPost]          [Route("api/Employee/Create")]          public void Create([FromBody] Employee employee)          {              if (ModelState.IsValid)                  objemployee.AddEmployee(employee);          }            [HttpGet]          [Route("api/Employee/Details/{id}")]          public Employee Details(int id)          {                return objemployee.GetEmployeeData(id);          }            [HttpPut]          [Route("api/Employee/Edit")]          public void Edit([FromBody]Employee employee)          {              if (ModelState.IsValid)                  objemployee.UpdateEmployee(employee);          }            [HttpDelete]          [Route("api/Employee/Delete/{id}")]          public void Delete(int id)          {              objemployee.DeleteEmployee(id);          }      }  }

At this point, our BlazorCrud.Server project has the following structure:

We are done with our backend logic. So we will now proceed to code our client side.

Adding Razor View to the application

Right click on the BlazorCrud.Client/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select Web from the left panel, then select “Razor View” from the templates panel and name it FetchEmployee._c_shtml.

This will add a FetchEmployee.cshtml page to our BlazorCrud.Client/Pages folder. Similarly, add 3 more pages: AddEmployee.cshtml, EditEmployee.cshtml, and DeleteEmployee.cshtml.

Now our BlazorCrud.Client project has the following structure:

Let’s add code to these pages.

FetchEmployee.cshtml

This page will display all the employee records present in the database. Additionally, we will also provide the action methods Edit and Delete on each record.

Open FetchEmployee.cshtml and put the following code in it:

@using BlazorCrud.Shared.Models@page "/fetchemployee"@inject HttpClient Http<h1>Employee Data</h1><p>This component demonstrates fetching Employee data from the server.</p><p>    <a href="/addemployee">Create New</a></p>@if (empList == null){    <p><em>Loading...</em></p>}else{    <table class='table'>        <thead>            <tr>                <th>ID</th>                <th>Name</th>                <th>Gender</th>                <th>Department</th>                <th>City</th>            </tr>        </thead>        <tbody>            @foreach (var emp in empList)            {                <tr>                    <td>@emp.EmployeeId</td>                    <td>@emp.Name</td>                    <td>@emp.Gender</td>                    <td>@emp.Department</td>                    <td>@emp.City</td>                    <td>                        <a href='/editemployee/@emp.EmployeeId'>Edit</a>  |                        <a href='/delete/@emp.EmployeeId'>Delete</a>                    </td>                </tr>            }        </tbody>    </table>}@functions {Employee[] empList;protected override async Task OnInitAsync(){    empList = await Http.GetJsonAsync<Employee[]>    ("/api/Employee/Index");}}

Let’s understand this code. At the top, we have included the BlazorEFApp.Shared.Models namespace so that we can use our Employee model class in this page.

We are defining the route of this page using the @page directive. So, in this application, if we append “/fetchemployee” to the base URL, we will be redirected to this page. We are also injecting HttpClient service to enable the web API call.

Then we have defined the HTML part to display all the employees records in a tabular manner. We have also added two action links for Edit and Delete which will navigate to the EditEmployee.cshtml and DeleteEmployee.cshtml pages, respectively.

At the bottom of the page, we have a @functions section which contains our business logic. We have created an array variable empList of type Employee, and we and populate it inside OnInitAsync method by calling our web API. This will bind to our HTML table on the page load.

AddEmployee.cshtml

This page is used to create a new employee record.

Open AddEmployee.cshtml and put the following code into it:

@using BlazorCrud.Shared.Models@page "/addemployee"@inject HttpClient Http@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper<h1>Create</h1><h3>Employee</h3><hr /><div class="row">    <div class="col-md-4">        <form>            <div class="form-group">                <label for="Name" class="control-label">Name</label>                <input for="Name" class="form-control" bind="@emp.Name" />            </div>            <div class="form-group">                <label asp-for="Gender" class="control-label">Gender</label>                <select asp-for="Gender" class="form-control" bind="@emp.Gender">                    <option value="">-- Select Gender --</option>                    <option value="Male">Male</option>                    <option value="Female">Female</option>                </select>            </div>            <div class="form-group">                <label asp-for="Department" class="control-label">Department</label>                <input asp-for="Department" class="form-control" bind="@emp.Department" />            </div>            <div class="form-group">                <label asp-for="City" class="control-label">City</label>                <input asp-for="City" class="form-control" bind="@emp.City" />            </div>            <div class="form-group">                <button type="submit" class="btn btn-default" onclick="@(async () => await CreateEmployee())">Save</button>                <button class="btn" onclick="@cancel">Cancel</button>            </div>        </form>    </div></div>@functions {Employee emp = new Employee();protected async Task CreateEmployee(){    await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/Create", emp);    UriHelper.NavigateTo("/fetchemployee");}void cancel(){    UriHelper.NavigateTo("/fetchemployee");}}

In this page the route is “/addemployee”.

We are also injecting the “Microsoft.AspNetCore.Blazor.Services.IUriHelper” service to enable URL redirection. The HTML part will generate a form to get input from the user. The attribute “bind” is used to bind the value entered in the textbox to the properties of the Employee object.

In the @functions section, we have defined two methods. The method CreateEmployee will be invoked on clicking the “Submit” button and will send a POST request to our API along with the Employee object emp.

The Cancel method will be invoked on clicking the cancel button and will redirect the user back to the FetchEmployee page.

EditEmployee.cshtml

This page is used to edit the details of an employee.

Open EditEmployee.cshtml and put the following code into it:

@using BlazorCrud.Shared.Models@page "/editemployee/{empID}"@inject HttpClient Http@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper<h2>Edit</h2><h4>Employees</h4><hr /><div class="row">    <div class="col-md-4">        <form>            <div class="form-group">                <label for="Name" class="control-label">Name</label>                <input for="Name" class="form-control" bind="@emp.Name" />            </div>            <div class="form-group">                <label asp-for="Gender" class="control-label">Gender</label>                <select asp-for="Gender" class="form-control" bind="@emp.Gender">                    <option value="">-- Select Gender --</option>                    <option value="Male">Male</option>                    <option value="Female">Female</option>                </select>            </div>            <div class="form-group">                <label asp-for="Department" class="control-label">Department</label>                <input asp-for="Department" class="form-control" bind="@emp.Department" />            </div>            <div class=" form-group">                <label asp-for="City" class="control-label">City</label>                <input asp-for="City" class="form-control" bind="@emp.City" />            </div>            <div class="form-group">                <input type="submit" value="Save" onclick="@(async () => await UpdateEmployee())" class="btn btn-default" />                <input type="submit" value="Cancel" onclick="@cancel" class="btn" />            </div>        </form>    </div></div>@functions {[Parameter]string empID { get; set; }Employee emp = new Employee();protected override async Task OnInitAsync(){    emp = await Http.GetJsonAsync<Employee>("/api/Employee/Details/" + Convert.ToInt32(empID));}protected async Task UpdateEmployee(){    await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/Edit", emp);    UriHelper.NavigateTo("/fetchemployee");}void cancel(){    UriHelper.NavigateTo("/fetchemployee");}}

In this page we have defined the route as “/editemployee/{empID}”. empID is an URL parameter of type string declared in the @functions section. We will use the [Parameter] attribute to mark the variable as a parameter. To navigate to this page, we need to pass the employee id in the URL which will be captured in the empID variable.

If we do not mark the variable with the [Parameter] attribute, we will get the following error: “Object of type ‘BlazorCrud.Client.Pages.EditEmployee’ has a property matching the name ’empID’, but it does not have [ParameterAttribute] applied.” This will not allow empID to bind to the employee id value passed in the parameter.

The HTML part is similar to that of the AddEmployee.cshtml page. The attribute “bind” is used for two-way binding, that is binding the textbox values to employee object properties, and vice versa.

Inside the @functions section, we are fetching the employee records in the OnInitAsync method based on the employeeID passed in the parameter. This will bind to the fields in the form on page load itself.

The UpdateEmployee method will send a PUT request to our API along with the Employee object emp. The Cancel method will be invoked on clicking the cancel button and will redirect the user back to the FetchEmployee page.

DeleteEmployee.cshtml

This page will be used to delete an employee record.

Open DeleteEmployee.cshtml and put the following code into it:

@using BlazorCrud.Shared.Models@page "/delete/{empID}"@inject HttpClient Http@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper<h2>Delete</h2><h3>Are you sure you want to delete employee with id : @empID</h3><br /><div class="col-md-4">    <table class="table">        <tr>            <td>Name</td>            <td>@emp.Name</td>        </tr>        <tr>            <td>Gender</td>            <td>@emp.Gender</td>        </tr>        <tr>            <td>Department</td>            <td>@emp.Department</td>        </tr>        <tr>            <td>City</td>            <td>@emp.City</td>        </tr>    </table>    <div class="form-group">        <input type="submit" value="Delete" onclick="@(async () => await Delete())" class="btn btn-default" />        <input type="submit" value="Cancel" onclick="@cancel" class="btn" />    </div></div>@functions {[Parameter]string empID { get; set; }Employee emp = new Employee();protected override async Task OnInitAsync(){    emp = await Http.GetJsonAsync<Employee>    ("/api/Employee/Details/" + Convert.ToInt32(empID));}protected async Task Delete(){    await Http.DeleteAsync("api/Employee/Delete/" + Convert.ToInt32(empID));    UriHelper.NavigateTo("/fetchemployee");}void cancel(){    UriHelper.NavigateTo("/fetchemployee");}}

The route for this page is also parameterized, since we are fetching the record of the employee on page load.

The HTML part will display the employee data and ask the user for confirmation to delete the employee record.

Inside the @functions section, we are fetching the employee records inthe OnInitAsync method based on the employeeID passed in the parameter. This will display the employee records as the page loads.

The Delete method will be invoked on clicking the “Delete” button, which will send a delete request to our API along with the employee ID of the employee to be deleted. On successful deletion, the user will be navigated back to the FetchEmployee page.

Adding a link to the Navigation menu

The last step is to define the navigation menu for our application. Open the BlazorCrud.Client/Shared/ NavMenu.cshtml file and put the following code in it:

<div class="top-row pl-4 navbar navbar-dark">    <a class="navbar-brand" href="/">BlazorCrud</a>    <button class="navbar-toggler" onclick=@ToggleNavMenu>        <span class="navbar-toggler-icon"></span>    </button></div><div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>    <ul class="nav flex-column">        <li class="nav-item px-3">            <NavLink class="nav-link" href="/" Match=NavLinkMatch.All>                <span class="oi oi-home" aria-hidden="true"></span> Home            </NavLink>        </li>        <li class="nav-item px-3">            <NavLink class="nav-link" href="/fetchemployee">                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch employee            </NavLink>        </li>    </ul></div>@functions {bool collapseNavMenu = true;void ToggleNavMenu(){    collapseNavMenu = !collapseNavMenu;}}

And that’s it. We have created our first ASP.NET Core application using Blazor and Entity Framework Core.

Execution demo

Launch the application.

A web page will open as shown in the image below. The navigation menu on the left will show the navigation link for the Home and Fetch Employee pages.

Click on Fetch employee in the navigation menu. It will redirect to the FetchEmployee view and will display all the employee data on the page. Notice that the URL has “/fetchemployee” appended to it, as we have defined it using the @page directive.

Since we have not added any data, it is empty.

Click on CreateNew to navigate to AddEmployee view. Notice the URL has “/addemployee” appended to it, as we have defined it using the @page directive. Add a new Employee record as shown in the image below:

After inserting data in all the fields, click on the “Save” button. The new employee record will be created, and you will be redirected to the FetchEmployee view, which will display records of all the employees. Here, we can also see the action methods Edit and Delete corresponding to each record.

If we want to edit an existing employee record, we just click on the Edit action link. It will open the Edit view as shown below. Here we can change the employee data. Notice that we have passed the employee id in the URL parameter.

Here we have changed the City of employee Swati from New Delhi to Chennai. Click on “Save” to return to the FetchEmployee view to see the updated changes as highlighted in the image below:

Now, we will perform the Delete operation on the employee named Rahul. Click on the Delete action link which will open the Delete view asking for a confirmation to delete. Notice that we have passed the employee id in the URL parameter.

Once we click on the Delete button, it will delete the employee record and we will be redirected to the FetchEmployee view. Here, we can see that the employee with name Rahul has been removed from our record.

Hosting the application

To learn how to host a Blazor application using IIS, refer to Deploying a Blazor Application on IIS.

See Also

• ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
• CRUD Operations With ASP.NET Core Using Angular 5 and ADO.NET
• Getting Started With Angular 5 Using Visual Studio Code
• CRUD Operation With ASP.NET Core MVC Using Visual Studio Code and EF
• CRUD Operation With ASP.NET Core MVC Using ADO.NET and Visual Studio 2017
• CRUD Operation With ASP.NET Core MVC using Visual Studio Code and ADO.NET

Conclusion

We have created an ASP.NET Core application using the new web framework Blazor and Entity Framework Core with the help of Visual Studio 2017 and SQL Server 2012. We have also performed CRUD operations on our application.

You can also fork this application on Github. Try this new framework and let me know what you think of it in the comments section below.

Get my book Blazor Quick Start Guide to learn more about Blazor.

You can also find this article at C# Corner.

You can check my other articles on ASP .NET Core here

Originally published at https://ankitsharmablogs.com/

Here is a list of some extensions I come to enjoy with Visual Studio Code (VSCode). Since I work a lot in the front-end, most of these extensions will be useful for web developers. I have been working previously with Atom, Visual Studio and Webstorm but VSCode suits me best and is just incredible. The developer did a great job ( and still do! ). Try it for yourself and enjoy!

_“To enjoy life, you don’t need fancy nonsense, but you do need to control your time and realize that most things just aren’t as serious as you make them out to be.” ― Timothy Ferriss_

HTML Extensions

Auto Close Tag

Automatically add an HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

See more

Auto Rename Tag

Automatically rename a paired HTML/XML tag, same as Visual Studio IDE does.

See more

HTML Snippets

This extension adds rich language support for the HTML Markup to VS Code, including: Full HTML5 Tags, Colorization and Snippets.

See more

Markdown Extensions

Auto-Open Markdown Preview

This VS Code extension automatically shows Markdown preview whenever you open new Markdown file. If you feel annoying to type “Ctrl+K V” or “⌘+K V” (preview side-by-side) many times, this extension helps you.
See more

Markdown TOC

Generate TOC (table of contents) of headlines from a parsed markdown file.
See more

Markdown Theme Kit

A set of themes based on SublimeText-Markdown/MarkdownEditing.
See more

Code Spell Checker

A basic spell checker that works well with camelCase code.
See more

JavaScript Extensions

Babel ES6/ES7

Adds JavaScirpt Babel es6/es7 syntax coloring.
See more

Debugger for Chrome

Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

See more

ESLint

Integrates ESLint into VS Code.
See more

JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).
See more

Code Spell Checker

A basic spell checker that works well with camelCase code.
See more

Node.js Modules Intellisense

Visual Studio Code plugin that autocompletes JavaScript / TypeScript modules in import statements.

See more

React-Native/React/Redux snippets for ES6/ES7

See more

TSLint

Integrates the tslint linter for the TypeScript language into VS Code.
See more

vscode-styled-components

Syntax highlighting for styled-components.
See more

GraphQL for VSCode

GraphQL syntax highlighting, linting, auto-complete, and more!
See more

yarn

yarn commands for VSCode.
See more

General Extensions

Color Highlight

vscode-ext-color-highlight. This extension styles css/web colors found in your document.
See more

Custom CSS and JS Loader

Custom CSS to your VS Code. Based on Roberto Huertasm’s vscode-icons.

See more

EditorConfig for VS Code

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles.
See more

File Templates

Visual Studio code extenstion that allows to quickly create new files based on defined templates.
See more

Git History (git log)

View git log along with the graph and details. View the history of a file (Git log) or the history of a line in a file (Git Blame). View a previous copy of the file. Compare a previous version with the version in the workspace or another. View commit log details for a selected commit. Compare commits.

See more

Guides

A Visual Studio Code extension for more guide lines.

See more

Material Icon Theme

The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.
See more

Rainbow Brackets

Provide rainbow colors for the round brackets, the square brackets and the squiggly brackets.
See more

Prettier

VS Code package to format your JavaScript / TypeScript / CSS using Prettier.
See more

Project Manager

Manage your projects right inside Visual Studio Code. Easily access and switch between them.
See more

Theme — Seti-Monokai

Seti Monokai color scheme.
See more

WakaTime

Metrics, insights, and time tracking automatically generated from your programming activity.
See more

Settings Sync

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
See more

Thanks for reading my article! Feel free to leave any feedback!

Daniel is a LL.M. student in business law, working as a software engineer and organizer of tech related events in Vienna. His current personal learning efforts focus on machine learning.

Connect on:

• LinkedIn
• Github
• Medium
• Twitter
• Steemit
• Hashnode