All About ASP.NET and ASP.NET Core 2 Hosting BLOG

Tutorial and Articles about ASP.NET and the latest ASP.NET Core

ASP.NET Core 2 Hosting - How to Use Bootstrap 4 in ASP.NET Core

clock July 31, 2018 08:47 by author Kenny

 So although you can still use it right now, Bootstrap has also announced to drop support for it. As a result, the built-in ASP.NET Core templates are slowly being edited to move away from it too.

Unfortunately, there is no clear path forward. This is mostly due to the fact that web applications are continuously moving further into the client-side, requiring complex client-side build systems and many dependencies. So if you are building something like that, you might already know how to solve this then, and you can expand your existing build process to simply also include Bootstrap and jQuery there.

But there are still many web applications out there that are not that heavy on the client-side, where the application still runs mainly on the server and the server serves static views as a result. Bower previously filled this by making it easy to just publish client-side dependencies without that much of a process.

In the .NET world we also have NuGet and with previous ASP.NET versions, we could use NuGet as well to add dependencies to some client-side dependencies since NuGet would just place the content into our project correctly. Unfortunately, with the new .csproj format and the new NuGet, installed packages are located outside of our project, so we cannot simply reference those.

This leaves us with a few options how to add our dependencies:

One-time installation

This is what the ASP.NET Core templates, that are not single-page applications, are currently doing. When you use those to create a new application, the wwwroot folder simply contains a folder lib that contains the dependencies:

If you look closely at the files currently, you can see that they were originally placed there with Bower to create the template, but that is likely to change soon. The basic idea is that the files are copied once to the wwwroot folder so you can depend on them.

To do this, we can simply follow Bootstrap’s introduction and download the compiled files directly. As mentioned on the download site, this does not include jQuery, so we need to download that separately too; it does contain Popper.js though if we choose to use the bootstrap.bundle file later—which we will do. For jQuery, we can simply get a single "compressed, production" file from the download site.

This leaves us with a few files which will simply extract and copy into the wwwroot folder. We can also make a lib folder to make it clearer that these are external dependencies:

That’s all we need, so now we just need to adjust our _Layout.cshtml file to include those dependencies. For that, we add the following block to the <head>:

<environment include="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>

And the following block at the very end of the <body>:

<environment include="Development">
<script src="~/lib/js/jquery-3.3.1.js"></script>
<script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/js/jquery-3.3.1.min.js"></script>
<script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>

You can also just include the minified versions and skip the <environment> tag helpers here to make it a bit simpler. But that’s all you need to do to keep you starting.

Dependencies from NPM

The more modern way, also if you want to keep your dependencies updated, would be to get the dependencies from the NPM package repository. You can use either NPM or Yarn for this; in my example, I’ll use NPM.

To start off, we need to create a package.json file for our project, so we can specify our dependencies. To do this, we simply do that from the "Add New Item" dialog:

Once we have that, we need to edit it to include our dependencies. It should something look like this:

{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}

By saving, Visual Studio will already run NPM to install the dependencies for us. They will be installed into the node_modules folder. So what is left to do is to get the files from there into our wwwroot folder. There are a few options to do that:

bundleconfig.json for bundling and minification

We can use one of the various ways to consume a bundleconfig.json for bundling and minification, as explained in the documentation. A very easy way is to simply use the BuildBundlerMinifier NuGet package which automatically sets up a build task for this.

After installing that package, we need to create a bundleconfig.json at the root of the project with the following contents:

[
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"minify": { "enabled": false }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"minify": { "enabled": false }
}
]

This basically configures which files to combine into what. And when we build, we can see that the vendor.min.css and vendor.js.css are created correctly. So all we need to do is to adjust our _Layouts.html again to include those files:

<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>

Using a task manager like Gulp

If we want to move a bit more into client-side development, we can also start to use tools that we would use there. For example Webpack which is a very commonly used build tool for really everything. But we can also start with a simpler task manager like Gulp and do the few necessary steps ourselves.

For that, we add a gulpfile.js into our project root, with the following contents:

