asp.net-core-mvc

Setup and install .Net Core MVC with Visual studio code and quick start .net core mvc hello world.

Introduction#

This article give idea’s about setup and installing Asp.Net core with visual studio code. Also create basic MVC template and debugging.

Steps involved below…

Step 1 - installing Visual studio code.

Step 2 - Configuring .Net core and C#.

Step 3 - Create Basic MVC Template.

Step 4 - Execute and Debug the application.

Remarks#

This article is about to setup from scratch with visual studio code open source and create and debug basic .net core mvc applications.

  • File location used above is change as per users, No constraint.
  • Need internet for downloading setups.

Step 1 - Visual studio code installation


  • Download visual studio code from here Visual studio code. Select your target installer[mac|windows|linux].

enter image description here


  • Go to downloaded file in your local.

enter image description here

  • Below steps in volved for installing

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Installation finished successfully.

Step 2 - Configuring .Net core and C#.

After installing Visual studio code configure .net core and C#.

enter image description here

  1. Launch Visual studio code.
  2. Press [ctrl + P]
  3. paste ”ext install csharp” this and hit.

Once done above steps , C# extension available in VS Code.

enter image description here

  • Now configure .net core.

Download .net core sdk from here. Choose Windows=>CommandLine.

enter image description here

Install the sdk like below.

enter image description here

enter image description here

enter image description here

.Net core sdk installation done successfully.

Step 3 - Create Basic MVC Template.


  • Create your new project folder and open in windows-command prompt with the location of project folder.

enter image description here

  • Type ”dotnet new -t web” and hit. This is for creating new mvc template.

enter image description here

  • Once complete. GO to the project location and see basic mvc project has been created.

enter image description here

  • Then type ”dotnet restore” and hit. This is for to restoring all packages from project.json file.

enter image description here

enter image description here

  • Now launch VScode and open the project folder.

enter image description here

enter image description here

Now you can finally see the mvc project in VS code.

All the basic mvc structure files you can see.[Model-View-Controller]

Step 4 - Execute and Debug the application.

Open the project folder in VScode.

Sample here i am setting break point in home controller.

enter image description here

Now click the debug option.

enter image description here

add debug configuration like below. Make sure .Net core Launch(web) is selected.

enter image description here

enter image description here

You can see break point will hit , once you start debugging by press run icon.

Then give continue. Web page will shown in browser like below. enter image description here

Web page is seems broken.

Press ”F12” or open developer tool.

You can see some errors in console.

enter image description here

Few bootstrap and jquery files were not loaded.

[Find a script and css files by Ctrl+shift+f in VS code and enter missed file name and search.]

Fix this by adding scripts with cdn or exact file location in layout file.

enter image description here

Now refresh the page and watch.

enter image description here

Now site seems fine and no more console error finally.

Happy coding.

This modified text is an extract of the original Stack Overflow Documentation created by the contributors and released under CC BY-SA 3.0 This website is not affiliated with Stack Overflow