const gulp = require('gulp');
const concat = require('gulp-concat');
const vendorStyles = [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
];
gulp.task('default', ['build-vendor']);
gulp.task('build-vendor', ['build-vendor-css', 'build-vendor-js']);
gulp.task('build-vendor-css', () => {
return gulp.src(vendorStyles)
.pipe(concat('vendor.min.css'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor-js', () => {
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest('wwwroot'));
});

Now, we also need to adjust our package.json to have dependencies on gulp and gulp-concat:

{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}

Finally, we edit our .csproj to add the following task which makes sure that our Gulp task runs when we build the project:

<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>

Now, when we build, the default Gulp task runs, which runs the build-vendor tasks, which then builds our vendor.min.css and vendor.min.js just like we did before. So after adjusting our _Layout.cshtml just like above, we can make use of jQuery and Bootstrap.

While the initial setup of Gulp is a bit more complicated than the bundleconfig.json one above, we have now have entered the Node-world and can start to make use of all the other cool tools there. So it might be worth to start with this.

Best ASP.NET Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET Core 2 Hosting - The Differences Between ASP.NET MVC and ASP.NET WebForms

clock July 27, 2018 07:28 by author Kenny

Terminology

Before we proceed to talk about the differences between WebForms and MVC, we need to know the difference between certain terms on the Microsoft stack of technologies. In the past, I've heard a couple of developers mixing and matching certain terms that weren't related to each other at all.

.NET Framework - A technology introduced in 2002 which includes the ability to create executables, web applications, and services using C# (pronounced see-sharp), Visual Basic, and F# (wikipedia)

ASP.NET - An open source, server-side web application framework which is a subset of the .NET Framework that focuses specifically on building web application, web sites, and web services.

ASP.NET Web Forms - (2002 - current) A proprietary technique developed by Microsoft to manage state and form data across multiple pages. The innate ability of the web are state-less pages where Microsoft created stateful pages by creating the Web Forms technique.

ASP.NET MVC - (2008 - current) An open source web application framework that implements a Model-View-Controller design pattern.
With that cleared up, let's go over the differences between ASP.NET Web Forms and MVC.

Differences Between ASP.NET Web Forms and ASP.NET MVC

Even though these technologies have been around for 5+ years, they each have their advantages and disadvantages.

Web Forms has ViewState, MVC does not

This has become the bane of my existence. As I mentioned above, ViewState is a page-level state management mechanism. If you have a number of server-side web controls on a page, your ViewState will become extremely large.

Let me tell you a story of how ViewState can be so...unnatural.

I worked at one company where I wasn't getting any data back from a submitted form. After talking to the security specialists and the networking team, I found out that my requests were being blocked by the company firewall.

The reason? The firewall was blocking the request because there was a form trying to perform a 2MB+ postback and the firewall thought it was blocking an attack from a hacker.

Another reason is that your HTML SHOULD be small to send back to the client, not bloated with a huge 1MB+ ViewState variable. Let's see that pass the mobile-friendly test. :-)

MVC does not have a ViewState. It uses model/ViewModels to pass back and forth between the Views.

Web Forms has a Code-Behind Model where MVC just has models

Code-Behind is a way to attach C# or VB code to a web page and act on their specific actions when they occur on the page. When you compile a Web Form that contains code-behind, it becomes part of the assembly (or DLL) to make the site functional.

With MVC, you pass in data that was already processed and is being delivered to the View which should have no logic or processing included in it as well.

Web Forms has Web Controls where MVC does not

There are a lot of developers who were complaining that MVC didn't have any server-side controls. This is because they became spoiled with the Web Forms way of doing things on a page. Controls were already available to them and they used them. Eventually, they started building their own custom server controls.

While Web Forms had a large number of server-controls, MVC kept the lean-and-mean approach to granular HTML. After the dust settled, developers started to understand the direction with MVC and leveraged JavaScript where they could build their own custom controls or even use a third-party library like Bootstrap for their UI.

Web Forms has State-aware components where MVC uses more of a template approach

This is why it's hard to convert a Web Forms application over to an MVC application.

In Web Forms, developers place controls on a web page and are able to manipulate those controls on the server in the code-behind. The server-side controls are even aware of their state when ViewState is turned on.

With MVC, you aren't working with controls, you are passing data to be used in a dumb View. The Razor syntax in a View is extremely powerful. If you want an objects property dropped into the HTML HEAD tag, you place a @model.Title right in the header and you're done.

Where Web Forms doesn't have the separation of concerns, MVC is adamant about it!

I can't tell you how many times I've seen developers create a Web Form, attach code to a control, and then place the business logic inside the code-behind instead of being handled or processed by a business object. How is that business logic going to be used in another application when it's attached to a UI control?

MVC's philosophy with business logic is "Thin Controllers, Fat Models" (Hence, my article about the skinniest controller) meaning that the models will contain all of your business logic while your controllers should return a model to the view.

This forces you to think about how your models should already have "processed data" and how the ViewModel will strictly be a car to transport your processed models to your destination which is the View.

Web Forms and MVC can use Sessions, but I would recommend against it

Along with ViewState, sessions are another bane of my existence. Sessions provide state in a state-less web. What happens when that state is out of sync? Don't tell me it won't be because it will. Been there, done that!

Developers placing state (or worse, user controls) inside of a session is just asking for trouble.

In MVC, there are a number of ways of passing data back and forth to the View. I mention a couple in a post called ASP.NET MVC Views: How to Pass Data To Views.

As I mentioned before, I'm glad I'm not the only one who feels this way about Sessions.

Web Forms has IsPostBack where MVC has a GET and...well...a POST

New Web Form developers (and some seasoned) sometimes forget to include an "if (IsPostBack) return;" statement in their Page_Load event of their page. This may look strange to some veteran web developers coming over from PHP or other web language.

The whole idea of Web Forms is when you are requesting a page, it's considered a GET (visiting the page for the first time) and the page initializes.

The term IsPostback is coined when a form is submitted, or POST-ed. So if I visit a page, the IsPostBack lets me through and performs the initialization of the page. When you submit a form, the Page_Load detects that it's a Postback and kicks you out of the Page_Load immediately because it should defer to the event that triggered the submit.

MVC has the standard HTTP Protocol standards of GET, POST, DELETE, and redirects. When you click a submit button, that form (and data) gets submitted to the controller and the controller handles the processing of it.

Again, the MVC way feels more natural.

Web Forms is not testable-friendly, MVC was built around tests

Out of the box, web form developers have a problem.

Unless they were disciplined with their business objects and code-behind forms, it may take a rewrite to get most of the business logic into a testable state.

With MVC, you can build tests against the controller, routes, action results...against just about any hooks in the ASP.NET MVC Framework.
Web Forms has One. Big. Form. MVC can have multiple forms on a page.

Speaking of unnatural, you can imagine how hard it is to go to a website that has a JavaScript service that contains an HTML form and they suggest you copy-and-paste this sample code into your ASP.NET Web Forms page.

Won't work. Why?

If you do a View Source on a Web Forms web site, you'll notice that right after the BODY tag in your HTML, there is a Form tag that encompasses the entire page...INSIDE A FORM!

This is where the gears in my head locked up the first time I experienced this. How kooky is this?

MVC allows you to have multiple forms on a page.

End of story.

Best ASP.NET Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET Core 2 Hosting - Creating A GraphQL Endpoint in ASP.NET Core

clock July 24, 2018 08:25 by author Kenny

The Graph Query Language

The GraphQL was invented by Facebook in 2012 and released to the public in 2015. It is a query language to tell the API exactly about the data you wanna have. This is the difference between REST, where you need to query different resources/URIs to get different data. In GrapgQL there is one single point of access about the data you want to retrieve.

That also makes the planning about the API a little more complex. You need to think about what data you wanna provide and you need to think about how you wanna provide that data.

While playing around with it, I created a small book database. The idea is to provide data about books and authors.

Let's have a look into few examples. The query to get the book number and the name of a specific book looks like this.

{
book(isbn: "822-5-315140-65-3"){
isbn,
name
}
}

This look similar to JSON but it isn't. The property names are not set in quotes, which means it is not really a JavaScript Object Notation. This query need to be sent inside the body of an POST request to the server.

The Query gets parsed and executed against a data source on the server and the server should send the result back to the client:

{
"data": {
"book": {
"isbn": "822-5-315140-65-3",
"name": "ultrices enim mauris parturient a"
}
}
}

If we want to know something about the author, we need to ask about it:

{
book(isbn: "822-5-315140-65-3"){
isbn,
name,
author{
id,
name,
birthdate
}
}
}

This is the possible result:

{
"data": {
"book": {
"isbn": "822-5-315140-65-3",
"name": "ultrices enim mauris parturient a",
"author": {
"id": 71,
"name": "Henderson",
"birthdate": "1937-03-20T06:58:44Z"
}
}
}
}

You need a list of books, including the authors? Just ask for it:

{
books{
isbn,
name,
author{
id,
name,
birthdate
}
}
}

The list is too large? Just limit the result, to get only 20 items:

{
books(limit: 20) {
isbn,
name,
author{
id,
name,
birthdate
}
}
}

The Book Database

The book database is just fake. I love to use GenFu to generate dummy data. So I did the same for the books and the authors and created a BookRepository:

public class BookRepository : IBookRepository
{
private IEnumerable<Book> _books = new List<Book>();
private IEnumerable<Author> _authors = new List<Author>();
public BookRepository()
{
GenFu.GenFu.Configure<Author>()
.Fill(_ => _.Name).AsLastName()
.Fill(_=>_.Birthdate).AsPastDate();
_authors = A.ListOf<Author>(40);
GenFu.GenFu.Configure<Book>()
.Fill(p => p.Isbn).AsISBN()
.Fill(p => p.Name).AsLoremIpsumWords(5)
.Fill(p => p.Author).WithRandom(_authors);
_books = A.ListOf<Book>(100);
}
public IEnumerable<Author> AllAuthors()
{
return _authors;
}
public IEnumerable<Book> AllBooks()
{
return _books;
}
public Author AuthorById(int id)
{
return _authors.First(_ => _.Id == id);
}
public Book BookByIsbn(string isbn)
{
return _books.First(_ => _.Isbn == isbn);
}
}
public static class StringFillerExtensions
{
public static GenFuConfigurator<T> AsISBN<T>(
this GenFuStringConfigurator<T> configurator) where T : new()
{
var filler = new CustomFiller<string>(
configurator.PropertyInfo.Name, 
typeof(T), 
() =>
{
return MakeIsbn();
});
configurator.Maggie.RegisterFiller(filler);
return configurator;
}

public static string MakeIsbn()
{
// 978-1-933988-27-6
var a = A.Random.Next(100, 999);
var b = A.Random.Next(1, 9);
var c = A.Random.Next(100000, 999999);
var d = A.Random.Next(10, 99);
var e = A.Random.Next(1, 9);
return $"{a}-{b}-{c}-{d}-{e}";
}
}

GenFu provides a useful set of so called fillers to generate data randomly. There are fillers to generate URLs, emails, names, last names, states of US and Canada and so on. I also need a ISBN generator, so I created one by extending the generic GenFuStringConfigurator.

The BookRepository is registered as a singleton in the Dependency Injection container, to work with the same set of data while the application is running. You are able to add some more information to that repository, like publishers and so on.

GraphQL in ASP.NET Core

Fortunately there is a .NET Standard compatible implementation of the GraphQL on GitHub. So there's no need to parse the Queries by yourself. This library is also available as a NuGet package:

<PackageReference Include="GraphQL" Version="0.15.1.678" />

The examples provided on GitHub, are pretty easy. They directly write the result to the output, which means the entire ASP.NET Applications is a GraphQL server. But I want to add GraphQL as a ASP.NET Core MiddleWare, to add the GraphQL implementation as a different part of the Application. Like this you are able to use REST based POST and PUT request to add or update the data and to use the GraphQL to query the data.

I also want that the middleware is listening to the sub path "/graph"

public class GraphQlMiddleware
{
private readonly RequestDelegate _next;
private readonly IBookRepository _bookRepository;
public GraphQlMiddleware(RequestDelegate next, IBookRepository bookRepository)
{
_next = next;
_bookRepository = bookRepository;
}
public async Task Invoke(HttpContext httpContext)
{
var sent = false;
if (httpContext.Request.Path.StartsWithSegments("/graph"))
{
using (var sr = new StreamReader(httpContext.Request.Body))
{
var query = await sr.ReadToEndAsync();
if (!String.IsNullOrWhiteSpace(query))
{
var schema = new Schema { Query = new BooksQuery(_bookRepository) };
var result = await new DocumentExecuter()
.ExecuteAsync(options =>
{
options.Schema = schema;
options.Query = query;
}).ConfigureAwait(false);
CheckForErrors(result);
await WriteResult(httpContext, result);
sent = true;
}
}
}
if (!sent)
{
await _next(httpContext);
}
}
private async Task WriteResult(HttpContext httpContext, ExecutionResult result)
{
var json = new DocumentWriter(indent: true).Write(result);
httpContext.Response.StatusCode = 200;
httpContext.Response.ContentType = "application/json";
await httpContext.Response.WriteAsync(json);
}
private void CheckForErrors(ExecutionResult result)
{
if (result.Errors?.Count > 0)
{
var errors = new List<Exception>();
foreach (var error in result.Errors)
{
var ex = new Exception(error.Message);
if (error.InnerException != null)
{
ex = new Exception(error.Message, error.InnerException);
}
errors.Add(ex);
}
throw new AggregateException(errors);
}
}
}
public static class GraphQlMiddlewareExtensions
{
public static IApplicationBuilder UseGraphQL(this IApplicationBuilder builder)
{
return builder.UseMiddleware<GraphQlMiddleware>();
}
}

With this kind of MiddleWare, I can extend my applications Startup.cs with GraphQL:

app.UseGraphQL();

As you can see, the BookRepository gets passed into this Middleware via constructor injection. The most important part is that line:

var schema = new Schema { Query = new BooksQuery(_bookRepository) };

This is where we create a schema, which is used by the GraphQL engine to provide the data. The schema defines the structure of the data you wanna provide. This is all done in a root type called BooksQuery. This type gets the BookRepostory.

This Query is a GryphType, provided by the GraphQL library. You need to derive from a ObjectGraphType and to configure the schema in the constructor:

public class BooksQuery : ObjectGraphType
{
public BooksQuery(IBookRepository bookRepository)
{
Field<BookType>("book",
arguments: new QueryArguments(
new QueryArgument<StringGraphType>() { Name = "isbn" }),
resolve: context =>
{
var id = context.GetArgument<string>("isbn");
return bookRepository.BookByIsbn(id);
});
Field<ListGraphType<BookType>>("books",
resolve: context =>
{
return bookRepository.AllBooks();
});
}
}

Using the GraphQL library all types used in the Query to define the schema are any kind of GraphTypes, even the BookType:

public class BookType : ObjectGraphType<Book>
{
public BookType()
{
Field(x => x.Isbn).Description("The isbn of the book.");
Field(x => x.Name).Description("The name of the book.");
Field<AuthorType>("author");
}
}

The difference is just the generic ObjectGraphType which is also used for the AuthorType. The properties of the Book, which are simple types like the name or the ISBN are mapped directly with the lambda. The complex typed properties like the Author are mapped via another generic ObjectGraphType, which is ObjectGraphType in that case.

Best ASP.NET Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



ASP.NET Core 2 Hosting - Prepare Your Machine and Get to Know Visual Studio Code for Angular 2 and ASP.NET Core Project

clock July 10, 2018 11:44 by author Kenny

Why so many posts? The idea is to take you from nothing and not only build the application but to detail why it's built in this manner. There are numerous options when it comes to web development and for many readers this tutorial will walk you through two new frameworks and a new code editor so breaking up the content allows for sufficient explanation. In this particular post, you install the tools used throughout the remaining posts. The post also provides a tour of the main Visual Studio Code features used to create the application.

Prepare Your Machine

These are the frameworks and tools to install before writing any code: Node.js and npm; .NET Core (Includes ASP.NET Core); Visual Studio Code; C# Visual Studio Code Extension (Installed from Visual Studio Code)

Node.js and npm

No you aren't writing a Node.js application. However, the framework has become the defacto tooling standard for pre-processing your HTML, JavaScript, and CSS before it hits the browser. For instance, the Angular 2 application is built in TypeScript which requires compilation into JavaScript. Node.js fills this role in the application. As important as Node.js is its package manager, npm. This tool has also become the defacto standard for obtaining web development libraries and tooling. Node.js and npm are included in the same installer available in both a current and LTS (long-term support) version. The LTS version is recommended for most users. Make sure to have node version 4.x.x or higher and npm version 3.x.x or higher. You will check them later while touring Visual Studio Code.

.NET Core

To be clear, this is not the .NET Framework of old. The .NET Core framework is built from the ground up to be cross-platform and fast. This download includes the .NET Core and ASP.NET Core Frameworks as well as the terminal/command line tools used to create the backend in this tutorial. While higher-order features such as Routing, Views, Controllers are similar to their ASP.NET 4.6 counterparts, setting up and configuring an ASP.NET Core application is noticeably different and you will even start it from the terminal/command line. For this tutorial, use the .NET Core Preview 3 SDK. Later in this post, you will check which version is installed. It should be 1.0.0-preview3-x or higher.

Visual Studio Code

Visual Studio Code is one of the newer additions to the Visual Studio family. Forget anything you knew about traditional Visual Studio, this is a different animal entirely. During installation, you can add Visual Studio Code to your PATH variable. This enables the ability to type code . in the terminal/command window and open the current directory in Visual Studio Code.

Get to Know Visual Studio Code

This application is built entirely in Visual Studio Code. While this is not an exhaustive tour, it points out the main features of the editor relevant to building the application and continues setting up the editor for your project.

Explorer Pane

Put simply, this is where your files are listed. You point Visual Studio Code to a directory and this pane lists all the files and folders in that directory, including those that are currently open in the editor. You can create new files or folders directly in the explorer pane and to edit a file, simply click on it and it opens in the editor.

Integrated Terminal

The integreated terminal in Visual Studio Code is exactly that. Instead of switching between your editor and a seperate instance of your terminal/command window, you run commands directly in the editor. This walkthrough exclusively uses the integrated terminal, but of course using a separate terminal/command window works fine as well. Go head and try it out:

Press Ctrl + ` to open the Integrated Terminal
Type node -v then Enter to get the Node.js version. It should be 4.x.xor higher.
Type npm -v then Enter to get the npm version. It should be 3.x.x or higher.
Type dotnet --version then Enter to get the .NET Core SDK verion. It should be 1.0.0-preview3-x or higher.
Press Ctrl + ` to close the Integrated Terminal

If at any point these commands fail, it most likely means that either the framework is not installed or isn't added to your PATH. On windows at least, try restarting to refresh your PATH variable.

Command Palette

If you only remember one keyboard shortcut in Visual Studio Code, it should be Ctrl + Shift + P to open the command palette. The command palette contains almost every operation you want to complete in Visual Studio Code. Just start typing and it filters the list of operations for you. You're fingers never have to leave the keyboard. You still need to install the C# extension (from Microsoft) in Visual Studio Code before you start coding. Try to install it using the command palette. If you get stuck, you can also find it here. These are the key features in Visual Studio Code used during the walkthrough. There are so many other great features, so please read more about them in the Visual Studio Code documentation.

Best ASP.NET Hosting Recommendation

ASPHostPortal.com provides its customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. ASPHostPortal.com offers ASP.NET hosting starts from $1/month only. They also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable ASP.NET Hosting, ASPHostPortal.com should be your best choice.



Cheap ASP.NET 4.5 Hosting

We’re a company that works differently to most. Value is what we output and help our customers achieve, not how much money we put in the bank. It’s not because we are altruistic. It’s based on an even simpler principle. "Do good things, and good things will come to you".

Success for us is something that is continually experienced, not something that is reached. For us it is all about the experience – more than the journey. Life is a continual experience. We see the Internet as being an incredible amplifier to the experience of life for all of us. It can help humanity come together to explode in knowledge exploration and discussion. It is continual enlightenment of new ideas, experiences, and passions


Author Link

 photo ahp banner aspnet-01_zps87l92lcl.png

 

Corporate Address (Location)

ASPHostPortal
170 W 56th Street, Suite 121
New York, NY 10019
United States

Tag cloud

Sign in